@charset "utf-8";

/* =========================================================================
   Azur Promilia — static landing page
   fonts / tokens
   ========================================================================= */
/* Kanit / Sitka — src ใส่ทั้ง relative (test.html) และ URL เต็ม (WP ถ้า CSS ถูก inline แล้ว path เดิมจะหลุด) */
@font-face{font-family:"Kanit";font-style:normal;font-weight:300;font-display:swap;src:url("../assets/fonts/kanit/Kanit-Light.ttf") format("truetype"),url("https://azurpromilia.playpark.com/landing/assets/fonts/kanit/Kanit-Light.ttf") format("truetype")}
@font-face{font-family:"Kanit";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/kanit/Kanit-Regular.ttf") format("truetype"),url("https://azurpromilia.playpark.com/landing/assets/fonts/kanit/Kanit-Regular.ttf") format("truetype")}
@font-face{font-family:"Kanit";font-style:normal;font-weight:500;font-display:swap;src:url("../assets/fonts/kanit/Kanit-Medium.ttf") format("truetype"),url("https://azurpromilia.playpark.com/landing/assets/fonts/kanit/Kanit-Medium.ttf") format("truetype")}
@font-face{font-family:"Kanit";font-style:normal;font-weight:600;font-display:swap;src:url("../assets/fonts/kanit/Kanit-SemiBold.ttf") format("truetype"),url("https://azurpromilia.playpark.com/landing/assets/fonts/kanit/Kanit-SemiBold.ttf") format("truetype")}
@font-face{font-family:"Kanit";font-style:normal;font-weight:700;font-display:swap;src:url("../assets/fonts/kanit/Kanit-Bold.ttf") format("truetype"),url("https://azurpromilia.playpark.com/landing/assets/fonts/kanit/Kanit-Bold.ttf") format("truetype")}

/* Sitka Web = ไฟล์บนเซิร์ฟเวอร์ — เครื่องไม่มี Sitka Banner/Text (WP / Mac / มือถือ) จะตกมาตัวนี้ */
@font-face{font-family:"Sitka Web";font-style:normal;font-weight:400 800;font-display:swap;src:url("../assets/fonts/sitka/SitkaVF.ttf") format("truetype"),url("https://azurpromilia.playpark.com/landing/assets/fonts/sitka/SitkaVF.ttf") format("truetype")}
@font-face{font-family:"Dominican";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/dominican/DOMINICA.woff2") format("woff2"),url("https://azurpromilia.playpark.com/landing/assets/fonts/dominican/DOMINICA.woff2") format("woff2")}
@font-face{font-family:"Kanit";font-style:normal;font-weight:800;font-display:swap;src:url("../assets/fonts/kanit/Kanit-Bold.ttf") format("truetype"),url("https://azurpromilia.playpark.com/landing/assets/fonts/kanit/Kanit-Bold.ttf") format("truetype")}

:root{
  /* stage scale: 1920x1080 art board fitted inside the viewport.
     Set from JS (main.js -> updateScale); these are the safe fallbacks. */
  --k: 1;    /* contain — used by the intro / characters / kibo art boards */
  --kw: 1.15;/* cover + slack — used by the draggable worlds map */

  /* ฟอนต์ตามดีไซน์ แยกตามภาษา (สลับด้วย html[data-lang] ข้างล่าง)
       en / id / vn : Sitka        th : Kanit        zh : Source Han (= Noto Serif SC / Noto Sans SC)
     Sitka: ใช้ของในเครื่องก่อน (Windows) ไม่มีก็ใช้ไฟล์ที่ฝังไว้ ("Sitka Web" — ดู @font-face ด้านบน)
     ค่าตรงนี้คือชุดของ en / id / vn ซึ่งเป็นค่าเริ่มต้น
       --serif = หัวข้อ/เมนู/ปุ่ม (Sitka Banner ตัวแคบสำหรับตัวใหญ่)   --sans, --body = เนื้อความ (Sitka Text) */
  --serif: "Sitka Web", "Sitka Banner", "Sitka Heading", "Noto Serif", Georgia, serif;
  --sans: "Sitka Web", "Sitka Text", "Noto Sans", "Noto Serif", Georgia, serif;
  --body: "Sitka Web", "Sitka Text", "Noto Sans", "Noto Serif", Georgia, serif;

  --paper: #eaebe0;
  --ink: #4b4943;
  --ink-soft: #9e9c97;
  --gold: #ceb684;
}

/* ไทย: Kanit ทั้งหมด — ส่วน --serif ให้ตัวละติน (HOME, KIBO ฯลฯ) ยังเป็น Sitka เหมือนในดีไซน์ ตัวไทยตกไป Kanit เอง */
html[data-lang="th"],
html[lang="th"],
html[lang^="th-"]{
  --serif: "Sitka Web", "Sitka Banner", "Sitka Heading", "Kanit", "Noto Serif Thai", serif;
  --sans: "Kanit", "Noto Sans Thai", sans-serif;
  --body: "Kanit", "Noto Sans Thai", sans-serif;
}
html[data-lang="zh"],
html[lang^="zh"]{
  --serif: "Source Han Serif Web", "Noto Serif SC", "Source Han Serif SC", "Source Han Serif CN", "Source Han Serif", serif;
  --sans: "Source Han Sans Web", "Noto Sans SC", "Source Han Sans SC", "Source Han Sans CN", "Source Han Sans", sans-serif;
  --body: "Source Han Sans Web", "Noto Sans SC", "Source Han Sans SC", "Source Han Sans CN", "Source Han Sans", sans-serif;
}

.az-landing,.az-landing *,.az-landing *::before,.az-landing *::after{box-sizing:border-box}

html:has(.az-landing),html:has(.az-landing) body{height:100%}
html:has(.az-landing) body{
  margin:0;
  background:#111;
  color:#fff;
  font-family:var(--body)!important;
  overflow:hidden;                 /* full page mode */
  overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
}
/* บทความและหมวดข่าวเลื่อนอ่านปกติ one-page มีเฉพาะหน้า landing */
html:has(.az-landing):has(body.single),
html:has(.az-landing):has(body.single-post),
html:has(.az-landing):has(body.category),
html:has(.az-landing) body.single,
html:has(.az-landing) body.single-post,
html:has(.az-landing) body.category,
html:has(.az-landing) body.single #td-outer-wrap,
html:has(.az-landing) body.single-post #td-outer-wrap,
html:has(.az-landing) body.category #td-outer-wrap{
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
  overscroll-behavior:auto;
}
body.single .az-landing .fp,
body.single-post .az-landing .fp,
body.category .az-landing .fp{
  position:relative!important;
  inset:auto!important;
  height:auto!important;
  overflow:visible!important;
  touch-action:auto!important;
}
.az-landing{font-family:var(--body)!important}

/* Newspaper / tagDiv มักล็อก font-family ที่ body, p, heading ด้วย !important — ตัดที่กรอบธีม ให้ลูกแลนดิง inherit */
html:has(.az-landing) body,
html:has(.az-landing) body.home,
html:has(.az-landing) body.page,
html:has(.az-landing) #td-outer-wrap,
html:has(.az-landing) .td-container,
html:has(.az-landing) .td-ss-main-content,
html:has(.az-landing) .td-main-content,
html:has(.az-landing) .td-post-content,
html:has(.az-landing) .td-page-content,
html:has(.az-landing) .entry-content,
html:has(.az-landing) .wpb_wrapper,
html:has(.az-landing) .wpb_text_column,
html:has(.az-landing) .wpb-content-wrapper{
  font-family:var(--body)!important;
}
html:has(.az-landing) body p,
html:has(.az-landing) body a,
html:has(.az-landing) body li,
html:has(.az-landing) .td-post-content p,
html:has(.az-landing) .td-post-content a,
html:has(.az-landing) .td-post-content li,
html:has(.az-landing) .entry-content p,
html:has(.az-landing) .wpb_wrapper p{
  font-family:inherit!important;
}
html:has(.az-landing) body h1,
html:has(.az-landing) body h2,
html:has(.az-landing) body h3,
html:has(.az-landing) body h4,
html:has(.az-landing) .az-landing h1,
html:has(.az-landing) .az-landing h2,
html:has(.az-landing) .az-landing h3{
  font-family:var(--serif)!important;
}

.az-landing img{max-width:100%;display:block}
.az-landing button{background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer}
.az-landing a{color:inherit;text-decoration:none}
/* กันสไตล์เนื้อหาธีมทับแลนดิง — อยู่ก่อนกฎชิ้นงาน กฎที่เฉพาะกว่าด้านล่างทับได้ */
.td-post-content .az-landing h1,
.td-post-content .az-landing h2,
.td-post-content .az-landing h3,
.td-post-content .az-landing p,
.td-post-content .az-landing ul,
.td-post-content .az-landing ol,
.td-post-content .az-landing li,
.td-post-content .az-landing figure,
.td-main-content .az-landing h1,
.td-main-content .az-landing h2,
.td-main-content .az-landing h3,
.td-main-content .az-landing p,
.td-main-content .az-landing ul,
.td-main-content .az-landing li,
.td-main-content .az-landing figure,
.entry-content .az-landing h1,
.entry-content .az-landing h2,
.entry-content .az-landing h3,
.entry-content .az-landing p,
.entry-content .az-landing ul,
.entry-content .az-landing ol,
.entry-content .az-landing li,
.entry-content .az-landing figure,
.tdc-zone .az-landing h1,
.tdc-zone .az-landing h2,
.tdc-zone .az-landing p,
.tdc-zone .az-landing ul,
.tdc-zone .az-landing ol,
.tdc-zone .az-landing li,
.tdc-zone .az-landing figure{
  margin:0;
  float:none;
  letter-spacing:normal;
  text-transform:none;
  border:0;
  box-shadow:none;
  font-family:inherit!important;
}
.td-post-content .az-landing img,
.td-main-content .az-landing img,
.entry-content .az-landing img,
.tdc-zone .az-landing img{
  width:auto;
  max-width:100%;
  height:auto;
  margin:0;
  border:0;
  box-shadow:none;
  float:none;
  display:block;
}


.az-landing .blind{
  position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
/* ธีม Newspaper ใส่ ul li, ol li { margin-left:21px } — รายการบนหน้าแรกไม่ได้ออกแบบให้มีระยะนี้
   (แท็บข่าวมือถือล้นกรอบ: li 7 ตัว × 21px, รายการข่าวและเมนูเยื้องขวา) · เฉพาะหน้า AZ Home ไม่กระทบรายการในเนื้อหาข่าว
   :where() ทำให้กฎน้ำหนักต่ำ — ถ้า style.css ตั้ง margin ให้ li ที่ไหนเอง กฎนั้นยังชนะ */
:where(body.az-home) .az-landing :where(ul, ol) > li{margin-left:0}
/* หน้าโหลดปิด → main.ssr.js ใส่คลาสนี้ชั่วขณะ ให้แอนิเมชันเข้าของหน้าแรกเริ่มเล่นใหม่ (หน้าโหลดอยู่ใน css/loader.css) */
.az-landing.az-replay *,.az-landing.az-replay *::before,.az-landing.az-replay *::after{animation:none!important}

/* =========================================================================
   i18n
   ข้อความทั้งหน้ามาจาก i18n/<lang>.js — ซ่อนไว้จนกว่าจะใส่ค่าเสร็จ
   กันไม่ให้เห็นกล่องเปล่ากะพริบ (js/i18n.js เอาคลาสนี้ออกให้เอง
   และมี timeout กันหน้าค้างขาวถ้าไฟล์ภาษาโหลดไม่ขึ้น)
   ========================================================================= */
.i18n-pending body{visibility:hidden}

/* เมนูเลือกภาษา — มาร์กอัปข้างในสร้างจาก js/i18n.js (renderSwitchers) */
.az-landing .lang_switch{position:relative;flex:0 0 auto;width:max-content;max-width:100%}
/* ปุ่ม = แคปซูลขอบขาว โชว์ "ชื่อภาษาเต็ม" + ข้าวหลามตัด (ตามดีไซน์) */
.az-landing .lang_switch__toggle{
  display:flex;align-items:center;gap:9px;height:28px;padding:0 16px 0 20px;
  border:1.5px solid #fff;border-radius:14px;
  background:rgba(0,0,0,.12);
  color:#fff;
  font-family:var(--serif)!important;font-size:19px;font-weight:700;line-height:1;white-space:nowrap;
  transition:color .3s,border-color .3s,background-color .3s;
}
/* Kanit ตัวกว้างกว่า Sitka — ลดขนาดลงให้แคปซูลกว้างใกล้เคียงดีไซน์ */
html[data-lang="th"] .az-landing .lang_switch__toggle{font-size:17px;font-weight:500}
.az-landing .lang_switch__caret{
  flex:0 0 auto;width:7px;height:11px;background:currentColor;
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.az-landing .lang_switch__toggle:hover,
.az-landing .lang_switch.is-open .lang_switch__toggle{
  color:#fff;border-color:var(--gold);background:rgba(0,0,0,.55);
}
/* ล็อกความกว้างเท่า test.html — ธีม Newspaper/Composer มักตั้ง ul เป็น width:100% + padding รายการ */
.az-landing .lang_switch__list,
.td-post-content .az-landing .lang_switch__list,
.td-main-content .az-landing .lang_switch__list,
.entry-content .az-landing .lang_switch__list,
.tdc-zone .az-landing .lang_switch__list,
.wpb_wrapper .az-landing .lang_switch__list{
  display:block;position:absolute;top:38px;right:0;left:auto;z-index:20;
  box-sizing:border-box;margin:0;padding:5px;
  width:max-content;min-width:100%;max-width:none;
  border:1px solid rgba(206,182,132,.45);border-radius:10px;
  background:rgba(10,12,18,.94);
  box-shadow:0 10px 26px rgba(0,0,0,.5);
  list-style:none;list-style-type:none;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .22s,transform .22s,visibility .22s;
}
.az-landing .lang_switch.is-open .lang_switch__list{opacity:1;visibility:visible;transform:none}
.az-landing .lang_switch__list > li,
.td-post-content .az-landing .lang_switch__list > li,
.td-main-content .az-landing .lang_switch__list > li,
.entry-content .az-landing .lang_switch__list > li,
.tdc-zone .az-landing .lang_switch__list > li,
.wpb_wrapper .az-landing .lang_switch__list > li{
  display:block;width:auto;margin:0;padding:0;list-style:none;line-height:inherit;float:none;
}
.az-landing .lang_switch__item,
.az-landing .lang_switch__list a.lang_switch__item,
.az-landing .lang_switch__list button.lang_switch__item{
  display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border-radius:6px;
  color:rgba(255,255,255,.7);font-family:var(--sans)!important;font-size:13px;line-height:1.2;
  text-align:left;white-space:nowrap;text-decoration:none;box-sizing:border-box;
  transition:color .2s,background-color .2s;
}
.az-landing .lang_switch__item:hover{color:#fff;background:rgba(206,182,132,.16)}
.az-landing .lang_switch__item.is-on{color:var(--gold);font-weight:700}

/* เวอร์ชันมือถือ — อยู่แถวเดียวกับปุ่ม bgm ในเมนูเต็มจอ กางลงทางซ้าย */
.az-landing .lang_switch--mo{margin-left:10px}
.az-landing .lang_switch--mo .lang_switch__toggle{height:34px}
.az-landing .lang_switch--mo .lang_switch__list{left:0;right:auto;top:42px}

/* =========================================================================
   Full page scroller
   ========================================================================= */
.az-landing .fp{position:fixed;inset:0;overflow:hidden}
.az-landing .fp__wrap{position:relative;width:100%;height:100%}
.az-landing .fp__slide{position:relative;width:100%;height:100dvh;max-height:1440px;overflow:hidden}
/* เปลี่ยน section แบบเว็บจีน (js เติม .is-fade ให้ .fp ตอนเริ่ม — js ไม่ทำงานก็ยังเห็น section แรกตามปกติ)
   ทุก section ซ้อนกันที่เดียว แสดงทีละอัน (js/main.ssr.js fp.swap / fp.settle)
   ออก: section เดิมเบลอ 0→8px (.5s) แล้วจางหายอยู่ข้างใต้ (.8s) · เข้า (ที่ .5s): section ใหม่โผล่ด้านบน จางเข้า + เบลอ 8px→ชัด (.4s)
   ทุกช่วง ease power3.out = cubic-bezier(.215,.61,.355,1) — เวลา/ค่าวัดจากเว็บจีน */
.az-landing .fp.is-fade .fp__slide{position:absolute;top:0;left:0;z-index:0;visibility:hidden;opacity:0}
.az-landing .fp.is-fade .fp__slide.is-current{
  z-index:3;visibility:visible;opacity:1;
  transition:opacity .4s cubic-bezier(.215,.61,.355,1),filter .4s cubic-bezier(.215,.61,.355,1);
}
.az-landing .fp.is-fade .fp__slide.is-entering{z-index:3;visibility:visible;opacity:0;filter:blur(8px);transition:none}
.az-landing .fp.is-fade .fp__slide.is-leaving{
  z-index:2;visibility:visible;opacity:1;filter:blur(8px);
  transition:filter .5s cubic-bezier(.215,.61,.355,1);
}
.az-landing .fp.is-fade .fp__slide.is-leaving.is-fading{
  opacity:0;
  transition:filter .5s cubic-bezier(.215,.61,.355,1),opacity .8s cubic-bezier(.215,.61,.355,1);
}

/* right hand section indicator — removed per SEA feedback (no other regional sites use it) */
.az-landing .fp__dots{display:none !important}
.az-landing .fp__dots button{
  display:block;width:10px;height:10px;border-radius:50%;
  background:rgba(255,255,255,.28);
  box-shadow:0 0 6px rgba(0,0,0,.5);
  transition:all .35s;
}
.az-landing .fp__dots button:hover{background:rgba(255,255,255,.6)}
.az-landing .fp__dots button.is-on{background:#fff;transform:scale(1.5);box-shadow:0 0 10px #38a4ff}

/* the 1920x1080 art board */
.az-landing .stage{
  position:absolute;top:50%;left:50%;
  width:1920px;height:1080px;
  transform:translate(-50%,-50%) scale(var(--k));
  transform-origin:center center;
  pointer-events:none;
}
.az-landing .stage button,.az-landing .stage a,.az-landing .stage input,.az-landing .stage label,.az-landing .stage .voice,.az-landing .stage .btn_map{pointer-events:auto}

.az-landing .section{
  position:relative;width:100%;height:100%;max-height:1440px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  font-family:var(--sans)!important;
}

/* =========================================================================
   HEADER — PC
   ========================================================================= */
.az-landing .header{
  position:fixed;left:0;width:100%;z-index:60;
}
/* หน้าบทความและหมวดข่าวให้หัวเว็บเลื่อนไปกับหน้า ยังทับพื้นด้านบนเหมือนเดิม แต่ไม่ตรึงบนจอ */
body.single .az-landing .header,
body.single-post .az-landing .header,
body.category .az-landing .header,
body.az-news-page .az-landing .header{
  position:absolute;
}
/* พื้นไล่สีดำใต้ top bar — ค่าเดียวกับเว็บอ้างอิง (CN): ดำ 80% ที่ขอบบน จางหมดที่ 12% ของความสูงจอ
   วางเป็นชั้นแยกเต็มความกว้างจอ ไม่ผูกกับความสูง/zoom ของ header */
.az-landing .header::before{
  content:"";position:absolute;top:0;left:0;z-index:-1;width:100%;
  height:calc(12vh / var(--hz,1));height:calc(12dvh / var(--hz,1));   /* --hz = zoom ของ header PC บนจอแคบ (ท้ายไฟล์) */
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.8) 0%,rgba(0,0,0,.7) 16.67%,rgba(0,0,0,.55) 33.33%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.25) 66.67%,rgba(0,0,0,.12) 83.33%,rgba(0,0,0,.04) 91.67%,rgba(0,0,0,0) 100%);
}
.az-landing .header .logo{
  background:var(--img-logo, url(../assets/i18n/en/e25/logo.png)) 0 0/contain no-repeat;
  width:114px;height:60px;flex:0 0 auto;
}
/* ขนาด/ระยะของ header PC ทั้งหมดเป็น px ตามดีไซน์ 1920 (อ้างอิง edit2-design)
   จอแคบกว่านั้นย่อทั้งแถบด้วย zoom ที่ท้ายไฟล์ (หา "header PC บนจอแคบ") */
.az-landing .header--pc{top:0;height:114px;padding:0 3px 0 38px}
.az-landing .header--pc .logo{width:146px;height:77px}
.az-landing .header--pc .menu_container{gap:70px}
.az-landing .header--pc .nav_buttons{gap:69px;position:relative;top:-4px;text-transform:uppercase}
.az-landing .header--pc .nav_buttons button,
.az-landing .header--pc .nav_buttons a{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:end;
  height:20px;
  color:#fff;
  font-family:var(--serif)!important;
  font-size:20px;
  line-height:1;
  font-weight:700;
  transition:color .4s,text-shadow .4s;
  white-space:nowrap;
  text-transform:uppercase;
  text-decoration:none;
}
html[data-lang="zh"] .az-landing .header--pc .nav_buttons button,
html[data-lang="zh"] .az-landing .header--pc .nav_buttons a{font-weight:800}
.az-landing .header--pc .nav_buttons button::before,
.az-landing .header--pc .nav_buttons a::before{
  /* ดาวอยู่ด้านซ้ายของหัวข้อ ไม่ทับตัวหนังสือ แม้ข้อความยาวต่างกันแต่ละภาษา */
  content:"";position:absolute;top:-20px;right:100%;margin-right:-4px;width:32px;height:36px;opacity:0;
  background:url(../assets/e26/header_star.png) 0 0/contain no-repeat;
  transition:opacity .4s;
}
.az-landing .header--pc .nav_buttons button::after,
.az-landing .header--pc .nav_buttons a::after{
  /* ลายอักษรรูนใต้หัวข้อ — จัดกึ่งกลางใต้คำ */
  content:"";position:absolute;bottom:-13px;left:50%;height:6px;background-size:contain;transform:translateX(-50%);
}
.az-landing .header--pc .nav_buttons button:hover,
.az-landing .header--pc .nav_buttons a:hover,
.az-landing .header--pc .nav_buttons button.is-on,
.az-landing .header--pc .nav_buttons a.is-on{color:#fff;text-shadow:0 0 4px #38a4ff}
.az-landing .header--pc .nav_buttons button.is-on::before,
.az-landing .header--pc .nav_buttons a.is-on::before{opacity:1}
.az-landing .header--pc .nav_buttons .btn_main::after{background:url(../assets/e26/header_deco_main.png) no-repeat;width:29px}
.az-landing .header--pc .nav_buttons .btn_news::after{background:url(../assets/e26/header_deco_news.png) no-repeat;width:29px}
/* no sixth ornament ships with the header set — mirror the widest one */
.az-landing .header--pc .nav_buttons .btn_reg::after{background:url(../assets/e26/header_deco_char.png) no-repeat;width:67px;transform:translateX(-50%) scaleX(-1)}
.az-landing .header--pc .nav_buttons .btn_characters::after{background:url(../assets/e26/header_deco_char.png) no-repeat;width:67px}
.az-landing .header--pc .nav_buttons .btn_kibo::after{background:url(../assets/e26/header_deco_kibo.png) no-repeat;width:29px}
.az-landing .header--pc .nav_buttons .btn_worlds::after{background:url(../assets/e26/header_deco_wolrd.png) no-repeat;width:37px}

.az-landing .header--pc .btns_container{gap:0;position:relative}
/* left:36px = ดันกลุ่มไอคอนเข้าไปซ้อนขอบโปร่งด้านซ้ายของปุ่มลงทะเบียน ให้ระยะถึงดาวเท่าดีไซน์ */
.az-landing .header--pc .icons{gap:27px;position:relative;z-index:5;left:20px}
/* เส้นคั่นอยู่กึ่งกลางระหว่างขอบขวาปุ่มภาษากับขอบซ้ายของดาวบนปุ่มลงทะเบียน (ข้างละ ≈32px)
   ดาวเริ่มที่ ~40px จากขอบซ้ายของกล่องปุ่ม (ส่วนนั้นเป็นขอบโปร่งของวิดีโอ) — ผลรวม margin ต้องคง 12px ไม่งั้นไอคอนทั้งแถวจะเลื่อน */
.az-landing .header--pc .header_lang_sep{
  display:block;flex:0 0 auto;width:1px;height:16px;margin:0 7px 0 5px;
  background:rgba(255,255,255,.55);
}
.az-landing .header--pc .icons .btn_sound{
  position:relative;width:36px;height:36px;
  background:url(../assets/e26/btn_bgm_off.png) 0 0/contain no-repeat;
}
.az-landing .header--pc .icons .btn_sound::after{
  content:"";display:block;width:100%;height:100%;opacity:0;transition:opacity .3s;
  background:url(../assets/e26/btn_bgm_over.png) 0 0/contain no-repeat;
}
.az-landing .header--pc .icons .btn_sound:hover::after,
.az-landing .header--pc .icons .btn_sound.is-on::after{opacity:1}

.az-landing .share_container{position:relative;display:flex}
.az-landing .share_container .btn_toggle{
  width:36px;height:36px;
  background:url(../assets/e26/btn_share_off.png) 0 0/contain no-repeat;
}
.az-landing .share_container .btn_toggle::after{
  content:"";display:block;width:100%;height:100%;opacity:0;transition:opacity .3s;
  background:url(../assets/e26/btn_share_over.png) 0 0/contain no-repeat;
}
.az-landing .share_container .btn_toggle:hover::after,
.az-landing .share_container.is-open .btn_toggle::after{opacity:1}
.az-landing .share_container .dropDown{
  position:absolute;top:44px;left:-7px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  width:50px;height:0;padding:0 6px;overflow:hidden;box-sizing:border-box;
  transition:height .45s,padding .45s;
  background:url(../assets/e26/bg_dropdown.png) 50% 0/100% 100% no-repeat;
}
.az-landing .share_container.is-open .dropDown{
  height:calc(var(--social-count,4) * 36px + 22px);
  padding-top:16px;padding-bottom:6px;
}
.az-landing .share_container .dropDown .header_social{
  display:block;flex:0 0 26px;width:30px;height:26px;padding:0;border:0;
  -webkit-mask-size:20px 20px;mask-size:20px 20px;
  opacity:.8;transition:opacity .2s,transform .2s;
}
.az-landing .share_container .dropDown .header_social:hover{opacity:1;transform:scale(1.1)}

/* ปุ่มลงทะเบียนมุมขวาบน — ขนาดต้นฉบับ 260×124 (ย่อจาก 297×142 ตามฟีดแบ็กให้ใกล้เว็บ CN) */
.az-landing .header--pc .btn_go_preregistraion{
  position:relative;width:260px;height:124px;margin-top:2px;flex:0 0 auto;
}
.az-landing .header--pc .btn_go_preregistraion video{position:absolute;top:0;left:0;width:100%}
.az-landing .header--pc .btn_go_preregistraion video.type1{z-index:3}
.az-landing .header--pc .btn_go_preregistraion video.type3{z-index:1;left:-5px}
.az-landing .header--pc .btn_go_preregistraion .bg{
  position:absolute;inset:0;z-index:2;
  background:url(../assets/e26/btn_go/btn_type2.png) 0 0/100% 100% no-repeat;
}
.az-landing .header--pc .btn_go_preregistraion .bg::after{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .3s;
  background:url(../assets/e26/btn_go/btn_type2_over.png) 0 0/100% 100% no-repeat;
}
.az-landing .header--pc .btn_go_preregistraion::after{
  content:"";
  position:absolute;
  top:46px;
  left:96px;
  z-index:5;
  width:131px;
  height:31px;
  display:block;
  background:var(--img-btn-go-prereg, url(../assets/i18n/en/e26/btn_go_preregistration.png)) 50% 50%/auto 100% no-repeat;
}
.az-landing .header--pc .btn_go_preregistraion:hover .bg::after{opacity:1}

/* =========================================================================
   HEADER — mobile
   ========================================================================= */
.az-landing .header--mo{top:0;height:72px;padding:0 12px}
.az-landing .header--mo .logo{width:92px;height:48px}
.az-landing .header--mo .right{gap:6px;min-width:0}
.az-landing .header--mo .btn_go_preregistraion{
  position:relative;width:clamp(132px,40vw,158px);height:auto;aspect-ratio:240/102;flex:0 0 auto;
}
.az-landing .header--mo .btn_go_preregistraion .fx{width:100%;height:100%;object-fit:contain;pointer-events:none}
/* ข้อความอยู่เฉพาะในช่องมืดของกรอบ (x ≈ 33%–76% ของรูป 240px) */
.az-landing .header--mo .btn_go_preregistraion .label{
  position:absolute;top:50%;left:54.5%;width:44%;transform:translate(-50%,-50%);
  display:block;box-sizing:border-box;overflow:hidden;text-align:center;
  font-family:var(--serif)!important;font-size:11px;font-weight:700;line-height:1;color:#fff;
  text-shadow:0 0 10px #8c9cfe;white-space:nowrap;letter-spacing:-.03em;
}
html[data-lang="en"] .az-landing .header--mo .btn_go_preregistraion .label,
html[data-lang="vn"] .az-landing .header--mo .btn_go_preregistraion .label{
  font-size:8px;letter-spacing:-.05em;
}
html[data-lang="id"] .az-landing .header--mo .btn_go_preregistraion .label{font-size:10px}
.az-landing .header--mo .btn_menu{
  width:30px;height:30px;
  background:url(../assets/e26/m/header_toggle.png) 0 0/contain no-repeat;
}
/* ปุ่มเปิด/ปิดเพลงใต้โลโก้ (แบบเว็บอ้างอิงมือถือ) — วงกลมขอบขาว + ตัวโน้ต, ปิดเพลงอยู่มีขีดทับ
   ขนาด/ตำแหน่งบนจอโทรศัพท์อยู่ในบล็อก PHONES ท้ายไฟล์ */
.az-landing .header--mo .btn_sound_mo{
  position:absolute;left:18px;top:84px;width:26px;height:26px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='%23fff' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='10' stroke-width='1.5'/%3E%3Cpath d='M17.4 13.4a6.9 6.9 0 0 1-3.2 3.8M4.6 8.6a6.9 6.9 0 0 1 3.2-3.8' stroke-width='1.1'/%3E%3Cpath d='M12 14.2V5.6c.3 1.7 1.5 2.5 3 3.3' stroke-width='1.4'/%3E%3Cellipse cx='10' cy='14.4' rx='2.3' ry='1.8' transform='rotate(-20 10 14.4)' fill='%23fff' stroke='none'/%3E%3C/svg%3E") 50%/contain no-repeat;
  filter:drop-shadow(0 0 2px rgba(0,0,0,.35));
}
.az-landing .header--mo .btn_sound_mo:not(.is-on)::before{
  content:"";position:absolute;left:12%;right:12%;top:50%;height:1.5px;margin-top:-.75px;
  background:#fff;transform:rotate(-45deg);pointer-events:none;
}

/* mobile menu overlay */
.az-landing .menu_overlay{
  position:fixed;inset:0;z-index:100;width:100%;height:100dvh;min-height:600px;
  display:flex;flex-direction:column;
  background:rgba(12,12,16,.55) url(../assets/e26/m/menu_overlay.png) no-repeat;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  animation:fadeIn .2s forwards;
}
.az-landing .menu_overlay[hidden]{display:none}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.az-landing .menu_overlay .menu_header{height:64px;padding:10px 16px}
.az-landing .menu_overlay .btn_sound_m{
  position:relative;width:42px;height:42px;
  background:url(../assets/e26/m/btn_bgm_off.png) 0 0/contain no-repeat;
}
/* ขีดทับสีเดียวกับไอคอนปิดเสียง ค้างไว้ตอน hover ถ้ายังปิดเสียงอยู่ */
.az-landing .header--pc .icons .btn_sound:not(.is-on)::before,
.az-landing .menu_overlay .btn_sound_m:not(.is-on)::before{
  content:"";position:absolute;z-index:2;left:4px;right:4px;top:50%;height:2px;margin-top:-1px;
  background:#c2c2c2;transform:rotate(-45deg);pointer-events:none;
}
.az-landing .menu_overlay .btn_sound_m:not(.is-on)::before{background:#fff}
.az-landing .menu_overlay .btn_close{width:42px;height:42px;background:url(../assets/e26/m/btn_menu_close.png) 0 0/contain no-repeat}
.az-landing .menu_overlay .menu_list{flex:1;justify-content:center;gap:8px;margin:0;padding:0}
/* ข้อความจริง ฟอนต์เดียวกับ .nav_buttons — ไม่ใช้รูปสไปรต์ที่มีตัวอักษรฝังอยู่
   ล็อก font-family ไว้ที่ปุ่มและ span เพราะธีม WordPress มักใส่ !important ที่ button/span */
.az-landing .menu_overlay .menu_item,
.az-landing .menu_overlay .menu_item .txt,
html:has(.az-landing) #td-outer-wrap .az-landing .menu_overlay .menu_item,
html:has(.az-landing) #td-outer-wrap .az-landing .menu_overlay .menu_item .txt,
html:has(.az-landing) .td-post-content .az-landing .menu_overlay .menu_item,
html:has(.az-landing) .td-post-content .az-landing .menu_overlay .menu_item .txt,
html:has(.az-landing) .td-main-content .az-landing .menu_overlay .menu_item,
html:has(.az-landing) .td-main-content .az-landing .menu_overlay .menu_item .txt,
html:has(.az-landing) .entry-content .az-landing .menu_overlay .menu_item,
html:has(.az-landing) .entry-content .az-landing .menu_overlay .menu_item .txt,
html:has(.az-landing) .wpb_wrapper .az-landing .menu_overlay .menu_item,
html:has(.az-landing) .wpb_wrapper .az-landing .menu_overlay .menu_item .txt{
  font-family:var(--serif)!important;
  font-size:20px;
  font-weight:700;
  line-height:1;
  letter-spacing:normal;
  text-transform:uppercase;
  text-indent:0;
  color:#fff;
}
html[data-lang="zh"] .az-landing .menu_overlay .menu_item,
html[data-lang="zh"] .az-landing .menu_overlay .menu_item .txt,
html[data-lang="zh"]:has(.az-landing) #td-outer-wrap .az-landing .menu_overlay .menu_item,
html[data-lang="zh"]:has(.az-landing) #td-outer-wrap .az-landing .menu_overlay .menu_item .txt,
html[data-lang="zh"]:has(.az-landing) .td-post-content .az-landing .menu_overlay .menu_item,
html[data-lang="zh"]:has(.az-landing) .td-post-content .az-landing .menu_overlay .menu_item .txt,
html[data-lang="zh"]:has(.az-landing) .entry-content .az-landing .menu_overlay .menu_item,
html[data-lang="zh"]:has(.az-landing) .entry-content .az-landing .menu_overlay .menu_item .txt,
html[data-lang="zh"]:has(.az-landing) .wpb_wrapper .az-landing .menu_overlay .menu_item,
html[data-lang="zh"]:has(.az-landing) .wpb_wrapper .az-landing .menu_overlay .menu_item .txt{font-weight:800}
.az-landing .menu_overlay .menu_item{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:auto;max-width:92vw;height:auto;min-height:48px;padding:10px 16px;
  overflow:visible;background:none;white-space:nowrap;
}
.az-landing .menu_overlay .menu_item .txt{position:relative;z-index:1}
.az-landing .menu_overlay .menu_item .ico{display:none}
/* สถานะที่เลือก: แสงฟ้า + เพชรสองข้าง */
.az-landing .menu_overlay .menu_item.is-on{gap:10px}
.az-landing .menu_overlay .menu_item.is-on .txt{
  text-shadow:0 0 6px rgba(255,255,255,.9),0 0 14px rgba(110,186,255,.95),0 0 26px rgba(56,140,255,.55);
}
.az-landing .menu_overlay .menu_item.is-on::before,
.az-landing .menu_overlay .menu_item.is-on::after{
  content:"";flex:0 0 24px;width:24px;height:8px;
  background:center/24px 8px no-repeat;
  filter:drop-shadow(0 0 4px #8ecfff);
}
.az-landing .menu_overlay .menu_item.is-on::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8'%3E%3Cpath fill='%23fff' d='M4 .8 7.2 4 4 7.2.8 4Z'/%3E%3Cpath fill='%23fff' d='M8 3.5h16v1H8z'/%3E%3C/svg%3E");
}
.az-landing .menu_overlay .menu_item.is-on::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8'%3E%3Cpath fill='%23fff' d='M0 3.5h16v1H0z'/%3E%3Cpath fill='%23fff' d='M20 .8 23.2 4 20 7.2 16.8 4Z'/%3E%3C/svg%3E");
}
.az-landing .menu_overlay .menu_footer{padding-bottom:28px}
/* เส้นคั่นเหนือไอคอน — ตัดจากขอบล่างของรูปปุ่มเดิม ไม่เอาตัวปุ่มลงทะเบียน */
.az-landing .menu_overlay .menu_footer::before{
  content:"";display:block;width:min(340px,88vw);height:14px;margin:2px 0 14px;
  pointer-events:none;
  background:var(--img-menu-regist-m, url(../assets/i18n/en/e26/m/btn_menu_regist.png)) center 47.9%/100% auto no-repeat;
}
.az-landing .menu_overlay .menu_footer .icons{gap:25px;margin-top:0;position:relative;z-index:2}
.az-landing .menu_overlay .menu_footer .icons button{width:36px;height:36px;background-position:50%;background-repeat:no-repeat;background-size:contain}
.az-landing .menu_overlay .menu_footer .btn_ytb{background-image:url(../assets/e26/m/btn_ytb.png)}
.az-landing .menu_overlay .menu_footer .btn_forum{background-image:url(../assets/e26/m/btn_forum.png)}
.az-landing .menu_overlay .menu_footer .btn_x{background-image:url(../assets/e26/m/btn_x.png)}
.az-landing .menu_overlay .menu_footer .btn_share{background-image:url(../assets/e26/m/btn_share.png)}
.az-landing .menu_overlay .menu_footer .icons:has(.header_social){gap:12px}
.az-landing .menu_overlay .menu_footer .icons .header_social{
  display:block;width:32px;height:32px;padding:0;border:0;
  -webkit-mask-size:24px 24px;mask-size:24px 24px;
}

/* =========================================================================
   1. INTRO
   เนื้อหาชุดเดียว ใช้ร่วมกันทั้ง PC และมือถือ (ไม่มีมาร์กอัปแยกจออีกแล้ว)

   หน่วยทั้งบล็อกนี้เป็น em โดย 1em = 16px บนอาร์ตบอร์ดออกแบบ 1920x1080
     → เลข em = ขนาดออกแบบเป็น px / 16     (เช่น 640px = 40em, 276px = 17.25em)
   เพราะฉะนั้นทุกชิ้นรักษาสัดส่วนเดิมไว้เองทุกความกว้างจอ
   ถ้าอยากย่อ/ขยายทั้ง section ให้แก้ --fs ที่เดียว (มี 2 ค่า: จอเล็ก / lg ขึ้นไป)
   ========================================================================= */
.az-landing .intro{
  background:#111;
  /* สเกลหลักของ section — คุมขนาดทุกชิ้นในนี้พร้อมกัน */
  --fs: clamp(10px, min(.8333vw, 1.4815vh), 16px);   /* 16px = อาร์ตบอร์ดเต็มขนาดที่ 1920x1080 */
  font-size:var(--fs);
}
.az-landing .intro .bg{position:absolute;inset:0;background:#111 no-repeat}
.az-landing .intro .bg .bg_video{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover}
.az-landing .intro .bg .overlay{
  position:absolute;inset:0;z-index:2;
  background:url(../assets/e26/bg_movieCover.png) 50%/cover no-repeat;
}

/* กล่องเนื้อหา — ชิดซ้ายล่าง ระยะขอบเป็น em จึงย่อตามจอเอง */
.az-landing .intro__content{
  position:absolute;left:0;right:0;z-index:3;
  /* 4.875em (78px) → ปุ่มลงทะเบียนอยู่ที่ y≈904 และแถบซับไตเติลของชื่อเกมอยู่ที่ y≈814 บนอาร์ตบอร์ด 1080 ตามดีไซน์ */
  bottom:4.875em;
  padding-inline:4.375em;
  pointer-events:none;                 /* ให้คลิกทะลุไปพื้นหลังได้ ยกเว้นปุ่ม */
}
.az-landing .intro__content button{pointer-events:auto}

/* ---- ชื่อเกม ----
   รูปเดียวจบต่อหนึ่งภาษา (ข้อความรอง + แถบซับไตเติลอยู่ในรูปแล้ว)
   ไฟล์ assets/i18n/<lang>/e26/main_title.png ทุกภาษาใช้ "จุดยึด" เดียวกัน (ที่สเกล 1:1 ของอาร์ตบอร์ด 1920):
     - รูปสูง 226px เท่ากันหมด ต่างแค่ความกว้างตามความยาวข้อความ
     - ขอบซ้ายของแถบซับไตเติลอยู่ที่ x = 63px, กึ่งกลางแถบอยู่ที่ y = 200px
   คุมขนาดด้วย "ความสูง" เป็น em (226px = 14.125em) → ย่อ/ขยายตาม --fs พร้อมส่วนอื่นของ section
   -------------------------------------------------------------------------- */
.az-landing .intro .title{
  position:relative;
  display:block;
  width:max-content;
  margin:0;
  font-size:inherit;
  line-height:0;
  animation:fadeUpBig 1s .4s both;
}
.az-landing .intro .title img{display:block;width:auto;max-width:none;height:14.125em}

/* ปุ่มเล่นวิดีโอ — ตำแหน่งต่างกันตามภาษา (อิงตามภาพดีไซน์ของแต่ละภาษา)
   อิงขนาดจาก "ความสูงรูป" แล้วเลื่อนด้วย transform % ของตัวปุ่มเอง — ตรงทุกจอ
     รูปสูง 226px, ปุ่มโต 90px → height = 90/226 = 39.82%
     --vx = (กึ่งกลางปุ่ม x - 45) / 90     --vy = (กึ่งกลางปุ่ม y - 45) / 90    (45 = 90/2)
   กึ่งกลางปุ่ม (px ในรูป): en 604,50 | th 605,124 | zh 566,142 | id 604,48 | vn 589,137 */
.az-landing .intro .btn_video{
  --vx:621%;--vy:6%;
  position:absolute;top:0;left:0;height:39.82%;aspect-ratio:1;
  transform:translate(var(--vx),var(--vy));
  animation:fadeIn 1s .8s both;      /* เฟดด้วย opacity เท่านั้น — keyframe ที่ขยับ transform จะทับตำแหน่งข้างบน */
}
html[data-lang="th"] .az-landing .intro .btn_video{--vx:622%;--vy:88%}
html[data-lang="zh"] .az-landing .intro .btn_video{--vx:579%;--vy:108%}
html[data-lang="id"] .az-landing .intro .btn_video{--vx:621%;--vy:3%}
/* ป้าย "Reservasi" สั้นกว่า PRE-REGISTER แต่ถูกจัดกึ่งกลางในกล่องกว้างเท่ากัน
   เลยเหลื่อมขวาจากแถบสโลแกน — ชิดซ้ายให้ขอบซ้ายตรงกับป้ายภาษาอังกฤษ */
html[data-lang="id"] .az-landing .intro .btn_go_preregistration_wrap .btn_go_preregistraion{
  background-position:8px 50%;
}
html[data-lang="vn"] .az-landing .intro .btn_video{--vx:604%;--vy:102%}
/* พื้นที่กดขั้นต่ำ 44px — บนจอเล็กวงในรูปย่อจนเล็กกว่านิ้ว */
.az-landing .intro .btn_video::before{
  content:"";position:absolute;top:50%;left:50%;
  width:44px;height:44px;transform:translate(-50%,-50%);
}
.az-landing .intro .btn_video::after{
  content:"";display:block;width:100%;height:100%;transition:transform .5s;
  background:url(../assets/e26/btn_video.png) 50% 0/contain no-repeat;
}
.az-landing .intro .btn_video:hover::after{transform:scale(1.1)}

/* ---- ปุ่มลงทะเบียน + ปุ่มสโตร์ ---- */
.az-landing .intro .btns_wrap{position:relative;margin-top:-2.25em}
.az-landing .intro .btn_go_preregistration_wrap{
  /* left ติดลบ = ชดเชยขอบโปร่งด้านซ้ายของวิดีโอปุ่ม ให้แสงเรืองตรงกับขอบซ้ายของชื่อเกม */
  position:relative;left:-1.625em;width:26.75em;height:12.375em;
  animation:fadeUpSm 1s 1.1s both;
}
.az-landing .intro .btn_go_preregistration_wrap video{width:100%;height:100%;object-fit:contain}
.az-landing .intro .btn_go_preregistration_wrap .fx{display:none}
.az-landing .intro .btn_go_preregistration_wrap .btn_go_preregistraion{
  /* ป้ายคำ: รูปสูง 112px (2x) แสดงที่ 3.5em (56px) = ขนาดจริงตามดีไซน์ กึ่งกลางที่ (264px, 100.5px) ในกล่องวิดีโอปุ่ม */
  position:absolute;top:4.53125em;left:8.375em;z-index:1;width:16.25em;height:3.5em;
  background:var(--img-main-btn-reg, url(../assets/i18n/en/e26/main_btn_registration.png)) 50% 50%/auto 100% no-repeat;
}
.az-landing .intro .btns_store{animation:fadeUpSm 1s 1.3s both}
.az-landing .intro .btns_store ul{gap:1.5625em;margin:0}
.az-landing .intro .btns_store ul li{background-position:50% 0;background-repeat:no-repeat;background-size:contain}
.az-landing .intro .btns_store ul li button{width:100%;height:100%;display:block}
.az-landing .intro .btns_store ul li.aos{background-image:var(--img-btn-aos, url(../assets/i18n/en/common/btn_aos.png));width:11.375em;height:3.375em}
.az-landing .intro .btns_store ul li.ios{background-image:var(--img-btn-ios, url(../assets/i18n/en/common/btn_ios.png));width:10.8125em;height:3.375em}
.az-landing .intro .btns_store ul li.galaxy{background-image:var(--img-btn-galaxy, url(../assets/i18n/en/common/btn_galaxy.png));width:12.625em;height:3.4375em}

/* ---- เส้นคั่น + ข้อความประกอบด้านล่าง + ปุ่มโซเชียลชิดขวา (ตาม draft) ---- */
/* เส้นคั่นอยู่ที่ y=979, x 80→1700 บนอาร์ตบอร์ด 1920x1080 / ลายน้ำชื่อเกมเริ่มที่ x=103, y=997 */
.az-landing .intro .deco{position:absolute;bottom:2.4375em;left:4.1667%;z-index:3;width:84.375%;border-top:1px solid rgba(255,255,255,.2);pointer-events:none}
.az-landing .intro .deco .txt{margin:1.0625em 0 0 1.4375em;width:29.5625em;height:3.1875em;background:var(--img-main-deco-txt, url(../assets/i18n/en/e26/main_deco_txt.png)) 50% 0/contain no-repeat}
.az-landing .intro_sns{
  /* กึ่งกลางแนวตั้งเท่าตัว AZUR PROMILIA (.txt) ไม่ได้อยู่บนเส้น
     ชิดขวาเท่าระยะขอบหน้า (4.1667% = ระยะเดียวกับขอบซ้ายของเส้น deco) ตามเว็บอ้างอิง */
  position:fixed;right:4.1667vw;bottom:5%;top:auto;transform:none;
  gap:1.5em;margin:0;padding:0;width:max-content;max-width:none;list-style:none;
  pointer-events:auto;z-index:80;
  opacity:1;visibility:visible;
  transition:opacity .25s,visibility .25s;
}
.az-landing .intro_sns.is-footer-visible{
  opacity:0;visibility:hidden;pointer-events:none;
}
.az-landing .intro_sns > li{margin:0;padding:0;list-style:none;width:auto;float:none}
.az-landing .intro_sns > li[hidden]{display:none !important}
/* ไอคอนโซเชียลทั้งเว็บ = Font Awesome Free 6.7.2 (Brands + Solid "link") — https://fontawesome.com/license/free (CC BY 4.0)
   ฝัง path ของ SVG เป็น data URI แล้วใช้เป็น mask → ไม่ต้องโหลดไฟล์ฟอนต์/รูปเพิ่ม และเปลี่ยนสีได้ด้วย background-color
   Zalo ไม่มีใน Font Awesome — ใช้ไอคอนที่ทีมส่งมา (welcome-mail/icon-src/zalo.svg ตัดกรอบเหลือแค่ตัวไอคอน) แบบ mask เหมือนตัวอื่น */
.az-landing{
  --fa-facebook:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M80 299.3V512H196V299.3h86.5l18-97.8H196V166.9c0-51.7 20.3-71.5 72.7-71.5c16.3 0 29.4 .4 37 1.2V7.9C291.4 4 256.4 0 236.2 0C129.3 0 80 50.5 80 159.4v42.1H14v97.8H80z'/%3E%3C/svg%3E");
  --fa-youtube:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z'/%3E%3C/svg%3E");
  --fa-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z'/%3E%3C/svg%3E");
  --fa-instagram:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z'/%3E%3C/svg%3E");
  --fa-tiktok:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M448,209.91a210.06,210.06,0,0,1-122.77-39.25V349.38A162.55,162.55,0,1,1,185,188.31V278.2a74.62,74.62,0,1,0,52.23,71.18V0l88,0a121.18,121.18,0,0,0,1.86,22.17h0A122.18,122.18,0,0,0,381,102.39a121.43,121.43,0,0,0,67,20.14Z'/%3E%3C/svg%3E");
  --fa-line:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M311 196.8v81.3c0 2.1-1.6 3.7-3.7 3.7h-13c-1.3 0-2.4-.7-3-1.5l-37.3-50.3v48.2c0 2.1-1.6 3.7-3.7 3.7h-13c-2.1 0-3.7-1.6-3.7-3.7V196.9c0-2.1 1.6-3.7 3.7-3.7h12.9c1.1 0 2.4 .6 3 1.6l37.3 50.3V196.9c0-2.1 1.6-3.7 3.7-3.7h13c2.1-.1 3.8 1.6 3.8 3.5zm-93.7-3.7h-13c-2.1 0-3.7 1.6-3.7 3.7v81.3c0 2.1 1.6 3.7 3.7 3.7h13c2.1 0 3.7-1.6 3.7-3.7V196.8c0-1.9-1.6-3.7-3.7-3.7zm-31.4 68.1H150.3V196.8c0-2.1-1.6-3.7-3.7-3.7h-13c-2.1 0-3.7 1.6-3.7 3.7v81.3c0 1 .3 1.8 1 2.5c.7 .6 1.5 1 2.5 1h52.2c2.1 0 3.7-1.6 3.7-3.7v-13c0-1.9-1.6-3.7-3.5-3.7zm193.7-68.1H327.3c-1.9 0-3.7 1.6-3.7 3.7v81.3c0 1.9 1.6 3.7 3.7 3.7h52.2c2.1 0 3.7-1.6 3.7-3.7V265c0-2.1-1.6-3.7-3.7-3.7H344V247.7h35.5c2.1 0 3.7-1.6 3.7-3.7V230.9c0-2.1-1.6-3.7-3.7-3.7H344V213.5h35.5c2.1 0 3.7-1.6 3.7-3.7v-13c-.1-1.9-1.7-3.7-3.7-3.7zM512 93.4V419.4c-.1 51.2-42.1 92.7-93.4 92.6H92.6C41.4 511.9-.1 469.8 0 418.6V92.6C.1 41.4 42.2-.1 93.4 0H419.4c51.2 .1 92.7 42.1 92.6 93.4zM441.6 233.5c0-83.4-83.7-151.3-186.4-151.3s-186.4 67.9-186.4 151.3c0 74.7 66.3 137.4 155.9 149.3c21.8 4.7 19.3 12.7 14.4 42.1c-.8 4.7-3.8 18.4 16.1 10.1s107.3-63.2 146.5-108.2c27-29.7 39.9-59.8 39.9-93.1z'/%3E%3C/svg%3E");
  --fa-whatsapp:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/%3E%3C/svg%3E");
  --fa-zalo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='64 64 512 512'%3E%3Cpath d='M576 157.4V483.4C575.9 534.6 533.9 576.1 482.6 576H156.6C105.4 575.9 63.9 533.8 64 482.6V156.6C64.1 105.4 106.2 63.8999 157.4 63.9999H483.4C534.6 64.0999 576.1 106.1 576 157.4ZM505.6 297.5C505.6 214.1 421.9 146.2 319.2 146.2C216.5 146.2 132.8 214.1 132.8 297.5C132.8 372.2 199.1 434.9 288.7 446.8C310.5 451.5 308 459.5 303.1 488.9C302.3 493.6 299.3 507.3 319.2 499C339.1 490.7 426.5 435.8 465.7 390.8C492.7 361.1 505.6 331 505.6 297.7V297.5Z'/%3E%3Cpath d='M190.091 346V334.318L236.545 269.136H190V252.909H261.273V264.591L214.773 329.773H261.364V346H190.091ZM296.011 347.318C291.557 347.318 287.587 346.545 284.102 345C280.617 343.424 277.86 341.106 275.83 338.045C273.83 334.955 272.83 331.106 272.83 326.5C272.83 322.621 273.542 319.364 274.966 316.727C276.39 314.091 278.33 311.97 280.784 310.364C283.239 308.758 286.027 307.545 289.148 306.727C292.299 305.909 295.602 305.333 299.057 305C303.117 304.576 306.39 304.182 308.875 303.818C311.36 303.424 313.163 302.848 314.284 302.091C315.405 301.333 315.966 300.212 315.966 298.727V298.455C315.966 295.576 315.057 293.348 313.239 291.773C311.451 290.197 308.905 289.409 305.602 289.409C302.117 289.409 299.345 290.182 297.284 291.727C295.223 293.242 293.86 295.152 293.193 297.455L275.284 296C276.193 291.758 277.981 288.091 280.648 285C283.314 281.879 286.754 279.485 290.966 277.818C295.208 276.121 300.117 275.273 305.693 275.273C309.572 275.273 313.284 275.727 316.83 276.636C320.405 277.545 323.572 278.955 326.33 280.864C329.117 282.773 331.314 285.227 332.92 288.227C334.527 291.197 335.33 294.758 335.33 298.909V346H316.966V336.318H316.42C315.299 338.5 313.799 340.424 311.92 342.091C310.042 343.727 307.784 345.015 305.148 345.955C302.511 346.864 299.466 347.318 296.011 347.318ZM301.557 333.955C304.405 333.955 306.92 333.394 309.102 332.273C311.284 331.121 312.996 329.576 314.239 327.636C315.481 325.697 316.102 323.5 316.102 321.045V313.636C315.496 314.03 314.663 314.394 313.602 314.727C312.572 315.03 311.405 315.318 310.102 315.591C308.799 315.833 307.496 316.061 306.193 316.273C304.89 316.455 303.708 316.621 302.648 316.773C300.375 317.106 298.39 317.636 296.693 318.364C294.996 319.091 293.678 320.076 292.739 321.318C291.799 322.53 291.33 324.045 291.33 325.864C291.33 328.5 292.284 330.515 294.193 331.909C296.133 333.273 298.587 333.955 301.557 333.955ZM369.716 252.909V346H350.352V252.909H369.716ZM416.773 347.364C409.712 347.364 403.606 345.864 398.455 342.864C393.333 339.833 389.379 335.621 386.591 330.227C383.803 324.803 382.409 318.515 382.409 311.364C382.409 304.152 383.803 297.848 386.591 292.455C389.379 287.03 393.333 282.818 398.455 279.818C403.606 276.788 409.712 275.273 416.773 275.273C423.833 275.273 429.924 276.788 435.045 279.818C440.197 282.818 444.167 287.03 446.955 292.455C449.742 297.848 451.136 304.152 451.136 311.364C451.136 318.515 449.742 324.803 446.955 330.227C444.167 335.621 440.197 339.833 435.045 342.864C429.924 345.864 423.833 347.364 416.773 347.364ZM416.864 332.364C420.076 332.364 422.758 331.455 424.909 329.636C427.061 327.788 428.682 325.273 429.773 322.091C430.894 318.909 431.455 315.288 431.455 311.227C431.455 307.167 430.894 303.545 429.773 300.364C428.682 297.182 427.061 294.667 424.909 292.818C422.758 290.97 420.076 290.045 416.864 290.045C413.621 290.045 410.894 290.97 408.682 292.818C406.5 294.667 404.848 297.182 403.727 300.364C402.636 303.545 402.091 307.167 402.091 311.227C402.091 315.288 402.636 318.909 403.727 322.091C404.848 325.273 406.5 327.788 408.682 329.636C410.894 331.455 413.621 332.364 416.864 332.364Z'/%3E%3C/svg%3E");
  --fa-discord:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z'/%3E%3C/svg%3E");
  --fa-copy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z'/%3E%3C/svg%3E");
}
.az-landing .intro_sns .sns,
.az-landing .header_social,
.az-landing .social_buttons [data-channel]::before{
  background-color:#fff;
  -webkit-mask:var(--fa-icon) 50% 50%/contain no-repeat;
  mask:var(--fa-icon) 50% 50%/contain no-repeat;
}
.az-landing .sns--facebook,.az-landing .header_social--facebook,.az-landing .social_buttons [data-channel="facebook"]{--fa-icon:var(--fa-facebook)}
.az-landing .sns--youtube,.az-landing .header_social--youtube,.az-landing .social_buttons [data-channel="youtube"]{--fa-icon:var(--fa-youtube)}
.az-landing .sns--x,.az-landing .header_social--x,.az-landing .social_buttons [data-channel="x"]{--fa-icon:var(--fa-x)}
.az-landing .sns--instagram,.az-landing .header_social--instagram,.az-landing .social_buttons [data-channel="instagram"]{--fa-icon:var(--fa-instagram)}
.az-landing .sns--tiktok,.az-landing .header_social--tiktok,.az-landing .social_buttons [data-channel="tiktok"]{--fa-icon:var(--fa-tiktok)}
.az-landing .sns--line,.az-landing .header_social--line,.az-landing .social_buttons [data-channel="line"]{--fa-icon:var(--fa-line)}
.az-landing .sns--whatsapp,.az-landing .header_social--whatsapp,.az-landing .social_buttons [data-channel="whatsapp"]{--fa-icon:var(--fa-whatsapp)}
.az-landing .sns--discord,.az-landing .header_social--discord,.az-landing .social_buttons [data-channel="discord"]{--fa-icon:var(--fa-discord)}
.az-landing .sns--zalo,.az-landing .header_social--zalo{--fa-icon:var(--fa-zalo)}
.az-landing .header_social--copy{--fa-icon:var(--fa-copy)}
.az-landing .intro_sns .sns{
  display:block;width:1.5em;height:1.5em;
  opacity:.9;transition:opacity .25s,transform .25s;
}
.az-landing .intro_sns .sns:hover{opacity:1;transform:scale(1.12)}
@media (max-width:991.98px){
  .az-landing .intro_sns{display:none !important}
}

.az-landing .intro .icon-scroll{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:30;width:25px;height:25px}
.az-landing .intro .icon-scroll .icon{
  position:absolute;inset:0;display:block;
  background:url(../assets/e25/m/main_scroll.svg) no-repeat;
  animation:scrollHint 2.5s linear infinite;
}
@keyframes scrollHint{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}
@keyframes fadeUpBig{from{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeUpSm{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeDownSm{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}

/* =========================================================================
   2. REGISTRATION
   ========================================================================= */
.az-landing .registration{
  background:url(../assets/e25/reg_bg.jpg) 50% 0/cover no-repeat;
  font-size:16px;
}
.az-landing .registration *{font-family:var(--body)!important}
.az-landing .registration .pattern{
  position:absolute;top:0;left:0;z-index:3;width:50vw;height:100%;
  background:url(../assets/e25/reg_bg_pattern.png) 50% 0/cover no-repeat;
  pointer-events:none;
}
.az-landing .registration .event{
  position:absolute;top:0;left:0;width:65%;height:100%;
  background:linear-gradient(90deg,var(--paper) 65.62%,rgba(234,235,224,.7) 78.59%,rgba(234,235,224,0) 97.64%);
}
.az-landing .registration .register_container{
  position:absolute;z-index:4;top:50%;left:20%;
  width:580px;padding:0;
  display:flex;flex-direction:column;align-items:center;gap:20px;
  transform:translateY(-50%) scale(var(--k));
  transform-origin:left center;
}
.az-landing .registration .form_title{
  width:568px;height:300px;flex:0 0 auto;
  background:var(--img-reg-title, url(../assets/i18n/en/e25/reg_title.png)) 0 0/contain no-repeat;
  animation:fadeUpBig 1s .2s both;
}

/* decorative divider */
.az-landing .content_line{width:100%;gap:4px;animation:fadeUpSm .5s .3s both}
.az-landing .content_line .left_line,.az-landing .content_line .right_line{flex:1;min-width:0;height:1px;background:var(--ink-soft);opacity:.4}
.az-landing .content_line .left_star,.az-landing .content_line .right_star{
  flex:0 0 auto;width:10px;height:10px;opacity:.4;
  background:currentColor;color:var(--ink-soft);
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
}
.az-landing .content_line .dot{flex:0 0 auto;display:flex;gap:4px;opacity:.4}
.az-landing .content_line .dot i{width:2px;height:2px;border-radius:50%;background:var(--ink-soft)}
.az-landing .content_line .graphic{
  flex:0 0 auto;width:19px;height:22px;opacity:.4;
  background:radial-gradient(circle at 65% 50%,var(--ink-soft) 0 2px,transparent 2px),
             linear-gradient(transparent,transparent);
  position:relative;
}
.az-landing .content_line .graphic::before{
  content:"";position:absolute;inset:0 0 0 auto;width:13px;height:13px;top:50%;transform:translateY(-50%);
  background:var(--ink-soft);
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
}
.az-landing .content_line .graphic::after{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:22px;height:22px;border:1px solid var(--ink-soft);border-radius:50%;border-right-color:transparent;
}

.az-landing .registration .form{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:24px;animation:fadeDownBig 1s .4s both}
@keyframes fadeDownBig{from{opacity:0;transform:translateY(-50px)}to{opacity:1;transform:translateY(0)}}

.az-landing .registration .form_store{gap:28px}
.az-landing .registration .form_store input{display:none}
.az-landing .registration .form_store label{display:flex;align-items:center;gap:8px;color:var(--ink-soft);font-size:18px;cursor:pointer;margin:0}
.az-landing .registration .form_store label p{margin:0}
.az-landing .registration .form_store label .radio{
  display:flex;align-items:center;justify-content:center;
  width:24px;height:24px;border:2px solid var(--ink-soft);border-radius:100px;
}
.az-landing .registration .form_store label .radio::after{content:"";display:none;width:14px;height:14px;border-radius:100px;background:var(--ink)}
.az-landing .registration .form_store input:checked+label{color:var(--ink)}
.az-landing .registration .form_store input:checked+label .radio{border-color:var(--ink)}
.az-landing .registration .form_store input:checked+label .radio::after{display:block}

.az-landing .registration .form_phone{width:100%;display:flex;flex-direction:column;gap:10px}
.az-landing .registration .input_box{
  position:relative;width:100%;height:56px;
  background:#fff;border:1px solid #cacaca;border-radius:15px 5px;
}
.az-landing .registration .input_box::before{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:99.31%;height:calc(100% - 8px);border:1px solid #f1f2ee;border-radius:13px 3px;
}
.az-landing .registration .input_box.input_phone{padding-left:32px;padding-right:5px}
.az-landing .registration .input_box .input_wrap{position:relative;width:400px;height:100%;overflow:hidden}
.az-landing .registration .input_box .num{
  display:flex;align-items:center;height:28px;margin-right:10px;
  color:var(--ink);font-size:24px;font-weight:700;line-height:29px;
}
.az-landing .registration .input_box .input{position:relative;display:flex;align-items:center;width:100%;height:28px}
.az-landing .registration .input_box .input input{
  position:relative;z-index:4;width:100%;height:28px;
  border:0;outline:none;background:none;color:var(--ink);font-size:24px;font-weight:700;
}
.az-landing .registration .input_box .input .placeholder{
  position:absolute;top:50%;transform:translateY(-50%);
  color:var(--ink-soft);font-size:18px;pointer-events:none;transition:opacity .15s;
}
.az-landing .registration .input_box .input input:focus+.placeholder,
.az-landing .registration .input_box .input input:not(:placeholder-shown)+.placeholder,
.az-landing .registration .input_box .input.is-filled .placeholder{opacity:0}

.az-landing .registration .form_terms{width:100%;display:flex;flex-direction:column;gap:10px}
.az-landing .registration .form_terms input{display:none}
.az-landing .registration .form_terms label{display:flex;align-items:center;justify-content:space-between;margin:0;cursor:pointer}
.az-landing .registration .form_terms .term_all{margin-bottom:2px;font-size:18px;font-weight:700}
.az-landing .registration .form_terms .checkbox_wrap{display:flex;align-items:center;gap:10px;width:100%;color:var(--ink)}
.az-landing .registration .form_terms .checkbox_wrap p{margin:0}
.az-landing .registration .form_terms .checkbox_wrap .box{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:2px;background:#fff;
}
.az-landing .registration .form_terms .checkbox_wrap .box::after{
  content:"";width:13px;height:10px;opacity:0;transition:opacity .12s;background:var(--ink);
  clip-path:polygon(0 45%,20% 24%,53% 58%,89% 0,100% 21%,53% 100%);
}
.az-landing .registration .form_terms .checkbox_wrap.all .box{background:var(--gold)}
.az-landing .registration .form_terms input:checked+label .checkbox_wrap .box::after{opacity:1}
.az-landing .registration .form_terms .btn_noti{
  display:flex;align-items:center;justify-content:center;gap:3px;flex:0 0 auto;
  width:108px;height:30px;border-radius:3px;background:var(--gold);
  color:var(--ink);font-size:14px;font-weight:700;letter-spacing:-.2px;
}
.az-landing .registration .form_terms .btn_noti::after{
  content:"";width:12px;height:12px;
  background:url(../assets/e25/reg_btn_noti_ico.svg) no-repeat;background-size:contain;
}
.az-landing .registration .form_terms .btn_detail{
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:82px;height:24px;border:1px solid var(--ink-soft);border-radius:3px;
  background:rgba(234,235,224,.2);color:#6c685e;font-size:12px;letter-spacing:-.3px;
}

.az-landing .registration .btn_register{
  position:relative;width:580px;height:72px;border-radius:77px;
  display:flex;align-items:center;justify-content:center;
}
.az-landing .registration .btn_register::before{
  content:"";position:absolute;top:18px;right:-49px;width:98px;height:97px;
  background:url(../assets/e25/reg_stamp.png) 0 0 no-repeat;
}
.az-landing .registration .btn_register .bg{
  position:absolute;inset:0;border-radius:77px;overflow:hidden;transition:background-image .4s;
  background:url(../assets/e25/reg_btn_register.png) 50% 0 no-repeat;
}
.az-landing .registration .btn_register:hover .bg{background-image:url(../assets/e25/reg_btn_register_on.png)}
.az-landing .registration .btn_register .txt{
  position:absolute;
  width:198px;
  height:53px;
  text-indent:-9999px;
  overflow:hidden;
  background:var(--img-reg-btn-txt, url(../assets/i18n/en/e25/reg_btn_register_txt.png)) 0 0 no-repeat;
  background-size: contain;
  background-position: center;
}
.az-landing .registration .btn_register .txt_bg{
  position:absolute;display:flex;align-items:center;
  font-family:Cinzel,serif!important;font-size:14px;font-weight:700;line-height:150%;letter-spacing:1.3em;
  background:linear-gradient(90deg,rgba(128,217,255,.7),rgba(128,217,255,0) 50%,rgba(128,217,255,.7));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  transition:letter-spacing 1s;
}
.az-landing .registration .btn_register:hover .txt_bg{letter-spacing:1.5em}
.az-landing .registration .form_msg{
  min-height:22px;margin:0;color:#8a6d3b;font-size:14px;font-weight:600;
}
.az-landing .registration .form_msg.is-ok{color:#4b7a4b}
.az-landing .registration .form_msg.is-err{color:#a3453b}

/* =========================================================================
   3+4. CHARACTERS / KIBO  (shared)
   ========================================================================= */
.az-landing .characters,.az-landing .kibo{background:url(../assets/e26/m/kibo/bg.jpg) 50%/cover no-repeat}
.az-landing .characters .bg,.az-landing .kibo .bg{position:absolute;inset:0}
.az-landing .characters .bg .bg_item,.az-landing .kibo .bg .bg_item{
  position:absolute;inset:0;z-index:1;opacity:0;
  background-position:top center;background-repeat:no-repeat;background-size:cover;
}
/* opacity ตั้งตรง ๆ — แอนิเมชันเข้าสไลด์ถูกปิดบนเดสก์ท็อปจนกว่าจะมี .is-in
   ถ้าไม่ตั้งค่านี้ พื้นหลังจะค้างโปร่งใสแม้สไลด์ถูกเลือกแล้ว */
.az-landing .characters .bg .bg_item.is-active,.az-landing .kibo .bg .bg_item.is-active{opacity:1;animation:bgIn .7s .1s both}
@keyframes bgIn{from{opacity:0}to{opacity:1}}
.az-landing .characters .bg .cover,.az-landing .kibo .bg .cover{position:absolute;inset:0;z-index:2;opacity:0;background:#eef0f2;transition:opacity .7s linear}

.az-landing .characters .bg .bg_item[data-key=anais]{background-image:url(../assets/e27/char/char_bg_anais.jpg)}
.az-landing .characters .bg .bg_item[data-key=cathbelle]{background-image:url(../assets/e27/char/char_bg_cathbelle.jpg)}
.az-landing .characters .bg .bg_item[data-key=symphoria]{background-image:url(../assets/e27/char/char_bg_symphoria.jpg)}
.az-landing .characters .bg .bg_item[data-key=terara]{background-image:url(../assets/e27/char/char_bg_terara.jpg)}
.az-landing .characters .bg .bg_item[data-key=metsa]{background-image:url(../assets/e26/char/char_bg_metsa.jpg)}
.az-landing .kibo .bg .bg_item[data-key=staray]{background-image:url(../assets/e27/kibo/bg_staray.jpg)}
.az-landing .kibo .bg .bg_item[data-key=downy]{background-image:url(../assets/e27/kibo/bg_downy.jpg)}
.az-landing .kibo .bg .bg_item[data-key=cabbird]{background-image:url(../assets/e27/kibo/bg_cabbird.jpg)}
.az-landing .kibo .bg .bg_item[data-key=bluda]{background-image:url(../assets/e27/kibo/bg_bluda.jpg)}
.az-landing .kibo .bg .bg_item[data-key=vespervamp]{background-image:url(../assets/e27/kibo/bg_vespervamp.jpg)}

/* PC: รูปพื้นหลังชุดเว็บอ้างอิง (ไม่มีตัวหนังสือ) มีพื้นขาวไล่จางด้านซ้ายมาในรูปแล้ว จึงไม่ซ้อนลาย pattern เดิม
   และจัดรูปกึ่งกลางแบบ object-fit:cover เหมือนเว็บอ้างอิง
   ต้องใช้ !important — markup ของ .pattern มีคลาส d-lg-block ของ Bootstrap (display:block !important)
   ถ้าไม่บังคับ ลายกระดาษสีครีม (tales_bg.png) จะทับซีกซ้ายของฉากตัวละคร ทำให้ภาพอมเหลืองกว่าเว็บอ้างอิง */
@media (min-width:992px){
  .az-landing .characters .bg .bg_item,.az-landing .kibo .bg .bg_item{background-position:50% 50%}
  .az-landing .characters .pattern{display:none!important}
}

/* the PC art board */
/* อาร์ตบอร์ดยึดมุมซ้ายล่างของจอเหมือนเว็บอ้างอิง (เดิมจัดกึ่งกลาง — จอที่ไม่ใช่ 16:9 เนื้อหาจะลอยห่างขอบซ้าย)
   --bw = ความกว้างจอในหน่วยของอาร์ตบอร์ด ใช้วางรูปที่ต้องอิงความกว้างจอจริง (รูป kibo) */
.az-landing .characters .contents,.az-landing .kibo .contents{
  position:absolute;top:auto;bottom:0;left:0;z-index:2;
  width:1920px;height:1080px;
  --bw:calc(100vw / var(--k));
  transform:scale(var(--k));
  transform-origin:left bottom;
  pointer-events:none;
}
.az-landing .characters .contents button,.az-landing .kibo .contents button,
.az-landing .characters .contents .tales_pg_bullet,.az-landing .kibo .contents .tales_pg_bullet,
.az-landing .characters .contents li,.az-landing .kibo .contents li{pointer-events:auto}

.az-landing .characters .tales_container,.az-landing .kibo .tales_container{position:absolute;inset:0;width:1920px;height:100%}
.az-landing .characters .pattern{
  position:absolute;top:0;left:0;width:1171px;height:100%;
  background:url(../assets/e25/tales_bg.png) 50% 0/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,#fff,transparent);
  mask-image:linear-gradient(90deg,#fff,transparent);
}
.az-landing .characters .tales_container::after{
  content:"";position:absolute;bottom:40px;left:48px;width:570px;height:74px;
  background:url(../assets/e26/char/ico_bgTxt.png) 50% no-repeat;
}
.az-landing .kibo .tales_container::after{
  content:"";position:absolute;bottom:41px;left:33px;width:250px;height:73px;
  background:url(../assets/e26/kibo/txt_bottom_deco.png) 50% 0 no-repeat;
}

/* --- characters slides --- */
/* ตำแหน่ง/ขนาดตามเว็บอ้างอิงที่ 1920x1080 — ทั้งก้อนยึดจาก "ขอบล่าง" เหมือนเว็บอ้างอิง:
   คำบรรยายจบที่ y 722 เสมอ (เหนือแถวรูปย่อ y 756–911) คำบรรยายยาวขึ้นเท่าไร ชื่อ/ปุ่มเสียงก็ขยับขึ้นเท่านั้น ไม่ล้นลงไปทับรูปย่อ
   เมื่อคำบรรยายสูง 65: ปุ่มเสียง y 567–605 · หัวข้อเสียงพากย์ y 551 · ฐานตัวอักษรชื่อ y 520 · ซ้าย 139 */
.az-landing .characters .slide_container{
  position:absolute;top:auto;bottom:358px;left:139px;z-index:4;
  width:596px;height:0;
}
.az-landing .characters .tales_slide{
  position:absolute;top:auto;bottom:0;left:0;width:100%;
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;pointer-events:none;
}
.az-landing .characters .tales_slide.is-active{opacity:1;visibility:visible;pointer-events:auto}
.az-landing .characters .title{position:relative;z-index:1;margin-bottom:52px;font-family:var(--serif)!important;font-weight:800}
.az-landing .characters .title::after{
  content:"";position:absolute;bottom:32px;left:1px;width:305px;height:23px;display:block;
  background:var(--img-ico-sound-txt, url(../assets/i18n/en/e26/char/ico_sound_txt.png)) 50% no-repeat;
}
/* ตราดินแดนหลังชื่อ — เว็บอ้างอิงแสดงที่ 129x179 (82% ของไฟล์) ขอบล่างเสมอกล่องชื่อ */
.az-landing .characters .title .world_bg{position:absolute;top:40px;left:71px;z-index:0;width:129px;height:180px}
.az-landing .characters .title.world_1 .world_bg{background:url(../assets/e26/char/bg_world_1.png) 50%/contain no-repeat}
.az-landing .characters .title.world_2 .world_bg{background:url(../assets/e26/char/bg_world_2.png) 50%/contain no-repeat}
.az-landing .characters .title.world_3 .world_bg{background:url(../assets/e26/char/bg_world_3.png) 50%/contain no-repeat;left:85px}
.az-landing .characters .title .name{
  position:relative;display:flex;align-items:flex-end;gap:14px;
  height:220px;padding-bottom:5px;margin-bottom:24px;color:#3d454f;font-size:68px;line-height:1;
}
/* ชื่อ + ป้าย world เรียงต่อกันเสมอ: ชื่อห้ามหด (flex:0 0 auto) ป้ายจึงถูกดันไปต่อท้าย ไม่ทับตัวหนังสือ
   ไม่ตั้ง min-width ให้ชื่อ — ป้ายจะชิดต่อจากชื่อเท่ากันทุกตัวละคร ไม่ว่าชื่อสั้นหรือยาว */
/* ระยะห่างตัวอักษรของชื่อ: เว็บอ้างอิงใช้ระยะปกติของฟอนต์ (วัดจากรูปชื่อ EN ได้ ≈ +0.02em) ไม่บีบตัวอักษร */
.az-landing .characters .title .name h2{margin:0;font-size:inherit;line-height:1;font-weight:800;letter-spacing:.02em;flex:0 0 auto;min-width:263px;white-space:nowrap}
/* ชื่อละตินลายมือเหนือชื่อ (ภาพอ้างอิง zh / ตัดจาก azurpromilia.manjuu.com) — รูป char-sign-* มีเฉพาะภาษาที่ประกาศคีย์ไว้ (ตอนนี้ zh)
   ภาษาอื่นไม่มีตัวแปร --img-char-sign-* จึงไม่มีพื้นหลัง · absolute เลยไม่ดันเลย์เอาต์
   รูป 2x สูง 102 (baseline แถว 76) แสดงสูง .75em ของชื่อ ชิดซ้ายล่าง ขอบล่างแตะขอบบนของ h2
   (ภาพอ้างอิง: baseline ห่างหัวตัวจีน ~18 · ตัวแรกเยื้องขวาจากตัวจีน ~8) */
.az-landing .characters .title .name::before{
  content:"";position:absolute;left:.11em;bottom:calc(5px + 1em);z-index:1;
  width:3em;height:.75em;pointer-events:none;
  background:0 100%/auto 100% no-repeat;
}
.az-landing .characters .tales_slide[data-key=anais] .title .name::before{background-image:var(--img-char-sign-anais)}
.az-landing .characters .tales_slide[data-key=cathbelle] .title .name::before{background-image:var(--img-char-sign-cathbelle)}
.az-landing .characters .tales_slide[data-key=symphoria] .title .name::before{background-image:var(--img-char-sign-symphoria)}
.az-landing .characters .tales_slide[data-key=terara] .title .name::before{background-image:var(--img-char-sign-terara)}
.az-landing .characters .tales_slide[data-key=metsa] .title .name::before{background-image:var(--img-char-sign-metsa)}
.az-landing .characters .title .world{
  position:relative;display:flex;align-items:center;justify-content:center;gap:10px;
  flex:0 0 auto;min-width:188px;width:fit-content;
  min-height:38px;padding:5px 22px;margin:0 0 14px;border-radius:22px;
  color:#000;font-family:var(--sans)!important;font-size:20px;font-weight:400;line-height:1.3;
}
/* ไอคอนเป็น flex item ไม่ใช่ absolute — ป้ายจึงกว้าง/สูงตามเนื้อหาจริง
   และข้อความยาวแค่ไหนก็ดันไอคอนไปเอง ไม่มีทางทับกัน */
.az-landing .characters .title .world .ico{
  position:relative;flex:0 0 auto;
  background-position:50%;background-repeat:no-repeat;background-size:contain;
}
.az-landing .characters .title .world .txt{white-space:nowrap}
.az-landing .characters .title .world.type_1{background:#eae4d3}
.az-landing .characters .title .world.type_1 .ico{background-image:url(../assets/e26/char/ico_world_1.png);width:28px;height:35px}
.az-landing .characters .title .world.type_2{background:#bcc2d2}
.az-landing .characters .title .world.type_2 .ico{background-image:url(../assets/e26/char/ico_world_2.png);width:28px;height:31px}
.az-landing .characters .title .world.type_3{background:#edc2c2}
.az-landing .characters .title .world.type_3 .ico{background-image:url(../assets/e26/char/ico_world_3.png);width:18px;height:39px;top:-2px}

.az-landing .characters .voice_wrapper{gap:28px;padding-left:1px}
.az-landing .characters .voice{position:relative;top:0;display:flex;align-items:center;gap:5px;height:39px;padding-right:23px}
.az-landing .characters .voice::after{content:"";position:absolute;right:0;width:1px;height:18px;background:#a7a7a8}
.az-landing .characters .voice:last-child::after{display:none}
.az-landing .characters .voice span{color:#666;font-size:18px;font-weight:700;font-family:var(--body)!important;letter-spacing:.02em}
.az-landing .characters .voice .sound-icon{
  display:flex;align-items:center;justify-content:center;width:40px;height:100%;
  background:url(../assets/e26/char/ico_sound.png) 50%/contain no-repeat;
}
.az-landing .characters .voice .sound-icon-body{display:flex;align-items:center;gap:2px;width:18px;height:16px}
.az-landing .characters .voice .sound-icon-body i{display:block;background:#666}
.az-landing .characters .voice .sound-icon-body .line1{width:2px;height:6px}
.az-landing .characters .voice .sound-icon-body .line2{width:2px;height:9px}
.az-landing .characters .voice .sound-icon-body .line3{width:2px;height:16px}
@keyframes soundmove{0%{opacity:0;transform:scaleY(0)}50%{opacity:1;transform:scaleY(1)}100%{opacity:1;transform:scaleY(0)}}
.az-landing .characters .voice.is-on .sound-icon-body .line1{opacity:0;animation:soundmove 1.2s infinite}
.az-landing .characters .voice.is-on .sound-icon-body .line2{opacity:0;animation:soundmove 1.2s .1s infinite}
.az-landing .characters .voice.is-on .sound-icon-body .line3{opacity:0;animation:soundmove 1.2s .2s infinite}

.az-landing .characters .desc,.az-landing .kibo .desc{
  color:#666;font-family:var(--body)!important;font-size:16px;font-weight:400;line-height:25px;
  word-break:keep-all;min-height:90px;
}
/* กว้าง 700 (กว้างกว่าคอลัมน์ 596 ของบล็อกชื่อเล็กน้อย แต่ยังไม่ชนภาพตัวละคร)
   ตัดบรรทัดอัตโนมัติ — ไม่ใช้ <br> ในข้อความแล้ว */
.az-landing .characters .desc{
  width:700px;min-height:65px;
  word-break:normal;overflow-wrap:break-word;line-break:auto;
}
/* keep-all ห้ามตัดระหว่างอักษรจีน — Safari (iOS) จึงไม่ตัดบรรทัดเลยจนข้อความล้นจอ → ตัดแบบปกติเหมือน .characters .desc */
.az-landing .kibo .desc{width:487px;color:#333;word-break:normal;overflow-wrap:break-word;line-break:auto}

/* slide-in animation */
.az-landing .characters .tales_slide.is-active .title .name,
.az-landing .characters .tales_slide.is-active .title .world,
.az-landing .characters .tales_slide.is-active .voice_wrapper,
.az-landing .characters .tales_slide.is-active .desc,
.az-landing .characters .tales_slide.is-active .title::after{animation:slideInX .7s .1s both}
@keyframes slideInX{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:translateX(0)}}

/* --- navigator (thumbs) shared --- */
.az-landing .navigator{
  position:absolute;bottom:0;left:-62px;z-index:10;
  width:556px;height:157px;overflow:visible;
}
.az-landing .navigator .btn_nav{
  width:40px;height:40px;text-indent:-9999px;overflow:hidden;flex:0 0 auto;
  background-image:url(../assets/e25/tales_btn_arrow.png);background-repeat:no-repeat;
}
.az-landing .navigator .btn_prev{order:1;background-position:-20px -20px}
.az-landing .navigator .btn_next{order:3;background-position:-60px -20px}
.az-landing .navigator .btn_nav:hover{background-position-y:-72px}
.az-landing .navigator .pagination{
  order:2;position:relative;top:1px;width:470px;height:100%;margin:0;
  overflow:hidden;scrollbar-width:none;-ms-overflow-style:none;
  justify-content:center;
}
.az-landing .navigator .pagination{scrollbar-color:transparent transparent}
.az-landing .navigator .pagination::-webkit-scrollbar{display:none}
.az-landing .tales_pg_bullet{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:139px;height:139px;flex:0 0 auto;transition:width .5s,height .5s;
  background:url(../assets/e26/char/thumb_default.png) 50%/contain no-repeat;
}
.az-landing .tales_pg_bullet.is-off{display:none}
.az-landing .tales_pg_bullet img{position:relative;z-index:1;width:116px;transition:filter .25s}
.az-landing .tales_pg_bullet .dim{display:none}
.az-landing .tales_pg_bullet .circle{position:absolute;z-index:2;width:116px;height:116px;border-radius:50%;overflow:hidden;display:none}
.az-landing .tales_pg_bullet.is-active{
  width:151px;height:157px;
  background-image:url(../assets/e26/char/thumb_active.png);
}
.az-landing .tales_pg_bullet.is-active .dim{display:none}
.az-landing .tales_pg_bullet.is-active .circle{display:block}
.az-landing .characters .tales_pg_bullet:not(.is-active) img,
.az-landing .kibo .tales_pg_bullet:not(.is-active) img{filter:brightness(0.7)}
.az-landing .characters .tales_pg_bullet:not(.is-active):hover img,
.az-landing .characters .tales_pg_bullet.is-active img,
.az-landing .kibo .tales_pg_bullet:not(.is-active):hover img,
.az-landing .kibo .tales_pg_bullet.is-active img{filter:brightness(1)}
.az-landing .tales_pg_bullet.is-active .circle::before{
  content:"";position:absolute;top:50%;left:-100%;width:50%;height:150%;
  background:linear-gradient(90deg,rgba(255,255,255,.1),rgba(168,220,250,.5) 50%,rgba(255,255,255,.1));
  transform:rotate(-30deg) translateY(-50%);animation:circleSweep .6s .2s;
}
@keyframes circleSweep{from{left:-150%}to{left:150%}}
.az-landing .characters .navigator{left:71px;bottom:168px;animation:fadeUpSm 1s .6s both}

/* --- kibo --- */
.az-landing .kibo .tab{position:absolute;top:183px;left:33px;z-index:10;min-height:360px}
.az-landing .kibo .tab ul{display:flex;flex-direction:column;margin:0}
.az-landing .kibo .tab li{position:relative;display:flex;align-items:center;gap:11px;height:72px}
.az-landing .kibo .tab li .ico{display:block;width:21px;height:20px;background:url(../assets/e26/kibo/ico_menu.png) 50% no-repeat}
.az-landing .kibo .tab li .ico::after{
  content:"";display:block;width:21px;height:20px;opacity:0;transition:opacity .3s;
  background:url(../assets/e26/kibo/ico_menu_active.png) 50% no-repeat;
}
.az-landing .kibo .tab li button{position:relative;display:flex;align-items:end;gap:14px}
.az-landing .kibo .tab li button .name{
  display:block;color:#717171;font-family:var(--serif)!important;font-size:30px;font-weight:800;
  transform:scale(.87);transform-origin:left;transition:transform .3s,color .3s;
}
.az-landing .kibo .tab li button .symbol{display:block;margin-bottom:8px;opacity:0;transition:opacity .3s;width:auto}
.az-landing .kibo .tab li button::after{content:"";position:absolute;top:46px;left:0;width:0;height:1px;background:#000;transition:width .3s}
.az-landing .kibo .tab li:hover .ico::after,.az-landing .kibo .tab li.is-active .ico::after{opacity:1}
.az-landing .kibo .tab li:hover button .name,.az-landing .kibo .tab li.is-active button .name{color:#333;transform:scale(1)}
.az-landing .kibo .tab li.is-active button .symbol{opacity:.6}
.az-landing .kibo .tab li.is-active button::after{width:100%}
.az-landing .kibo .tab li:nth-child(1){animation:slideInX .7s .1s both}
.az-landing .kibo .tab li:nth-child(2){animation:slideInX .7s .2s both}
.az-landing .kibo .tab li:nth-child(3){animation:slideInX .7s .3s both}
.az-landing .kibo .tab li:nth-child(4){animation:slideInX .7s .4s both}
.az-landing .kibo .tab li:nth-child(5){animation:slideInX .7s .5s both}

.az-landing .kibo .slide_container{
  position:absolute;bottom:116px;left:286px;z-index:5;
  width:596px;min-height:262px;
}
.az-landing .kibo .slide_item{
  position:absolute;bottom:0;left:0;width:100%;
  opacity:0;visibility:hidden;transform:translateX(10%);
}
.az-landing .kibo .slide_item.is-active{z-index:5;visibility:visible;opacity:1;transform:none;animation:kiboIn .7s .1s both}
@keyframes kiboIn{from{opacity:0;transform:translateX(10%)}to{opacity:1;transform:translateX(0)}}
.az-landing .kibo .slide_item .title{position:relative;z-index:1;margin-bottom:20px;font-family:var(--serif)!important;font-weight:700}
.az-landing .kibo .slide_item .title .name{position:relative;display:block;margin-bottom:20px;color:#353535;font-size:64px}
.az-landing .kibo .slide_item .title .name h2{margin:0;font-size:inherit;font-weight:700;letter-spacing:-1px;min-width:265px;padding-top:22px;white-space:nowrap}
.az-landing .kibo .slide_item .title .name .symbol{position:absolute;top:0;left:10px;width:auto;max-width:none}
.az-landing .kibo .slide_item .title .type{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:0;height:30px;border-radius:15px;
  color:#fbfbfb;font-family:var(--sans)!important;font-size:18px;font-weight:700;text-align:center;padding:0 15px;letter-spacing:.18px;
}
.az-landing .kibo .slide_item.staray .type{background:#7ac2e7}
.az-landing .kibo .slide_item.downy .type{background:#f9bdb3}
.az-landing .kibo .slide_item.cabbird .type{background:#85b962}
.az-landing .kibo .slide_item.bluda .type{background:#698bbe}
.az-landing .kibo .slide_item.vespervamp .type{background:#b32935}

/* รูป kibo — ชุดเดียวกับเว็บอ้างอิง: 4 ชั้นซ้อนกันบนกรอบ 1637x1012 (bottom / ชื่อ / middle / top)
   กรอบชิดขอบบน, ซ้าย = max(26.2vh, 56vw − ครึ่งกรอบ) ตามเว็บอ้างอิง (คิดในหน่วยอาร์ตบอร์ด) */
.az-landing .kibo .motion_container{position:absolute;inset:0;z-index:1;width:100%;height:100%}
.az-landing .kibo .motion_item{
  position:absolute;top:0;left:max(283px,var(--bw,1920px) * .56 - 818.5px);
  width:1637px;height:1012px;pointer-events:none;
}
.az-landing .kibo .motion_item .lyr{
  position:absolute;top:0;left:0;width:100%;height:100%;max-width:none;object-fit:contain;
  opacity:0;transition:transform .5s cubic-bezier(.3,0,.3,1),opacity .5s linear;
}
.az-landing .kibo .motion_item .lyr_top{z-index:4;transform:translateX(80px)}
.az-landing .kibo .motion_item .lyr_middle{z-index:3;transform:translateY(30px)}
.az-landing .kibo .motion_item .lyr_text{z-index:2;transform:translateX(-60px)}
.az-landing .kibo .motion_item .lyr_bottom{z-index:1;transform:translateX(80px)}
.az-landing .kibo .motion_item.is-active .lyr{opacity:1;transform:none;transition-delay:.25s}
/* vespervamp: ชั้นบนเป็นรูปใหญ่กว่ากรอบ — ขยาย 1.25 แล้วเลื่อนขึ้น-ซ้ายตามเว็บอ้างอิง (−7.2vh, −7.4vw) */
.az-landing .kibo .motion_item.vespervamp .lyr_top{top:-78px;left:calc(var(--bw,1920px) * -.074);scale:1.25}

/* =========================================================================
   5. WORLDS
   ========================================================================= */
.az-landing .worlds{background:#3b3630}
.az-landing .worlds .content{
  position:absolute;top:50%;left:50%;
  width:1920px;height:1080px;
  transform:translate(-50%,-50%) scale(var(--kw));
  transform-origin:center center;
  user-select:none;-webkit-user-select:none;cursor:grab;touch-action:none;
}
.az-landing .worlds .content.is-dragging{cursor:grabbing}
.az-landing .worlds .worlds_bg{position:absolute;inset:0;z-index:0;width:100%;height:100%}
.az-landing .worlds .worlds_bg img{width:100%;height:100%;object-fit:cover;display:block}
.az-landing .worlds .btn_area_wrap{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  z-index:1;width:1920px;height:100%;
}
.az-landing .worlds .btn_map{position:absolute;display:flex;flex-direction:column;align-items:center;padding:0}
.az-landing .worlds .btn_map .visual{position:relative;width:100%;height:100%;background-repeat:no-repeat;background-size:contain;transition:transform .25s ease-out}
.az-landing .worlds .btn_map .visual .dot{
  position:absolute;width:40px;height:43px;
  background:url(../assets/e25/worlds_no_name.png) 0 0/contain no-repeat;transition:opacity .2s;
}
.az-landing .worlds .btn_map .name{
  position:absolute;bottom:0;z-index:3;display:flex;align-items:center;justify-content:center;
  height:fit-content;padding:8px 30px;pointer-events:none;
  color:#fff;font-family:var(--serif)!important;font-size:16px;font-weight:800;line-height:20px;letter-spacing:.6px;
  -webkit-text-stroke:4px #332800;paint-order:stroke fill;text-shadow:0 0 8px #332800;
  white-space:nowrap;
}

.az-landing .worlds .btn_area_1{width:274px;height:274px;top:calc(50% - 307px);left:calc(50% - 313px)}
.az-landing .worlds .btn_area_1 .visual{background-image:url(../assets/e26/worlds/worlds_area_1.png)}
.az-landing .worlds .btn_area_1 .name{bottom:-11px}
.az-landing .worlds .btn_area_2{width:185px;height:185px;top:calc(50% - 74px);left:calc(50% - 457px)}
.az-landing .worlds .btn_area_2 .visual{background-image:url(../assets/e26/worlds/worlds_area_2.png)}
.az-landing .worlds .btn_area_3{width:288px;height:288px;top:calc(50% + 132px);left:calc(50% - 72px)}
.az-landing .worlds .btn_area_3 .visual{background-image:url(../assets/e26/worlds/worlds_area_3.png)}
.az-landing .worlds .btn_area_4{width:224px;height:223px;top:calc(50% - 102px);left:calc(50% - 76px)}
.az-landing .worlds .btn_area_4 .visual{background-image:url(../assets/e26/worlds/worlds_area_4.png)}
.az-landing .worlds .btn_kibo_1{width:163px;height:162px;top:calc(50% - 270px);left:calc(50% - 438px)}
.az-landing .worlds .btn_kibo_1 .visual{background-image:url(../assets/e26/worlds/worlds_kibo_1.png)}
.az-landing .worlds .btn_kibo_1 .visual .dot{top:13.3333%;left:63.3333%}
.az-landing .worlds .btn_kibo_2{width:163px;height:162px;top:calc(50% - 41px);left:calc(50% + 149px)}
.az-landing .worlds .btn_kibo_2 .visual{background-image:url(../assets/e26/worlds/worlds_kibo_2.png)}
.az-landing .worlds .btn_kibo_2 .visual .dot{top:11.1111%;left:62.2222%}
.az-landing .worlds .btn_lebe{width:243px;height:244px;top:calc(50% - 328px);left:calc(50% + 231px)}
.az-landing .worlds .btn_lebe .visual{background-image:url(../assets/e26/worlds/worlds_lebe.png)}

/* hover feedback: keep the same artwork and just zoom it a little.
   scoped to real pointers so a tap on a touch screen cannot leave a
   button stuck in its :hover state */
@media (hover:hover) and (pointer:fine){
  .az-landing .worlds .btn_map:has(.click_area:hover) .visual .dot{opacity:0}
}

/* กรอบแสงตอน hover — รูปเดียวกับเว็บอ้างอิง (focus / k_focus / book_mask) เฟดเข้า .3s ไม่ขยายรูป */
.az-landing .worlds .focus{
  position:absolute;inset:0;z-index:0;display:block;opacity:0;pointer-events:none;
  background:url(../assets/e27/worlds/focus.png) 50%/100% 100% no-repeat;
  transition:opacity .3s;
}
.az-landing .worlds .focus--kibo{background-image:url(../assets/e27/worlds/k_focus.png)}
.az-landing .worlds .btn_map .visual{z-index:1}
.az-landing .worlds .btn_map:has(.click_area:hover) .focus,
.az-landing .worlds .btn_map:has(.click_area:focus-visible) .focus,
.az-landing .worlds .btn_book:has(.click_area:hover) .focus,
.az-landing .worlds .btn_book:has(.click_area:focus-visible) .focus{opacity:1}

/* สมุดโน้ต (PC) — ตัวสมุดไม่มีตัวหนังสือ วาดอยู่ในรูปพื้นหลังแผนที่ชุดเว็บอ้างอิงแล้ว
   ตรงนี้มีแค่พื้นที่กดรูปสี่เหลี่ยมเอียงตามตัวสมุด + กรอบแสง ตำแหน่ง (1351,19) ขนาด 565x778 บนบอร์ด 1920x1080 */
.az-landing .worlds .btn_book{position:absolute;top:19px;left:1351px;z-index:2;width:565px;height:778px}
.az-landing .worlds .btn_book .focus{background-image:url(../assets/e27/worlds/book_mask.png)}
.az-landing .worlds .btn_book .click_area{
  position:absolute;inset:0;z-index:1;width:100%;height:100%;
  clip-path:polygon(35px 100px,450px 20px,565px 534px,565px 608px,155px 680px);
}

/* เมฆกระดาษบนแผนที่ (PC) — ขยับสวนเมาส์เล็กน้อยเหมือนเว็บอ้างอิง (js/main.js → worlds.init) */
.az-landing .worlds .map_cloud{
  position:absolute;top:282px;left:269px;z-index:3;width:1478px;height:502px;pointer-events:none;
  background:url(../assets/e27/worlds/cloud.png) 0 0/100% 100% no-repeat;
  transition:transform 2.8s cubic-bezier(.22,.61,.36,1);
}

/* เมฆเปิดฉากตอนเข้า section — ลอกจากเว็บจีน (page4 clouds) · เฉพาะ PC: มือถือปิดไว้ (ซ่อนเมฆ และรูปเป็น lazy จึงไม่โหลดเลย)
   กล่อง 16:9 สูงเท่า section (ขั้นต่ำ 760px) อยู่กลางจอ ขยาย 1.15 เท่า · ตำแหน่ง/ขนาดเมฆเป็น % ของกล่อง (ดีไซน์ 1920x1080)
   ปกติซ่อนไว้ (opacity 0) — พอเข้า section (.fp__slide.is-in) เมฆคลุมแผนที่ทันที แล้วแต่ละชิ้นเลื่อนออกด้านข้างและจางหาย
   ระยะ/เวลา/easing วัดจากเว็บจีนทุกชิ้น ครบใน ~3.2 วินาที · เมฆไม่รับคลิก กดแผนที่ได้ตลอด */
.az-landing .worlds .worlds_clouds{
  position:absolute;top:50%;left:50%;z-index:5;
  height:max(100%,760px);aspect-ratio:16/9;
  transform:translate(-50%,-50%) scale(1.15);
  pointer-events:none;
}
.az-landing .worlds .worlds_clouds .wc{position:absolute;display:block;width:100%;max-width:none;height:auto;opacity:0}
.az-landing .worlds .wc_1{top:52.3148%;left:-23.9583%;z-index:6;rotate:8deg;scale:1.24}
.az-landing .worlds .wc_2{top:-16.6667%;left:18.75%;z-index:5;rotate:4deg}
.az-landing .worlds .wc_3{top:44.4444%;left:26.25%;z-index:4;width:37.8125%;rotate:12deg}
.az-landing .worlds .wc_4{top:46.2963%;left:23.4375%;z-index:3;rotate:3deg}
.az-landing .worlds .wc_5{top:-25.9259%;left:-41.6667%;z-index:2;rotate:11deg}
.az-landing .worlds .wc_6{top:.9259%;left:10.4167%;z-index:1;rotate:11deg}
/* ระยะเลื่อน = % ของความกว้างเมฆชิ้นนั้นเอง (wc_3 กว้าง 37.8% ของกล่อง: −447% ของตัวเอง = −169% ของกล่อง) */
@media (min-width:992px){
  .az-landing .fp__slide.is-in .worlds .wc_1{animation:wcOut1 1.94s .48s cubic-bezier(.4,0,.6,1) both,wcFade .2s 2.48s linear both}
  .az-landing .fp__slide.is-in .worlds .wc_2{animation:wcOut2 1.62s .4s cubic-bezier(.5,0,.5,1) both,wcFade .24s 1.98s linear both}
  .az-landing .fp__slide.is-in .worlds .wc_3{animation:wcOut3 2.06s .48s cubic-bezier(.4,0,.6,1) both,wcFade .22s 2.57s linear both}
  .az-landing .fp__slide.is-in .worlds .wc_4{animation:wcOut4 1.82s .4s cubic-bezier(.6,0,.8,1) both,wcFade .2s 2.38s linear both}
  .az-landing .fp__slide.is-in .worlds .wc_5{animation:wcOut5 2.26s .4s cubic-bezier(.6,0,.8,1) both,wcFade .2s 2.88s linear both}
  .az-landing .fp__slide.is-in .worlds .wc_6{animation:wcOut6 2.34s .42s cubic-bezier(.6,0,.8,1) both,wcFade .2s 2.98s linear both}
}
@media (max-width:991.98px){
  .az-landing .worlds .worlds_clouds{display:none}
}
@keyframes wcOut1{from{translate:0 0}to{translate:-85% -.93%}}
@keyframes wcOut2{from{translate:0 0}to{translate:82% .11%}}
@keyframes wcOut3{from{translate:0 0}to{translate:-446.94% 0}}
@keyframes wcOut4{from{translate:0 0}to{translate:78% 1.32%}}
@keyframes wcOut5{from{translate:0 0}to{translate:-62% -.92%}}
@keyframes wcOut6{from{translate:0 0}to{translate:91% 1.93%}}
@keyframes wcFade{from{opacity:1}to{opacity:0}}

/* พร้อมเมฆเปิด: ชั้นแผนที่ + เมฆหมุนจาก −7° กลับมาตรง และแผนที่ขยายจาก 75% เป็น 100% (หมุน/ขยายรอบกลาง section)
   ลอกจากเว็บจีน: gsap timeline delay .4s → rotateZ −7deg→0 และ scale .75→1 ยาว 2.1s ease power1.out
   (= cubic-bezier(.33,.67,.67,1)) · ตอนแผนที่ย่ออยู่จะเห็นพื้น section สีเข้มรอบขอบเหมือนต้นฉบับ · เฉพาะ PC (มือถือแผนที่นิ่ง) */
.az-landing .worlds .worlds_stage,
.az-landing .worlds .worlds_map{position:absolute;inset:0}
@media (min-width:992px){
  .az-landing .fp__slide.is-in .worlds .worlds_stage{animation:wsTilt 2.1s .42s cubic-bezier(.33,.67,.67,1) both}
  .az-landing .fp__slide.is-in .worlds .worlds_map{animation:wsZoom 2.1s .42s cubic-bezier(.33,.67,.67,1) both}
}
@keyframes wsTilt{from{rotate:-7deg}to{rotate:0deg}}
@keyframes wsZoom{from{scale:.75}to{scale:1}}
/* PC: พื้นรอบแผนที่ตอนย่อ = ลายไม้เข้ม (ไฟล์เดียวกับเว็บจีน ปูซ้ำขนาดจริง) หมุนไปพร้อมชั้น · มุมนอกชั้นที่หมุน = #0d0d0d
   ปกติแผนที่คลุมเต็มจอ จึงเห็นเฉพาะช่วงแอนิเมชัน · มือถือคงพื้นเดิม (#3b3630 โผล่ตรงขอบแผนที่ที่จางออก) */
@media (min-width:992px){
  .az-landing .worlds{background:#0d0d0d}
  .az-landing .worlds .worlds_stage{background:url(../assets/e27/worlds/stage_bg.jpg)}
}

/* PC: สมุดแบบเดิม (รูปมีตัวหนังสือ) และเมฆบังขอบชุดเก่าไม่ใช้แล้ว — มือถือยังใช้แถบล่างเหมือนเดิม */
@media (min-width:992px){
  .az-landing .worlds .btn_note,
  .az-landing .worlds .cloud{display:none}
}
.az-landing .worlds .btn_note{position:absolute;top:2.86vw;right:-3.9vw;z-index:19;width:29.375vw;height:39.68vw}
.az-landing .worlds .btn_note .visual{
  position:relative;width:100%;height:100%;transition:background-image .3s;
  background:var(--img-worlds-note, url(../assets/i18n/en/e25/worlds_note.png)) no-repeat;background-size:contain;
}
.az-landing .worlds .btn_note .bg{display:none}
.az-landing .worlds .btn_note .click_area{position:absolute;top:17%;left:14%;z-index:9;width:75%;height:70%;transform:rotate(-12deg)}
.az-landing .worlds .btn_note .click_area:hover+.visual{background-image:var(--img-worlds-note-over, url(../assets/i18n/en/e25/worlds_note_over.png))}

.az-landing .worlds .cloud{position:absolute;z-index:3;pointer-events:none}
.az-landing .worlds .cloud img{width:100%;height:100%;object-fit:contain;display:block}
.az-landing .worlds .cloud_l{width:800px;height:426px;top:167px;left:-251px;animation:cloudLeft 2s both}
.az-landing .worlds .cloud_r{width:603px;height:324px;bottom:-49px;right:-89px;animation:cloudRight 2s both}
.az-landing .worlds .cloud_b{width:275px;height:86px;bottom:9px;right:30%;animation:cloudRight 2s both}
@keyframes cloudLeft{0%{opacity:0;transform:translateX(-50px) scale(1.04)}10%{opacity:1}100%{opacity:1;transform:translateX(0) scale(1)}}
@keyframes cloudRight{0%{opacity:0;transform:translateX(50px) scale(1.04)}10%{opacity:1}100%{opacity:1;transform:translateX(0) scale(1)}}

.az-landing .worlds .icon_drag{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:20;pointer-events:none;transition:opacity .4s}
.az-landing .worlds .icon_drag.is-hidden{opacity:0}
.az-landing .worlds .icon_drag_right{animation:nudgeR 1.5s infinite}
.az-landing .worlds .icon_drag_left{animation:nudgeL 1.5s infinite}
@keyframes nudgeR{0%,100%{transform:translateX(-1px)}50%{transform:translateX(0)}}
@keyframes nudgeL{0%,100%{transform:translateX(1px)}50%{transform:translateX(0)}}

/* =========================================================================
   5b. WORLD POP-UPS — area / kibo / note
   The map hot spots and the note book open a full screen pop-up. The heavy
   artwork is only inserted when a pop-up opens (js/main.js -> worldModal),
   so the markup the rules below describe is what that module builds.
   ========================================================================= */
.az-landing .worlds .btn_map .click_area{
  position:absolute;top:50%;left:50%;z-index:10;
  width:66%;height:77%;transform:translate(-50%,-50%);
}

html:has(.az-landing) body.is-modal{overflow:hidden}

.az-landing .world_modal{
  position:fixed;inset:0;z-index:999;overflow:auto;
  display:grid;place-items:center;
  padding:7vh 24px 3vh;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  animation:modalFade .15s both;
}
.az-landing .world_modal[hidden]{display:none}
.az-landing .world_modal::-webkit-scrollbar{display:none}

/* กล่องเนื้อหาพอดีงานศิลป์ — พื้นที่ว่างรอบนอกคลิกปิดได้เพราะไปโดน backdrop */
.az-landing .world_modal .modal_container{
  grid-area:1/1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:max-content;max-width:100%;height:max-content;margin:auto;padding:0;
  pointer-events:none;
  animation:modalIn .4s both;
  position:relative;z-index:0;          /* แต่ละชั้นแยก stacking — ชั้นบนทับชั้นล่างทั้งหมด (เดิมปุ่มรูปในสมุด z-index:2 ลอยทับรูปที่เปิดอยู่) */
}
/* ชั้นที่ถูกทับ (js ใส่ inert) กดไม่ได้ — คลิกทะลุไปโดน backdrop = ปิดชั้นบน */
.az-landing .world_modal .modal_container[inert] *{pointer-events:none}
.az-landing .world_modal .worlds_modal_content,
.az-landing .world_modal .btn_close,
.az-landing .modal_area .txt{pointer-events:auto}
.az-landing .world_modal .worlds_modal_content{position:relative;display:flex;align-items:center;justify-content:center}
@keyframes modalFade{from{opacity:0}to{opacity:1}}
@keyframes modalIn{from{opacity:0;transform:translateY(50px)}to{opacity:1;transform:none}}

.az-landing .world_modal .btn_close{
  position:absolute;z-index:11;width:clamp(48px,3.75vw,72px);height:clamp(48px,3.75vw,72px);
  background:url(../assets/e26/worlds/btn_modal_close.png) 0 0/contain no-repeat;
  transition:transform .3s;
}
.az-landing .world_modal .btn_close:hover{transform:rotate(180deg)}

/* ---- area ---- */
.az-landing .modal_area .area_content{position:relative;display:flex;flex-direction:column;align-items:center}
/* ขนาดรูป popup = เท่าเว็บอ้างอิงทุกใบ (วัดจากขอบเขตงานศิลป์จริงของไฟล์ทั้งสองฝั่ง ไม่ใช่ขนาด canvas)
   --ps = 1px ของดีไซน์ 1920x1080 ย่อ/ขยายตามจอ เหมือน rem ของเว็บอ้างอิง
   พื้นที่ (area): เว็บอ้างอิงแสดงงานศิลป์สูง 826px — ไฟล์ของเราสูง 826px ที่ขนาดจริงพอดี จึงแสดงที่ขนาดจริงของไฟล์
                  ไฟล์ถูกตัดขอบโปร่งบน-ล่างออกแล้ว (สูง 842 = งานศิลป์ 826 + เงา) ข้อความใต้รูปจึงชิดรูปเท่าเว็บอ้างอิง
                  (--nw/--nh = ขนาดไฟล์ ใส่มาจาก js/main.js เพราะแต่ละพื้นที่กว้างไม่เท่ากัน: 1709 / 1633 / 1633 / 1641 สูง 842) */
.az-landing .world_modal{--ps:min(calc(100vw / 1920),calc(100dvh / 1080))}
.az-landing .modal_area .area_image{
  position:relative;
  width:calc(var(--ps) * var(--nw,1709));max-width:100vw;
  aspect-ratio:var(--nw,1709)/var(--nh,842);
}
.az-landing .modal_area .area_image img{width:100%;height:100%}
.az-landing .modal_area .btn_close{top:.4%;left:auto;right:2%}
/* ข้อความใต้รูป — ห่างจากรูปและห่างกันระหว่างตัวอักษรมากขึ้นตามเว็บอ้างอิง (16px ใต้รูป, letter-spacing .08em) */
.az-landing .modal_area .txt{
  margin:clamp(10px,.73vw,14px) 0 0;color:#f5f5f1;opacity:.9;
  font-size:clamp(12px,.73vw,14px);line-height:1;letter-spacing:.08em;cursor:pointer;
}

/* ---- kibo ---- */
.az-landing .modal_kibo .worlds_modal_content{flex-direction:column-reverse;align-items:flex-end;gap:12px}
/* kibo: เว็บอ้างอิง (ภาษาที่ไม่ใช่จีน) แสดงการ์ดกว้าง 1000px → ของเรากว้าง 1000px เท่ากัน */
.az-landing .modal_kibo .kibo_content{
  width:calc(var(--ps) * 1000);max-width:100vw;
  aspect-ratio:1010/550;
}
.az-landing .modal_kibo .kibo_content img{width:100%;height:100%}
.az-landing .modal_kibo .btn_close{position:relative;top:auto;left:auto}

/* ---- world note ---- */
.az-landing .modal_note .note_content{
  position:relative;
  width:min(95vw, calc(95dvh * 1823 / 944));
  aspect-ratio:1823/944;
}
.az-landing .modal_note .note_content > img{width:100%;height:100%}
.az-landing .modal_note .btn_close{top:1.85%;left:93.75%}
.az-landing .modal_note .btn_note_image{position:absolute;display:block}
.az-landing .modal_note .btn_note_image button{position:absolute;inset:0;z-index:2;width:100%;height:100%}
@media (hover:hover) and (pointer:fine){
  .az-landing .modal_note .btn_note_image:hover{
    z-index:3;
    box-shadow:0 0 16px 5px rgba(255,214,120,.9),0 0 34px 14px rgba(255,236,180,.55);
  }
}
.az-landing .modal_note .btn_note_image_1{width:15.469%;height:18.2203%;top:63.7712%;left:64.893%}
.az-landing .modal_note .btn_note_image_2{width:18.102%;height:20.1271%;top:38.4534%;left:65.277%}
.az-landing .modal_note .btn_note_image_3{width:20.7351%;height:23.3051%;top:11.8644%;left:54.9643%}
.az-landing .modal_note .btn_note_image_4{width:20.4608%;height:22.7754%;top:31.9915%;left:20.1317%}
.az-landing .modal_note .btn_note_image_5{width:17.5535%;height:20.339%;top:56.7797%;left:30.4443%}

/* ---- single note page, enlarged ---- */
/* เหมือนเว็บจีน: ไม่มีปุ่ม X — มีข้อความใต้รูป, สมุดข้างหลังมืดลงครึ่งหนึ่ง และคลิกตรงไหนก็ได้นอกรูปเพื่อปิด */
.az-landing .modal_note_image .worlds_modal_content{flex-direction:column}
/* รูปในสมุด: เว็บอ้างอิงแสดงไฟล์กว้าง 1051px แต่ตัวรูปจริง (ไม่รวมขอบโปร่ง) กว้าง 1016px — ไฟล์ของเราไม่มีขอบโปร่ง
   เงาขนาดใหญ่ = ม่านดำ 50% ทับสมุดข้างหลัง (เว็บจีนใช้ mask rgba(0,0,0,.5)) — เงาไม่รับคลิก คลิกจึงทะลุไปปิดรูป */
.az-landing .modal_note_image img{
  width:calc(var(--ps) * 1016);max-width:100vw;
  aspect-ratio:690/397;border-radius:16px;
  box-shadow:0 0 0 200vmax rgba(0,0,0,.5);
}
/* ข้อความใต้รูป — สีและขนาดตามเว็บจีน (#9d9a91, 16px ที่จอ 1920) ไม่รับคลิก กดแล้วทะลุไปปิดรูปเหมือนพื้นที่ว่าง */
.az-landing .modal_note_image .txt{
  margin:0;color:#9d9a91;
  font-size:max(12px,calc(var(--ps) * 16));line-height:1.5;text-align:center;
}

/* PC: รูปอยู่กึ่งกลางจอพอดีเหมือนเว็บอ้างอิง — ข้อความใต้รูปและปุ่มปิดลอยออกนอกโฟลว์ จะได้ไม่ดันรูปให้เยื้อง
   (เดิมรูปพื้นที่ต่ำกว่ากลางจอ ~56px, การ์ด kibo ต่ำกว่า ~80px, รูปในสมุดเยื้องซ้าย ~44px) */
@media (min-width:992px){
  .az-landing .world_modal{padding:0}
  .az-landing .modal_area .txt{position:absolute;top:100%;left:50%;transform:translateX(-50%);white-space:nowrap}
  .az-landing .modal_kibo .worlds_modal_content{display:block}
  .az-landing .modal_kibo .btn_close{position:absolute;top:auto;bottom:100%;left:auto;right:0;margin-bottom:calc(var(--ps) * 12)}
  .az-landing .modal_note_image .worlds_modal_content{display:block}
}

/* ---- Lebe — same as the original: shows a toast only ---- */
.az-landing .world_toast{
  position:fixed;top:50%;left:50%;z-index:1200;transform:translate(-50%,-50%);
  /* กว้างตามข้อความ (เดิมล็อก 350px ทำให้ข้อความยาวอย่างภาษาไทยล้นกรอบ) — จอแคบกว่าข้อความจึงค่อยตัดบรรทัด */
  width:max-content;max-width:calc(100vw - 32px);text-align:center;pointer-events:none;
}
.az-landing .world_toast[hidden]{display:none}
.az-landing .world_toast p{
  position:relative;display:inline-block;max-width:100%;padding:12px 40px;
  border-radius:30px;background:rgba(0,0,0,.7);
  color:#fff;font-family:var(--sans)!important;font-size:16px;font-weight:600;line-height:1.5;
  white-space:normal;text-wrap:balance;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  animation:toastIn .35s both;
}
.az-landing .world_toast p::before,.az-landing .world_toast p::after{
  content:"";position:absolute;top:50%;width:14px;height:14px;margin-top:-7px;
  background:url(../assets/e26/worlds/ico_star.png) 0 0/contain no-repeat;
}
.az-landing .world_toast p::before{left:16px}
.az-landing .world_toast p::after{right:16px}
@keyframes toastIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* -------------------------------------------------------------------------
   pop-ups — mobile / tablet layout
   ------------------------------------------------------------------------- */
@media (max-width:991.98px){
  .az-landing .world_modal{display:flex;align-items:safe center;justify-content:center}
  .az-landing .world_modal .modal_container{padding:0}
  .az-landing .world_modal .btn_close{width:8.33vw;height:8.33vw}
  .az-landing .world_modal .btn_close:hover{transform:none}

  /* area — two pages, swiped left and right */
  .az-landing .modal_area .area_content{padding-bottom:14vw}
  .az-landing .modal_area .modal_nav{
    display:flex;align-items:center;justify-content:center;gap:3vw;
    height:5.56vw;margin-bottom:5.56vw;
  }
  .az-landing .modal_area .btn_nav_text{color:#bfb7a4;font-size:3.75vw;font-weight:800;line-height:1}
  .az-landing .modal_area .btn_nav{width:5.56vw;height:5.56vw;background:50%/2.64vw 4.72vw no-repeat}
  .az-landing .modal_area .btn_prev{background-image:url(../assets/e26/m/btn_modal_prev.png)}
  .az-landing .modal_area .btn_next{background-image:url(../assets/e26/m/btn_modal_next.png)}
  .az-landing .modal_area .btn_nav[disabled]{opacity:.5}
  .az-landing .modal_area .area_swiper{position:relative;width:83.33vw;max-width:390px;aspect-ratio:770/1193}
  .az-landing .modal_area .slide{position:absolute;inset:0;opacity:0;transition:opacity .3s}
  .az-landing .modal_area .slide.is-active{opacity:1}
  .az-landing .modal_area .btn_close{top:auto;bottom:0;left:calc(50% - 4.17vw)}

  /* kibo */
  .az-landing .modal_kibo .worlds_modal_content{flex-direction:column;align-items:center;gap:0;padding-bottom:14vw}
  .az-landing .modal_kibo .kibo_content{width:83.33vw;max-width:390px;aspect-ratio:770/1193}
  .az-landing .modal_kibo .btn_close{position:absolute;bottom:0;left:calc(50% - 4.17vw)}

  /* world note — becomes a five-page flip-through on small screens */
  .az-landing .modal_note .note_content{
    width:100vw;min-width:300px;aspect-ratio:720/1398;
    background:var(--img-worlds-note-bg-m, url(../assets/i18n/en/e26/m/worlds/worlds_note_bg.png)) 0 0/contain no-repeat;
  }
  .az-landing .modal_note .note_wrap{
    position:absolute;top:41.89vw;left:0;width:100%;height:77%;
    display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  }
  .az-landing .modal_note .note_swiper{position:relative;width:93.78%;aspect-ratio:694/400;margin-bottom:14.86vw}
  .az-landing .modal_note .note_slide{position:absolute;inset:0;opacity:0;transition:opacity .3s}
  .az-landing .modal_note .note_slide.is-active{opacity:1}
  .az-landing .modal_note .note_slide img{width:100%}
  .az-landing .modal_note .modal_nav{
    position:relative;width:94.32vw;aspect-ratio:698/156;
    display:flex;align-items:flex-start;justify-content:center;
    background:url(../assets/e26/m/worlds/worlds_note_thumbnail.png) 50%/contain no-repeat;
  }
  .az-landing .modal_note .note_pagination_container{
    position:relative;top:4.32vw;width:78.92vw;aspect-ratio:584/108;
    overflow-x:auto;scrollbar-width:none;
  }
  .az-landing .modal_note .note_pagination_container::-webkit-scrollbar{display:none}
  .az-landing .modal_note .note_pagination{display:flex;align-items:center;gap:6px;width:max-content;height:100%}
  .az-landing .modal_note .bullet{
    flex:0 0 auto;width:25.57vw;aspect-ratio:96/54;
    background-position:50%;background-size:cover;background-repeat:no-repeat;
    filter:grayscale(1);transition:filter .3s;
  }
  .az-landing .modal_note .bullet.is-active{filter:none}
  .az-landing .modal_note .bullet_1{background-image:url(../assets/e26/m/worlds/worlds_note_image_1_pg.png)}
  .az-landing .modal_note .bullet_2{background-image:url(../assets/e26/m/worlds/worlds_note_image_2_pg.png)}
  .az-landing .modal_note .bullet_3{background-image:url(../assets/e26/m/worlds/worlds_note_image_3_pg.png)}
  .az-landing .modal_note .bullet_4{background-image:url(../assets/e26/m/worlds/worlds_note_image_4_pg.png)}
  .az-landing .modal_note .bullet_5{background-image:url(../assets/e26/m/worlds/worlds_note_image_5_pg.png)}
  .az-landing .modal_note .btn_nav{
    position:absolute;top:9.19vw;z-index:10;width:2.7%;aspect-ratio:20/34;
    background-position:50%;background-size:contain;background-repeat:no-repeat;
  }
  .az-landing .modal_note .btn_nav[disabled]{opacity:.5}
  .az-landing .modal_note .btn_prev{background-image:url(../assets/e26/m/worlds/worlds_note_btn_prev.png);left:3.24vw}
  .az-landing .modal_note .btn_next{background-image:url(../assets/e26/m/worlds/worlds_note_btn_next.png);right:3.24vw}
  .az-landing .modal_note .btn_close{width:9.73vw;height:9.73vw;top:86.2%;left:calc(50% - 4.87vw)}
}

/* tablets keep the mobile pop-ups but on the wider note sheet */
@media (min-width:768px) and (max-width:991.98px){
  .az-landing .world_modal .btn_close{width:60px;height:60px}
  .az-landing .modal_area .area_swiper,.az-landing .modal_kibo .kibo_content{width:385px;max-width:calc(100vw - 40px)}
  .az-landing .modal_area .btn_close,.az-landing .modal_kibo .btn_close{left:calc(50% - 30px)}
  .az-landing .modal_area .modal_nav{height:2.78vw;gap:1.5vw;margin-bottom:2.78vw}
  .az-landing .modal_area .btn_nav_text{font-size:1.88vw}
  .az-landing .modal_area .btn_nav{width:2.78vw;height:2.78vw;background-size:1.32vw 2.36vw}
  .az-landing .modal_note .note_content{
    min-width:768px;max-width:1200px;aspect-ratio:1440/1320;
    background-image:var(--img-worlds-note-bg-tb, url(../assets/i18n/en/e26/m/worlds/worlds_note_bg_tb.png));
  }
  .az-landing .modal_note .note_wrap{top:19.17vw;height:79%}
  .az-landing .modal_note .note_swiper{width:48.19%;margin-bottom:7.64vw}
  .az-landing .modal_note .modal_nav{width:48.47vw}
  .az-landing .modal_note .note_pagination_container{top:2.22vw;width:40.56vw}
  .az-landing .modal_note .bullet{width:13.14vw}
  .az-landing .modal_note .btn_nav{top:4.72vw;width:1.39vw}
  .az-landing .modal_note .btn_prev{left:1.67vw}
  .az-landing .modal_note .btn_next{right:1.67vw}
  .az-landing .modal_note .btn_close{width:5%;height:auto;aspect-ratio:1;top:auto;bottom:0;left:calc(50% - 2.5vw)}
}

/* =========================================================================
   6. NEWS
   Bootstrap grid does the layout (one row, two auto columns, `order-*` to
   put the banner above the list on narrow screens).
   PC ตามดีไซน์ 资讯页PC (อาร์ตบอร์ด 1920x1080): --n = 1px ของอาร์ตบอร์ด ย่อตามความกว้างจอ
     คอลัมน์ซ้าย 660 ที่ x212 · ช่องว่าง 102 · แบนเนอร์ 712x400 ที่ x974 y430 (มุม 20) · ลูกศร 33x34 ใต้แบนเนอร์
     NEWS 244x92 ที่ y243 · แท็บสูง 30 ที่ y340 · เส้น line.png 660x10 (เส้นจริงอยู่ y433.5 และ y830.5)
     แถวข่าว 79 ต่อแถว คั่นด้วยเส้นทึบ 1px · ป้าย 38x18 ตัว 16 · หัวข้อ 18 · วันที่ 14 · ดูเพิ่มเติม 18
   ========================================================================= */
/* ไม่มีบทความที่เผยแพร่ — ซ่อนทั้งสไลด์และปุ่มเมนู จน main.js เอาคลาสนี้ออก */
html.is-news-off .az-landing .fp__slide[data-section="news"],
html.is-news-off .az-landing [data-nav="news"]{display:none!important}

.az-landing .news{
  position:relative;overflow:hidden;
  /* พื้นตามดีไซน์ = #fafdff + ลายเส้นทแยง (ไฟล์ลายเดียวกับมือถือ) */
  background:#fafdff url(../assets/news/news_texture.png) 0 0 repeat;
  --ink:#333;      /* หัวข้อตอน hover / กด */
  --ink-2:#999;    /* วันที่ */
  --ink-3:#666;    /* แท็บ / หัวข้อ / ดูเพิ่มเติม ปกติ */
  --rule:rgba(61,69,79,.4);
  --tag:#cab289;
  --n:min(1px,calc(100vw / 1920));
}
/* footer sits in this slide as a compact bar — news fills the rest of the viewport */
.az-landing .fp__slide[data-section="news"]{display:flex;flex-direction:column}
.az-landing .fp__slide[data-section="news"] > .section.news{
  flex:1 1 auto;height:auto;min-height:0;max-height:none;
}
/* the scene fades out of the top of the panel */
.az-landing .news::before{
  content:"";position:absolute;top:0;left:0;z-index:0;
  width:100%;height:min(520px,27.08vw);
  background:url(../assets/news/news_bg.png) 50% 100%/cover no-repeat;
}
/* wordmark watermark, bottom left — 246x74 ที่ x61 ห่างขอบล่าง 48 */
.az-landing .news::after{
  content:"";position:absolute;z-index:1;
  bottom:calc(var(--n)*48);left:calc(var(--n)*61);
  width:calc(var(--n)*246);aspect-ratio:246/74;
  background:url(../assets/news/news_watermark.png) 0 0/contain no-repeat;
}
.az-landing .news .news_container{
  position:relative;z-index:2;
  width:100%;padding:clamp(88px,6vw,120px) 20px clamp(24px,2vw,40px);
}

/* หัวข้อ NEWS — ใช้รูปเดียวกับเว็บอ้างอิง (news.png 244x92) แสดงเป็นรูปตรง ๆ ทุกภาษา */
.az-landing .news .news_title{
  width:clamp(160px,calc(var(--n)*244),244px);aspect-ratio:244/92;margin:0 0 calc(var(--n)*5) calc(var(--n)*5);
  background:url(../assets/e27/news/news_title.png) 0 0/contain no-repeat;
}
.az-landing .news .news_title_mo{
  margin:0 0 16px;text-align:center;
  color:#454545;font-family:var(--sans)!important;font-size:20px;font-weight:700;letter-spacing:-.5px;
}

/* ---- category tabs ----
   ปกติ #666 · hover #999 · ที่เลือก พื้น #454545 ตัว #f0f0f0 (ตาม spec 常规/hover/按下)
   เส้นคั่น 1px สูง 20 สี rgba(61,69,79,.4) ห่างกรอบแท็บข้างละ ~41 (แท็บห่างกันเฉลี่ย 149.7) — ช่องว่างหดได้เมื่อคำยาว (ภาษาอื่น) จะได้อยู่แถวเดียว */
.az-landing .news .news_tabs{
  width:100%;max-width:100%;min-width:0;
  flex-wrap:nowrap;gap:0;
  margin:0 0 calc(var(--n)*59);padding:0 0 0 calc(var(--n)*7);
}
.az-landing .news .news_tabs > li{flex:0 0 auto}
.az-landing .news .news_tabs > li.news_tab_sep{
  flex:0 1 calc(var(--n)*83.7);min-width:9px;height:calc(var(--n)*20);
  background:linear-gradient(var(--rule),var(--rule)) 50% 50%/1px 100% no-repeat;
}
.az-landing .news .news_tab{
  display:block;padding:0 calc(var(--n)*9);white-space:nowrap;
  color:var(--ink-3);font-family:var(--sans)!important;font-size:max(14px,calc(var(--n)*24));font-weight:700;line-height:1.25;
  transition:color .2s,background-color .2s;
}
.az-landing .news .news_tab:hover{color:#999}
.az-landing .news .news_tab.is-on{background:#454545;color:#f0f0f0}

/* ---- rules above / below the list ---- */
.az-landing .news .news_rule{
  width:100%;aspect-ratio:660/10;
  background:url(../assets/news/line.png) 50%/100% 100% no-repeat;
}

/* ---- list ---- */
.az-landing .news .news_list{margin:0}
.az-landing .news .news_item + .news_item{border-top:1px solid rgba(107,107,107,.2)}
.az-landing .news .news_item_btn{width:100%;text-align:left}
/* ป้ายหมวด: พื้น #cab289 ตัวขาว เหลี่ยม (ไม่ใช่กรอบโค้ง) */
.az-landing .news .news_tag{flex:0 0 auto}
.az-landing .news .news_tag.news_tag--text{
  padding:0 calc(var(--n)*3);border:0;border-radius:0;background:var(--tag);color:#fff;
  font-family:var(--sans)!important;font-size:max(11px,calc(var(--n)*16));font-weight:700;line-height:1.125;white-space:nowrap;
}
.az-landing .news .news_item_title{
  flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  margin-left:calc(var(--n)*5);
  color:var(--ink-3);font-family:var(--sans)!important;font-size:max(13px,calc(var(--n)*18));font-weight:700;
  transition:color .2s;
}
.az-landing .news .news_item_date{
  flex:0 0 auto;margin-left:calc(var(--n)*20);
  color:var(--ink-2);font-family:var(--sans)!important;font-size:max(12px,calc(var(--n)*14));font-weight:500;
}
.az-landing .news .news_item_btn:hover .news_item_title,
.az-landing .news .news_item_btn:active .news_item_title{color:var(--ink)}
.az-landing .news .news_empty{
  padding:clamp(28px,2.6vw,50px) 0;text-align:center;
  color:#6a6a6a;font-family:var(--sans)!important;font-size:max(12px,calc(var(--n)*14));
}
.az-landing .news .news_item[hidden],
.az-landing .news .news_empty[hidden]{display:none}

/* ---- more ---- ปกติ #666 · hover #999 · ตัวหนา 18 ชิดขวาตรงกับวันที่ */
.az-landing .news .news_more{padding:calc(var(--n)*14.5) calc(var(--n)*10) 0 0}
.az-landing .news .news_more a{
  color:var(--ink-3);font-family:var(--sans)!important;font-size:max(13px,calc(var(--n)*18));font-weight:700;line-height:1.45;
  text-decoration:none;transition:color .2s;
}
.az-landing .news .news_more a:hover{color:#999}
.az-landing .news .news_more a:active{color:var(--ink-3)}

/* ---- banner: รูปปกข่าวล่าสุด เลื่อนด้วยลูกศร (รูปสำรอง 712x400 มุม 20) ---- */
.az-landing .news .news_visual{
  position:relative;margin:0;width:100%;aspect-ratio:712/400;
  border-radius:clamp(8px,calc(var(--n)*20),20px);overflow:hidden;
}
.az-landing .news .news_visual img{display:block;width:100%;height:100%;object-fit:cover}
.az-landing .news .news_slide{position:absolute;inset:0;display:block;opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s}
.az-landing .news .news_slide.is-on{opacity:1;visibility:visible}
.az-landing .news .news_visual.has-slides .news_fallback{visibility:hidden}
/* ลูกศร 33x34 ชิดขวาใต้แบนเนอร์ ห่างกัน 38 — ปกติ / hover / กด ใช้รูปตาม spec */
.az-landing .news .news_arrows{gap:calc(var(--n)*38);margin-top:calc(var(--n)*17)}
.az-landing .news .news_arrow{
  display:block;flex:0 0 auto;width:max(22px,calc(var(--n)*33));aspect-ratio:33/34;padding:0;border:0;
  background:url(../assets/news/btn_prev.png) 0 0/100% 100% no-repeat;cursor:pointer;
}
.az-landing .news .news_arrow--next{background-image:url(../assets/news/btn_next.png)}
.az-landing .news .news_arrow--prev:hover{background-image:url(../assets/news/btn_prev_hover.png)}
.az-landing .news .news_arrow--next:hover{background-image:url(../assets/news/btn_next_hover.png)}
.az-landing .news .news_arrow--prev:active{background-image:url(../assets/news/btn_prev_on.png)}
.az-landing .news .news_arrow--next:active{background-image:url(../assets/news/btn_next_on.png)}
.az-landing .news .news_arrow[disabled]{cursor:default}
.az-landing .news .news_arrow--prev[disabled]{background-image:url(../assets/news/btn_prev.png)}
.az-landing .news .news_arrow--next[disabled]{background-image:url(../assets/news/btn_next.png)}

/* ---- PC geometry (แยกไว้ใน media query ไม่ให้ไปกวนเลย์เอาต์มือถือ/แท็บเล็ต) ---- */
@media (min-width:992px){
  /* ขอบซ้าย 9.5 ขวา 30.5 = ทั้งชุดเยื้องซ้าย 10 ตามดีไซน์ (x212..1686 ไม่ใช่กึ่งกลางพอดี)
     padding บน-ล่างต่างกัน 44 → แถวกึ่งกลางที่ y562 ทำให้ NEWS อยู่ที่ y243 บนจอ 1080 */
  .az-landing .news .news_container{
    padding:clamp(88px,6vw,120px) calc(var(--n)*30.5) clamp(24px,3.7vw,72px) calc(var(--n)*9.5);
  }
  .az-landing .news .news_row{gap:calc(var(--n)*102);align-items:flex-start!important}
  .az-landing .news .news_left{width:calc(var(--n)*660);min-width:0;max-width:100%}
  /* ขอบบนแบนเนอร์อยู่เหนือเส้นบนของรายการ 3.5 (y430 กับ y433.5) = NEWS + 5 + แท็บ + 59 + 1 → 187 ที่จอ 1920
     คิดจากขนาดจริงของแต่ละชิ้น เพราะ NEWS / ตัวแท็บมีขนาดขั้นต่ำบนจอแคบ */
  .az-landing .news .news_right{
    width:calc(var(--n)*712);
    margin-top:calc(clamp(160px,calc(var(--n)*244),244px)*92/244 + max(14px,calc(var(--n)*24))*1.25 + var(--n)*65);
  }
  /* แถวข่าวสูง 79 · เส้นของ line.png อยู่กลางรูป จึงดึงรายการขึ้นไปทับขอบโปร่งของรูปเส้น
     ป้าย/หัวข้อเริ่มที่ x220 (ใน 8) วันที่จบที่ x861 (ใน 10) เส้นคั่นยาวเท่าเนื้อหา */
  .az-landing .news .news_list{
    min-height:calc(var(--n)*395);
    margin:calc(var(--n)*-9.2) calc(var(--n)*10) calc(var(--n)*1.2) calc(var(--n)*8);
  }
  .az-landing .news .news_item{height:calc(var(--n)*79)}
  .az-landing .news .news_item_btn{height:100%;padding:0;gap:0}
  .az-landing .news .news_tag.news_tag--text{height:calc(var(--n)*18);display:inline-flex;align-items:center}
}

/* entry animation, in step with the other sections */
.az-landing .fp__slide.is-in .news .news_left{animation:fadeUpSm 1s .2s both}
.az-landing .fp__slide.is-in .news .news_right{animation:fadeUpBig 1s .1s both}
.az-landing .fp__slide.is-in .news .news_title_mo{animation:fadeDownSm .8s both}

/* ไอคอนโซเชียล (fixed มุมขวาล่าง) อยู่บนพื้นสว่างของ News — ใช้สีเทา #c1c1c1 ตามดีไซน์ */
.az-landing[data-section="news"] .intro_sns .sns{background-color:#c1c1c1;opacity:1}
.az-landing[data-section="news"] .intro_sns .sns:hover{background-color:#8f9198}

/* header PC บนจอแคบ — ขนาดใน header เป็น px ตามดีไซน์ 1920 จึงย่อทั้งแถบลงเป็นขั้น ๆ ด้วย zoom
   (สัดส่วนทุกชิ้นคงเดิม ไม่ต้องไล่แก้ทีละค่า) */
@media (min-width:992px) and (max-width:1799.98px){ .az-landing .header--pc{zoom:.88;--hz:.88} }
@media (min-width:992px) and (max-width:1599.98px){ .az-landing .header--pc{zoom:.78;--hz:.78} }
@media (min-width:992px) and (max-width:1399.98px){ .az-landing .header--pc{zoom:.68;--hz:.68} }
@media (min-width:992px) and (max-width:1199.98px){ .az-landing .header--pc{zoom:.56;--hz:.56} }

/* short desktop screens — the news panel has to clear the fixed header */
@media (min-width:992px) and (max-height:820px){
  .az-landing .news{--row:clamp(44px,7.4vh,60px);--tabs-gap:clamp(20px,4vh,44px)}
  .az-landing .news .news_container{padding:120px calc(var(--n)*30.5) 24px calc(var(--n)*9.5)}
  .az-landing .news .news_title{width:clamp(140px,10vw,200px)}
  .az-landing .news .news_item{height:var(--row)}
  .az-landing .news .news_list{min-height:calc(var(--row)*5)}
  .az-landing .news .news_tabs{margin-bottom:var(--tabs-gap)}
  .az-landing .news .news_right{margin-top:calc(clamp(140px,10vw,200px)*92/244 + max(14px,calc(var(--n)*24))*1.25 + var(--tabs-gap) + var(--n)*6)}
}

/* =========================================================================
   FOOTER — เลื่อนขึ้นรอบสุดท้ายทั้งพีซีและมือถือ (แบบ JP)
   ========================================================================= */
.az-landing .footer_dim{display:none}
/* เลย์เอาต์/สี/ขนาดตัวอักษรอ้างอิง footer ของเว็บ JP (azurpromilia.jp) ที่จอ 1920:
     พื้น #141418 · แถวบน (FAQ / ลงทะเบียนล่วงหน้า) ขาว 13px ขีดเส้นใต้ · แถวเอกสาร #ccc 14px คั่นด้วยเส้นตั้ง · ลิขสิทธิ์ #ccc 12px บาง
     โลโก้ขวาสูง 46px เท่ากันทุกอัน คั่นด้วยเส้น 1x41 #ccc 50%
   --fz = 1px ของดีไซน์ 1920 ย่อตามความกว้างจอ (ไม่ต่ำกว่า 0.72) */
.az-landing .footer{
  --fz:clamp(.72px,.0521vw,1px);
  flex:0 0 auto;z-index:50;width:100%;background:#141418;
}
.az-landing .footer p{margin:0!important}
.az-landing .footer ul,
.az-landing .footer li{padding:0!important;float:none!important;list-style:none!important}
.az-landing .footer_inner{
  display:flex!important;align-items:center!important;justify-content:center!important;
  flex-direction:row!important;flex-wrap:nowrap;
  gap:calc(var(--fz) * 220);
  width:100%!important;max-width:none!important;
  min-height:calc(var(--fz) * 170);margin:0 auto!important;
  padding:calc(var(--fz) * 33) calc(var(--fz) * 40)!important;
  box-sizing:border-box;
}
.az-landing .footer_info{
  display:flex;flex-direction:column;align-items:flex-start;
  flex:0 1 auto;min-width:0;gap:16px;
}
.az-landing .footer_official,
.az-landing .footer_links{
  display:flex!important;align-items:center!important;flex-wrap:nowrap;margin:0!important;padding:0!important;
  list-style:none!important;
}
.az-landing .footer_official > li,
.az-landing .footer_links > li{
  position:relative;display:flex!important;width:auto!important;margin:0!important;padding:0!important;
  list-style:none!important;float:none!important;line-height:1.2;
}
.az-landing .footer_official{gap:20px}
.az-landing .footer_official a{
  color:#fff;font-family:var(--sans)!important;font-size:13px;font-weight:500;line-height:1.2;
  text-decoration:underline;text-underline-offset:3px;
}
.az-landing .footer_official a:hover{color:#fff;opacity:.85}
.az-landing .footer_links{gap:16px;white-space:nowrap}
.az-landing .footer_links_pipe{
  display:block!important;flex:0 0 auto;width:1px!important;height:12px!important;
  margin:0!important;padding:0!important;background:#ccc;
}
.az-landing .footer_links a,
.az-landing .footer_links button{
  color:#c8c8c8;font-family:var(--sans)!important;font-size:13px;font-weight:500;line-height:1.2;
  text-decoration:none;transition:color .3s;
}
.az-landing .footer_links a:hover,
.az-landing .footer_links button:hover{color:#fff}
.az-landing .footer .copyright{
  margin:0!important;color:#9a9a9a;
  font-family:var(--sans)!important;font-size:12px;font-weight:400;line-height:1.5;
}
@media (min-width:0px){
  .az-landing .footer_dim{
    display:block;position:fixed;inset:0;z-index:88;
    background:rgba(0,0,0,.55);
    opacity:0;pointer-events:none;visibility:hidden;
    transition:opacity .45s,visibility .45s;
  }
  .az-landing.is-footer-on .footer_dim{opacity:1;pointer-events:auto;visibility:visible}
  .az-landing .footer{
    position:fixed!important;left:0!important;right:0!important;bottom:0!important;z-index:90;
    width:100%!important;max-width:none!important;margin:0!important;
    transform:translateY(100%);
    transition:transform .45s cubic-bezier(.07,.43,.37,.97);
  }
  .az-landing.is-footer-on .footer{transform:none}
}
/* หน้าบทความและหมวดข่าวไม่โชว์ฟุตเตอร์ หน้า landing ยังเลื่อนขึ้นได้ตามเดิม
   az-news.css โหลดทีหลังและสั่งโชว์ตอน is-footer-on แต่ไม่ได้ตั้ง display จึงถูกกฎนี้ทับ */
body.single .az-landing .footer,
body.single-post .az-landing .footer,
body.category .az-landing .footer,
body.az-news-page .az-landing .footer,
body.single .az-landing .footer_dim,
body.single-post .az-landing .footer_dim,
body.category .az-landing .footer_dim,
body.az-news-page .az-landing .footer_dim{
  display:none!important;
}
/* โลโก้: Manjuu — PlayPark (แนวนอน) — Azur Promilia  สูงเท่ากัน ใช้ไฟล์ความละเอียด 2.5x ขึ้นไป */
.az-landing .footer_logos{display:flex;align-items:center;flex:0 0 auto}
.az-landing .footer .footer_logo{display:block;width:auto;max-width:none;height:calc(var(--fz) * 46);flex:0 0 auto}
.az-landing .footer_sep{display:block;flex:0 0 auto;width:1px;height:calc(var(--fz) * 41);margin:0 calc(var(--fz) * 22);background:#ccc;opacity:.5}
.az-landing .footer .logo_game{
  display:block;flex:0 0 auto;overflow:hidden;text-indent:-9999px;
  height:calc(var(--fz) * 56);aspect-ratio:228/120;
  background:var(--img-logo, url(../assets/i18n/en/e25/logo.png)) 50%/contain no-repeat;
}

/* WPBakery ล็อก .wpb-content-wrapper ที่ 540 / 720 / 960 / 1140 ตาม breakpoint
   specificity สูงกว่ากฎของปลั๊กอิน จึงชนะแม้ไฟล์นั้นโหลดทีหลัง */
html:has(.az-landing) .wpb-content--blank .wpb-content-wrapper{
  width:100%;max-width:none;margin-left:0;margin-right:0;
}

/* =========================================================================
   RESPONSIVE — below 992px still one-page: one swipe moves one section
   ========================================================================= */
@media (max-width:991.98px){
  html:has(.az-landing),
  html:has(.az-landing) body,
  html:has(.az-landing) #td-outer-wrap{
    height:100%!important;overflow:hidden!important;
  }
  /* แลนดิงอยู่ในคอลัมน์ของ Newspaper/WPBakery ซึ่งกว้างไม่เต็มจอและพื้นเป็นขาว
     ดึงกรอบนั้นให้เต็มจอ แล้วเอาพื้นขาวออก — ไม่งั้นที่ว่างใต้ฮีโร่เป็นพื้นธีม */
  html:has(.az-landing) .td-main-content-wrap,
  html:has(.az-landing) .td-container,
  html:has(.az-landing) .tdc-row,
  html:has(.az-landing) .tdc-row-composer,
  html:has(.az-landing) .td-pb-row,
  html:has(.az-landing) .td-ss-main-content,
  html:has(.az-landing) .td-main-content,
  html:has(.az-landing) .container,
  html:has(.az-landing) [class*="td-pb-span"],
  html:has(.az-landing) .vc_column_container,
  html:has(.az-landing) .vc_column_container > .vc_column-inner,
  html:has(.az-landing) .wpb_column,
  html:has(.az-landing) .wpb-content-wrapper,
  html:has(.az-landing) .wpb_text_column,
  html:has(.az-landing) .wpb_wrapper{
    width:100%!important;max-width:none!important;
    margin:0!important;padding:0!important;
    float:none!important;background:transparent!important;
  }
  .wpb_wrapper:has(> .az-landing) > p,
  .az-landing > p,
  .az-landing > br{display:none!important}
  .az-landing{width:100%;max-width:100%;background:#111}
  .az-landing .fp{position:fixed;inset:0;overflow:hidden;touch-action:pan-x}
  .az-landing .fp__wrap{height:100%}
  .az-landing .fp__slide{
    display:flex;flex-direction:column;
    height:100dvh!important;min-height:0!important;max-height:none!important;
    margin:0;overflow:hidden;background:#111;
  }
  .az-landing .stage{display:none}
  .az-landing .section{
    flex:1 0 auto;align-self:stretch;width:100%;
    height:100%!important;min-height:0!important;max-height:none!important;
    overflow:hidden;
  }
  .az-landing .intro .bg,
  .az-landing .intro .bg .bg_video,
  .az-landing .intro .bg .overlay,
  .az-landing .characters .bg,
  .az-landing .characters .bg .bg_item,
  .az-landing .kibo .bg,
  .az-landing .kibo .bg .bg_item{
    position:absolute!important;inset:0!important;
    width:100%!important;height:100%!important;
  }
  .az-landing .intro .bg .bg_video{object-fit:cover!important}

  /* ---- intro ---- */
  /* จอ 390: ชื่อเกมสูง ~105px ปุ่มลงทะเบียนสูง ~33px ชิดใต้ชื่อ กลุ่มอยู่ซ้ายล่างแบบเว็บ CN */
  .az-landing .intro{--fs: clamp(6px, 2.05vw, 15px)}
  .az-landing .intro .bg{background:#111 url(../assets/e25/m/main_bg.jpg) 50%/cover no-repeat}
  .az-landing .intro__content{bottom:clamp(36px,5.6vh,56px);padding-inline:1.5em}
  .az-landing .intro .title img{height:13.1em}
  .az-landing .intro .btns_wrap{margin-top:-4.15em}
  .az-landing .intro .btn_go_preregistration_wrap{font-size:1.18em;left:-0.35em}
  .az-landing .intro .btn_go_preregistration_wrap .btn_go_preregistraion{left:2.2em}
  /* มือถือไม่เล่นพื้นโปร่งของ webm — สลับเป็น apng ที่มีอัลฟาจริง แบบเว็บต้นฉบับ */
  .az-landing .intro .btn_go_preregistration_wrap video{display:none}
  .az-landing .intro .btn_go_preregistration_wrap .fx{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
  .az-landing .intro .btns_store{margin-top:-3.5em}
  .az-landing .intro .btns_store ul{gap:.75em}
  .az-landing .intro .icon-scroll{bottom:20px}
  .az-landing .intro .deco{display:none}

  /* ---- registration ---- */
  .az-landing .registration{padding:96px 0 56px}
  .az-landing .registration .event{
    position:relative;width:100%;height:auto;min-height:100dvh;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(var(--paper) 59.53%,rgba(234,235,224,.7) 82.54%,rgba(234,235,224,0));
  }
  .az-landing .registration .pattern{width:100%;background-size:cover}
  .az-landing .registration .register_container{
    position:relative;top:auto;left:auto;transform:none;
    width:calc(100% - 40px);min-width:300px;max-width:520px;gap:16px;
    margin:0 auto;padding:80px 0 40px;
  }
  .az-landing .registration .form_title{
    width:min(312px,86vw);height:auto;aspect-ratio:312/187;
    background-image:var(--img-reg-title-m, url(../assets/i18n/en/e25/m/reg_title.png));
  }
  .az-landing .registration .form{gap:12px}
  .az-landing .registration .form_store{gap:22px}
  .az-landing .registration .form_store label{gap:6px;font-size:14px}
  .az-landing .registration .form_store label .radio{width:20px;height:20px}
  .az-landing .registration .form_store label .radio::after{width:12px;height:12px}
  .az-landing .registration .form_phone{gap:6px}
  .az-landing .registration .input_box{height:46px;padding-left:16px;padding-right:5px}
  .az-landing .registration .input_box .input_wrap{width:100%}
  .az-landing .registration .input_box .num{margin-right:8px;font-size:18px}
  .az-landing .registration .input_box .input input{font-size:18px}
  .az-landing .registration .input_box .input .placeholder{font-size:14px}
  .az-landing .registration .form_terms{gap:8px;padding-right:3px}
  .az-landing .registration .form_terms .term_all{margin-bottom:4px;font-size:14px}
  .az-landing .registration .form_terms .btn_noti{gap:1px;width:85px;height:24px;font-size:12px}
  .az-landing .registration .form_terms .checkbox_wrap{font-size:13px}
  .az-landing .registration .form_terms .checkbox_wrap p{line-height:1.3}
  .az-landing .registration .btn_register{width:100%;height:64px}
  .az-landing .registration .btn_register::before{display:none}
  .az-landing .registration .btn_register .bg{
    background:url(../assets/e25/m/btn_register_bg.png) 50% 0/100% 100% no-repeat;
  }
  .az-landing .registration .btn_register:hover .bg{background-image:url(../assets/e25/m/btn_register_bg.png)}
  .az-landing .registration .btn_register .txt{width:175px;height:auto;aspect-ratio:198/53;background-size:contain}
  .az-landing .registration .btn_register .txt_bg{font-size:10px}

  /* ---- characters / kibo ---- */
  .az-landing .characters{overflow:hidden;background:#f7f7f7}
  .az-landing .kibo{overflow:hidden}
  /* รูปตัวละครสูงเท่าจอแรก — ข้อความยาวแล้ว section ยืดลง พื้นขาวต่อด้านล่าง ไม่ให้รูปยืดทับข้อความ */
  .az-landing .characters .bg,
  .az-landing .characters .bg .bg_item{
    top:0!important;bottom:auto!important;height:100dvh!important;
  }
  .az-landing .characters .contents,.az-landing .kibo .contents{
    position:relative;top:auto;left:auto;width:100%;height:auto;min-height:100dvh;
    transform:none;pointer-events:auto;
  }
  .az-landing .characters .tales_container,.az-landing .kibo .tales_container{position:relative;inset:auto;width:100%;height:auto;min-height:100dvh}
  /* ข้อความอยู่ในช่วงเฟดท้ายตัวละคร แบบเว็บอ้างอิง — ไม่ตัดขอบขาวแข็ง และไม่ดันลงไปกองบนพื้นขาว
     เนื้อหายาวจะดันแถบรูปย่อลง ไม่ดันข้อความขึ้น */
  .az-landing .characters .tales_container{
    display:flex;flex-direction:column;box-sizing:border-box;
    padding-top:clamp(160px, calc(100dvh - 63vw - 56px), 68dvh);
  }
  .az-landing .characters .tales_container::after{
    content:"";position:absolute;top:40dvh;bottom:0;left:0;width:100%;height:auto;z-index:0;pointer-events:none;
    background-image:linear-gradient(to bottom,
      rgba(247,247,247,0) 0,
      rgba(247,247,247,.12) 8dvh,
      rgba(247,247,247,.4) 16dvh,
      rgba(247,247,247,.72) 24dvh,
      rgba(247,247,247,.92) 30dvh,
      #f7f7f7 36dvh,
      #f7f7f7 100%);
    background-repeat:no-repeat;
  }
  .az-landing .kibo .tales_container::after{display:none}
  .az-landing .characters .pattern,.az-landing .kibo .motion_container,.az-landing .kibo .tab{display:none!important}

  .az-landing .characters .bg .bg_item[data-key=anais]{background-image:url(../assets/e26/m/char/char_bg_anais.jpg)}
  .az-landing .characters .bg .bg_item[data-key=cathbelle]{background-image:url(../assets/e26/m/char/char_bg_cathbelle.jpg)}
  .az-landing .characters .bg .bg_item[data-key=symphoria]{background-image:url(../assets/e26/m/char/char_bg_symphoria.jpg)}
  .az-landing .characters .bg .bg_item[data-key=terara]{background-image:url(../assets/e26/m/char/char_bg_terara.jpg)}
  .az-landing .characters .bg .bg_item[data-key=metsa]{background-image:url(../assets/e26/m/char/char_bg_metsa.jpg)}
  /* e27/m = ชุดเดียวกับ e26/m แต่ชื่อ kibo เป็นตัวหนาแบบจอใหญ่ (e27/kibo/*_text.png) ตามเว็บอ้างอิง แทนตัวบางเดิม */
  .az-landing .kibo .bg .bg_item[data-key=staray]{background-image:url(../assets/e27/m/kibo/char_bg_staray.png)}
  .az-landing .kibo .bg .bg_item[data-key=downy]{background-image:url(../assets/e27/m/kibo/char_bg_downy.png)}
  .az-landing .kibo .bg .bg_item[data-key=cabbird]{background-image:url(../assets/e27/m/kibo/char_bg_cabbird.png)}
  .az-landing .kibo .bg .bg_item[data-key=bluda]{background-image:url(../assets/e27/m/kibo/char_bg_bluda.png)}
  .az-landing .kibo .bg .bg_item[data-key=vespervamp]{background-image:url(../assets/e27/m/kibo/char_bg_vespervamp.png)}

  .az-landing .kibo .slide_container{
    position:absolute;top:auto;bottom:27vw;left:50%;transform:translateX(-50%);
    width:94.1667%;height:auto;min-height:38vw;z-index:4;
  }
  .az-landing .characters .slide_container{
    position:relative;top:auto;bottom:auto;left:auto;transform:none;
    width:94.1667%;height:auto;min-height:0;margin:0 auto;z-index:4;flex:0 0 auto;
  }
  /* สไลด์ที่ไม่ได้เลือกซ้อนทับ — สไลด์ที่เลือกอยู่ในโฟลว์ จึงดันแถบรูปย่อลงเมื่อข้อความยาว */
  .az-landing .characters .tales_slide{position:absolute;top:0;bottom:auto;left:0;width:100%}
  .az-landing .characters .tales_slide.is-active{position:relative;top:auto;bottom:auto}
  .az-landing .kibo .slide_item{position:absolute;top:0;left:0;width:100%}

  /* ตัวละคร: คอลัมน์ซ้าย = ชื่อ + ฝ่าย, คอลัมน์ขวา = CHARACTER VOICE แถวเดียวกัน */
  .az-landing .characters .title{
    display:flex;flex-direction:row;align-items:center;justify-content:space-between;
    gap:2vw;width:100%;margin-bottom:2.6vw;
  }
  .az-landing .kibo .slide_item .title{
    display:flex;flex-direction:row;justify-content:space-between;
    margin-bottom:9vw;
  }
  /* หัวข้อ "CHARACTER VOICE" ย้ายไปติดกับปุ่มเสียงพากย์ (voice_wrapper::before) */
  .az-landing .characters .title::after{display:none}
  .az-landing .characters .title .world_bg{display:none}
  .az-landing .characters .title .name{
    display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
    gap:1.2vw;width:auto;flex:1 1 auto;min-width:0;max-width:56%;
    height:auto;padding:0;margin:0;font-size:5vw;line-height:1.05;
  }
  .az-landing .kibo .slide_item .title .name{
    display:flex;align-items:center;gap:3px;
    padding:0;margin:0;font-size:5.6vw;max-width:60vw;
  }
  .az-landing .characters .title .name h2{
    letter-spacing:.02em;min-width:0;max-width:100%;line-height:inherit;
    overflow:hidden;text-overflow:ellipsis;
  }
  /* มือถือ: h2 อยู่บนสุดของกล่องชื่อ — วางชื่อละตินเหนือกล่อง */
  .az-landing .characters .title .name::before{bottom:100%}
  .az-landing .kibo .slide_item .title .name h2{min-width:0;padding-top:0}
  .az-landing .kibo .slide_item .title .name .symbol{position:static;width:9vw;margin:0 0 0 2vw;flex:0 0 auto}
  .az-landing .characters .title .world{
    position:static;margin:0;gap:1.4vw;
    width:fit-content;max-width:100%;min-width:0;
    flex:0 1 auto;
    min-height:0;padding:.7vw 2.6vw;border-radius:4vw;font-size:3.15vw;
  }
  .az-landing .characters .title .world .txt{height:auto;padding:0;white-space:nowrap}
  .az-landing .characters .title .world.type_1 .ico{width:3.9vw;height:4.9vw}
  .az-landing .characters .title .world.type_2 .ico{width:3.9vw;height:4.3vw}
  .az-landing .characters .title .world.type_3 .ico{width:2.5vw;height:5.5vw;top:-.25vw}
  .az-landing .kibo .slide_item .title .type{
    position:absolute;top:7.6vw;left:0;margin:0;
    min-width:30.5vw;height:5vw;border-radius:3.3vw;font-size:3.3vw;
  }
  .az-landing .kibo .slide_item .title .type span{height:3.6vw}

  .az-landing .characters .voice_wrapper{
    position:static;width:auto;max-width:44%;margin:0 0 0 auto;
    flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end;align-content:center;
    gap:.8vw 2.2vw;
  }
  .az-landing .characters .voice_wrapper::before{
    content:"";flex:0 0 100%;height:2.5vw;
    background:var(--img-ico-sound-txt, url(../assets/i18n/en/e26/char/ico_sound_txt.png)) 100% 50%/auto 100% no-repeat;
  }
  .az-landing .characters .voice{top:0;height:5.6vw;padding-right:3.5vw}
  .az-landing .characters .voice:last-child{padding-right:0}
  .az-landing .characters .voice::after{height:2.5vw}
  .az-landing .characters .voice span{font-size:2.8vw}
  .az-landing .characters .voice .sound-icon{width:5.6vw;height:5.6vw}
  .az-landing .characters .voice .sound-icon-body{gap:.28vw;width:2.5vw;height:2.2vw}
  .az-landing .characters .voice .sound-icon-body .line1{width:.28vw;height:.83vw}
  .az-landing .characters .voice .sound-icon-body .line2{width:.28vw;height:1.25vw}
  .az-landing .characters .voice .sound-icon-body .line3{width:.28vw;height:2.2vw}

  .az-landing .characters .desc{font-size:3.34vw;line-height:1.45;min-height:0;width:auto;min-width:0;max-width:none}
  .az-landing .kibo .desc{font-size:3.34vw;line-height:1.45;min-height:19.5vw;width:auto}

  .az-landing .navigator,.az-landing .kibo .navigator{
    position:absolute;left:0;right:auto;bottom:2.5vw;width:100%;height:21.8vw;
    padding:0 2.9vw;animation:none;
  }
  .az-landing .characters .navigator{
    position:relative;left:auto;right:auto;bottom:auto;width:100%;height:21.8vw;
    margin:3vw 0 2.5vw;padding:0 2.9vw;animation:none;flex:0 0 auto;
  }
  .az-landing .navigator .pagination{width:77.5vw;top:0}
  .az-landing .tales_pg_bullet{width:19.3vw;height:19.3vw}
  .az-landing .tales_pg_bullet img{width:16.1vw}
  .az-landing .tales_pg_bullet .dim{width:16.1vw;height:16.1vw;font-size:3.6vw}
  .az-landing .tales_pg_bullet .circle{width:16.1vw;height:16.1vw}
  .az-landing .tales_pg_bullet.is-active{width:21vw;height:21.8vw}

  /* ---- worlds ---- */
  .az-landing .worlds{min-height:100dvh;overflow:hidden}
  .az-landing .worlds::after{
    content:"";position:absolute;bottom:0;left:0;right:0;height:154px;z-index:0;display:block;
    background:linear-gradient(.7deg,#3b3630 41.6%,rgba(59,54,48,.4) 69.5%,rgba(59,54,48,0) 99.34%);
    pointer-events:none;
  }
  .az-landing .worlds .content{
    position:absolute;top:0;left:0;transform:none;
    width:100%;height:100%;min-height:720px;overflow:hidden;
    cursor:auto;touch-action:auto;
    -webkit-mask-image:linear-gradient(90deg,transparent,#3b3630 10% 90%,transparent);
    mask-image:linear-gradient(90deg,transparent,#3b3630 10% 90%,transparent);
  }
  /* the map fills the section box — the hot spots are positioned against it */
  .az-landing .worlds .worlds_bg{position:absolute;top:0;left:0;transform:none;width:100%;height:100%}
  .az-landing .worlds .worlds_bg img{width:100%;height:100%;max-width:100%}
  .az-landing .worlds .btn_map .name{padding:1.25vw 3.3vw 1.1vw;font-size:12px;font-weight:700;line-height:1.4;-webkit-text-stroke-width:3px}

  /* สมุดด้านล่างแผนที่ไม่มีบนเว็บอ้างอิงมือถือ */
  .az-landing .worlds .btn_note{display:none}
  .az-landing .worlds::after{display:none}

  .az-landing .worlds .cloud{display:none}
  .az-landing .worlds .icon_drag{display:none}

  /* ---- news ---- */
  /* พื้น #f7f7f7 + ลายทแยง (切图用平铺纹理 底色:f7f7f7) — ดีไซน์ H5 เป็น @2x จึงปูลายที่ครึ่งขนาดไฟล์ */
  .az-landing .news{background:#f7f7f7 url(../assets/news/news_texture.png) 0 0/10px 5px repeat}
  .az-landing .news::before{height:66.7vw;background:url(../assets/news/news_bg_m.png) 50% 0/100% auto no-repeat}
  .az-landing .news::after{bottom:4vw;left:4.3vw;width:32.8vw}
  .az-landing .news .news_right{margin-top:0}
  .az-landing .news .news_container{padding:84px 22px 44px}
  .az-landing .news .news_row{gap:0}
  .az-landing .news .news_left,.az-landing .news .news_right{width:100%}
  .az-landing .news .news_right{margin-bottom:22px}
  .az-landing .news .news_visual{border-radius:6px}
  .az-landing .news .news_tabs{gap:0;margin:0 0 12px}
  .az-landing .news .news_tab{padding:2px 8px;font-size:15px}
  .az-landing .news .news_tab_sep{height:11px}
  .az-landing .news .news_rule{margin:6px 0}
  .az-landing .news .news_title_mo{white-space:nowrap}
  .az-landing .news .news_tabs{flex-wrap:nowrap;justify-content:space-between}
  .az-landing .news .news_tab{padding:2px 6px;font-size:clamp(11px,3.3vw,15px)}
  .az-landing .news .news_item_btn{
    flex-wrap:nowrap;gap:8px;padding:10px 0;
    align-items:center!important;
  }
  .az-landing .news .news_tag.news_tag--text{height:auto;padding:0 4px;font-size:11px;line-height:1.45}
  .az-landing .news .news_item_title{margin-left:0}
  /* ลำดับแท็บ ล่าสุด | ข่าว | ประกาศ | กิจกรรม มาจาก markup แล้ว (เหมือนกันทั้ง PC / มือถือ และหน้ารวมข่าว) */
  .az-landing .news .news_item_date{order:0;margin-left:8px;font-size:11px;white-space:nowrap}
  .az-landing .news .news_item_title{
    order:0;flex:1 1 auto;min-width:0;white-space:nowrap;
    display:block;overflow:hidden;text-overflow:ellipsis;
    -webkit-line-clamp:unset;-webkit-box-orient:unset;
    font-size:13px;line-height:1.3;
  }
  .az-landing .news .news_more a{font-size:12.5px}

  /* ---- footer ---- */
  /* จอเล็ก: เรียงลงมากึ่งกลาง ลิงก์อยู่บน โลโก้อยู่ล่าง */
  .az-landing .footer{--fz:1px}
  .az-landing .footer_inner{
    flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:22px;
    width:min(560px,100% - 40px)!important;min-height:0;padding:28px 0 32px!important;text-align:center;
  }
  .az-landing .footer_info{display:flex;flex-direction:column;align-items:center;gap:16px}
  .az-landing .footer_official,.az-landing .footer_links{justify-content:center}
  .az-landing .footer_official{gap:20px}
  .az-landing .footer_links{gap:16px;white-space:normal}
  .az-landing .footer .copyright{line-height:1.5}
  .az-landing .footer .footer_logo{height:26px}
  .az-landing .footer_sep{height:24px;margin:0 10px}
  .az-landing .footer .logo_game{height:34px}
}

/* phones — the map is drawn on a fixed 360x517 board with the small-screen art */
@media (max-width:767.98px){
  /* ตำแหน่งวัดจากเว็บ CN ที่จอ 390 — แปลงเป็น vw เพื่อคงสัดส่วน */
  .az-landing .worlds .btn_area_wrap{
    width:100%;min-width:0;height:100%;
    top:0;left:0;transform:none;
  }
  .az-landing .worlds .btn_map .name{bottom:auto;top:100%;padding:1px 6px 0;font-size:11px;line-height:1.2;-webkit-text-stroke-width:3px}
  .az-landing .worlds .btn_map .visual .dot{width:3.6vw;height:3.8vw}
  .az-landing .worlds .btn_area_1{width:45.4vw;height:45.4vw;top:29.7vw;left:21vw}
  .az-landing .worlds .btn_area_1 .visual{background-image:url(../assets/e26/m/worlds/worlds_area_1.png)}
  .az-landing .worlds .btn_area_2{width:30.3vw;height:30.3vw;top:64.6vw;left:1.3vw}
  .az-landing .worlds .btn_area_2 .visual{background-image:url(../assets/e26/m/worlds/worlds_area_2.png)}
  .az-landing .worlds .btn_area_3{width:45.9vw;height:45.9vw;top:114.9vw;left:41vw}
  .az-landing .worlds .btn_area_3 .visual{background-image:url(../assets/e26/m/worlds/worlds_area_3.png)}
  .az-landing .worlds .btn_area_4{width:32.1vw;height:32.1vw;top:78.2vw;left:35.1vw}
  .az-landing .worlds .btn_area_4 .visual{background-image:url(../assets/e26/m/worlds/worlds_area_4.png)}
  .az-landing .worlds .btn_kibo_1{width:12.3vw;height:14.4vw;top:44.6vw;left:7.9vw}
  .az-landing .worlds .btn_kibo_1 .visual{background-image:url(../assets/e26/m/worlds/worlds_kibo_1.png)}
  .az-landing .worlds .btn_kibo_2{width:15.9vw;height:16.9vw;top:74.9vw;left:66.7vw}
  .az-landing .worlds .btn_kibo_2 .visual{background-image:url(../assets/e26/m/worlds/worlds_kibo_2.png)}
  .az-landing .worlds .btn_lebe{width:29.2vw;height:20.3vw;top:22.8vw;left:62.3vw}
  .az-landing .worlds .btn_lebe .visual{background-image:url(../assets/e26/m/worlds/worlds_lebe.png)}
}

/* =========================================================================
   PHONES — ขนาด / สัดส่วน / ตำแหน่ง ตามเว็บอ้างอิงมือถือ (azurpromilia.manjuu.com/home/)
   เว็บอ้างอิงวางทุกชิ้นบนจอกว้าง 375 แล้วย่อ/ขยายตามความกว้างจอ (1rem = 100vw / 7.5)
   --u = 1px ของจอ 375 → เลขที่คูณ --u ในบล็อกนี้คือค่าที่วัดจากเว็บอ้างอิงที่ 375x812 ตรง ๆ
   intro / ตัวละคร / kibo ยึดขอบล่างจอเหมือนเว็บอ้างอิง (ค่า "จากขอบล่าง" คงที่ทุกความสูงจอ)
   ========================================================================= */
@media (max-width:767.98px){
  .az-landing{--u:calc(100vw / 375)}

  /* ---- section แรก (header + intro) — พิกัดตามรูปดีไซน์มือถือแยก 5 ภาษา (th / en / zh / id / vn) ----
     วัดจากรูปดีไซน์ด้วยการวางไฟล์รูปจริงของเว็บทับแล้วหาตำแหน่งที่ตรงที่สุด แปลงเป็นหน่วย --u (จอ 375)
     ค่าที่ต่างกันแต่ละภาษาเก็บเป็นตัวแปร (ชุดล่างสุดของ section นี้) — ต้องขยับอะไรแก้ที่ตัวแปรภาษานั้นที่เดียว
       --hb --hb-gap  ปุ่มลงทะเบียน header: ความกว้าง / ระยะถึงปุ่มเมนู
       --hl         ขนาดตัวอักษรบนปุ่มลงทะเบียน header (ความกว้างข้อความเท่าดีไซน์)
       --t-x --t-h --t-fb   ชื่อเกม: ขอบซ้าย / ความสูงรูป / ขอบล่างของรูปห่างจากขอบล่างจอ
       --p-x --p-fb         ปุ่มเล่นวิดีโอ: จุดกึ่งกลาง x / ห่างจากขอบล่างจอ
       --l-x --l-fb --l-h   ป้ายคำบนปุ่มลงทะเบียนใหญ่: จุดกึ่งกลาง x / กึ่งกลางห่างจากขอบล่างจอ / ความสูงรูป
     ทุกชิ้นใน intro ยึดขอบล่างจอ (ค่า fb คงที่ทุกความสูงจอ) แบบเว็บอ้างอิง */

  /* header: สูง 60 ทุกชิ้นกึ่งกลางที่ y≈33 · โลโก้ 80.5x42.3 (x 14.6) · ปุ่มลงทะเบียน 132x56 (x 188.5, zh 120x51 x 189)
     · ปุ่มเมนู 28x28 (กึ่งกลาง x 344.5) */
  .az-landing .header--mo{height:calc(var(--u)*60);padding:calc(var(--u)*6) calc(var(--u)*16.5) 0 calc(var(--u)*14.6)}
  .az-landing .header--mo .logo{width:calc(var(--u)*80.5);height:calc(var(--u)*42.3);background-position:0 50%}
  .az-landing .header--mo .right{gap:calc(var(--u)*var(--hb-gap))}
  .az-landing .header--mo .btn_go_preregistraion{width:calc(var(--u)*var(--hb))}
  .az-landing .header--mo .btn_menu{width:calc(var(--u)*28);height:calc(var(--u)*28)}
  /* ข้อความอยู่ในช่องมืดของกรอบ (กึ่งกลาง x 62.6% · กว้างสุด 52% ของกรอบ) — ขนาดตัวอักษรต่อภาษาที่ --hl
     ถ้ายังยาวเกินช่อง main.js (fitHeaderPreregLabel) ย่อลงอีกจนพอดี ไม่ล้นกรอบ
     opsz 27 = Sitka แบบ Banner (ตัวแคบกว่าแบบปกติ ~17%) */
  .az-landing .header--mo .btn_go_preregistraion .label,
  html[data-lang] .az-landing .header--mo .btn_go_preregistraion .label{
    top:50%;left:62.6%;width:52%;
    font-size:calc(var(--u)*var(--hl,11));letter-spacing:0;color:#fdfeff;
    font-variation-settings:"opsz" 27;
    text-shadow:0 0 5px #4b73e8,0 0 5px #4b73e8;
  }
  /* ปุ่มเปิด/ปิดเพลง ใต้โลโก้ 22x22 ที่ (18, 65) — ติดอยู่กับ header จึงเห็นทุก section แบบเว็บอ้างอิง */
  .az-landing .header--mo .btn_sound_mo{left:calc(var(--u)*18);top:calc(var(--u)*65);width:calc(var(--u)*22);height:calc(var(--u)*22)}

  /* intro: เงาดำไล่จากล่างขึ้นบน สูง 362 ยึดขอบล่างจอ ให้ชื่อเกม/ปุ่มอ่านชัดบนวิดีโอ
     ค่าความทึบเท่ารูป mask_bottom ของเว็บอ้างอิง (0 → ~65% ที่ขอบล่าง ไล่แบบค่อย ๆ เข้ม)
     รูป bg_movieCover.png เป็นเงาของจอ PC (มุมซ้ายล่าง) — บนมือถือเหลือแค่แถบกลาง เลยปิดไว้ ไม่ให้เงาซ้อนกัน */
  .az-landing .intro .bg .overlay{display:none}
  .az-landing .intro .bg::after{
    content:"";position:absolute;left:0;right:0;bottom:0;z-index:2;
    height:calc(var(--u)*362);pointer-events:none;
    background:linear-gradient(to bottom,
      rgba(0,0,0,0) 0,
      rgba(0,0,0,.02) 20%,
      rgba(0,0,0,.035) 30%,
      rgba(0,0,0,.067) 40%,
      rgba(0,0,0,.122) 50%,
      rgba(0,0,0,.192) 60%,
      rgba(0,0,0,.314) 70%,
      rgba(0,0,0,.486) 80%,
      rgba(0,0,0,.608) 90%,
      rgba(0,0,0,.647) 95%,
      rgba(0,0,0,.62) 100%);
  }

  /* intro: กล่องเนื้อหาชิดขอบซ้ายจอ ขอบล่างอยู่ที่ขอบล่างกรอบปุ่ม (54.6 จากขอบล่างจอ) */
  .az-landing .intro__content{bottom:calc(var(--u)*54.6);padding:0}
  .az-landing .intro .title{margin-left:calc(var(--u)*var(--t-x))}
  .az-landing .intro .title img{
    width:auto;height:calc(var(--u)*var(--t-h));max-width:none;max-height:none;
  }
  /* ปุ่มเล่นวิดีโอ 45x45 วางด้วยจุดกึ่งกลางเทียบขอบล่างจอ (กล่องอ้างอิงคือกรอบชื่อเกม จึงลบตำแหน่งชื่อเกมออก) */
  .az-landing .intro .btn_video,
  html[data-lang] .az-landing .intro .btn_video{
    top:auto;transform:none;height:calc(var(--u)*45);
    left:calc(var(--u)*(var(--p-x) - 22.5 - var(--t-x)));
    bottom:calc(var(--u)*(var(--p-fb) - 22.5 - var(--t-fb)));
  }
  /* กรอบปุ่ม btn_go_bottom.png 428x198 แสดงที่ 214.6x99.3 ชิดซ้ายจอ → ขอบบนกรอบอยู่ที่ 153.9 จากขอบล่างจอ
     ขอบล่างของชื่อเกมห่างขึ้นไปตาม --t-fb */
  .az-landing .intro .btns_wrap{margin-top:calc(var(--u)*(var(--t-fb) - 153.9))}
  .az-landing .intro .btn_go_preregistration_wrap{
    left:0;width:calc(var(--u)*214.6);height:calc(var(--u)*99.3);font-size:inherit;
  }
  /* ป้ายคำ: กล่องกว้าง 130 กึ่งกลางที่ --l-x · รูปสูง --l-h (กว้างตามสัดส่วนไฟล์ของภาษานั้น) */
  .az-landing .intro .btn_go_preregistration_wrap .btn_go_preregistraion,
  html[data-lang] .az-landing .intro .btn_go_preregistration_wrap .btn_go_preregistraion{
    top:auto;left:calc(var(--u)*(var(--l-x) - 65));width:calc(var(--u)*130);
    bottom:calc(var(--u)*(var(--l-fb) - var(--l-h) / 2 - 54.6));height:calc(var(--u)*var(--l-h));
    background-position:50% 50%;background-size:auto 100%;
  }
  /* ลูกศรเลื่อนลง: กว้าง 28 ปลายลูกศรอยู่ ~23 จากขอบล่างจอ */
  .az-landing .intro .icon-scroll{bottom:calc(var(--u)*19);width:calc(var(--u)*28);height:calc(var(--u)*27)}
  .az-landing .intro .icon-scroll .icon{background-size:contain}

  /* ค่าต่อภาษา — en เป็นค่าเริ่มต้น */
  .az-landing{
    --hb:132; --hb-gap:10;
    --hl:10;
    --t-x:5.5;  --t-h:90.2; --t-fb:136.3;
    --p-x:139.3; --p-fb:242;
    --l-x:129.25; --l-fb:103.4; --l-h:24.4;
  }
  html[data-lang="th"] .az-landing{
    --hl:12.3;
    --t-x:7.5;  --t-h:94.7; --t-fb:135.9;
    --p-x:138.7; --p-fb:241.3;
    --l-x:130.35; --l-fb:102.15; --l-h:28.1;
  }
  html[data-lang="id"] .az-landing{
    --hl:14.8;
    --t-x:13.1; --t-h:92.7; --t-fb:137.5;
    --p-x:138; --p-fb:242.7;
    --l-x:127.8; --l-fb:104.3; --l-h:27.2;
  }
  html[data-lang="vn"] .az-landing{
    --hl:10.1;
    --t-x:9.4;  --t-h:95.2; --t-fb:138.3;
    --p-x:138; --p-fb:241.3;
    --l-x:129.5; --l-fb:103.25; --l-h:26.5;
  }
  /* zh = เว็บอ้างอิงจริง (ปุ่ม header เล็กกว่า · ชื่อเกม/ปุ่มเล่นอยู่ต่ำกว่าภาษาอื่น ~20) */
  html[data-lang="zh"] .az-landing{
    --hb:120; --hb-gap:21.5;
    --hl:11;
    --t-x:11.5; --t-h:96.6; --t-fb:135.3;
    --p-x:133.3; --p-fb:223.3;
    --l-x:117.75; --l-fb:103.4; --l-h:28.2;
  }

  /* ---- ตัวละคร / kibo: แถบรูปย่อ ----
     รูปย่อ 87x87 วงในเท่ากันทุกรูป (วงของรูป active ใหญ่กว่า 151/139 ตามไฟล์) · ลูกศร 13x17 ชิดขอบซ้ายขวา 20 */
  .az-landing .navigator,
  .az-landing .kibo .navigator,
  .az-landing .characters .navigator{height:calc(var(--u)*87);padding:0 calc(var(--u)*20)}
  .az-landing .navigator .pagination{width:calc(var(--u)*270);height:calc(var(--u)*100);top:0}
  .az-landing .tales_pg_bullet{width:calc(var(--u)*87);height:calc(var(--u)*87)}
  .az-landing .tales_pg_bullet img,
  .az-landing .tales_pg_bullet .dim,
  .az-landing .tales_pg_bullet .circle{width:calc(var(--u)*72.6);height:calc(var(--u)*72.6)}
  .az-landing .tales_pg_bullet.is-active{width:calc(var(--u)*94.5);height:calc(var(--u)*98.3)}
  /* สไปรต์ tales_btn_arrow.png เป็นรูป 2x — แสดงครึ่งหนึ่ง ได้ลูกศร 13x17 เท่าเว็บอ้างอิง
     ปุ่มเล็กจึงขยายพื้นที่กดด้วย ::before (ไม่ขยับตำแหน่งลูกศร) */
  .az-landing .navigator .btn_nav{
    position:relative;overflow:visible;
    width:calc(var(--u)*13);height:calc(var(--u)*17.5);
    background-size:calc(var(--u)*60) calc(var(--u)*66);
  }
  .az-landing .navigator .btn_nav::before{content:"";position:absolute;inset:-12px -14px}
  .az-landing .navigator .btn_prev,
  .az-landing .navigator .btn_prev:hover{background-position:calc(var(--u)*-10) calc(var(--u)*-14)}
  .az-landing .navigator .btn_next,
  .az-landing .navigator .btn_next:hover{background-position:calc(var(--u)*-37) calc(var(--u)*-14)}

  /* ---- ตัวละคร: ยึดขอบล่าง — หัวข้อ 45 · เว้น 12 · คำบรรยาย (จอง 3 บรรทัด) · เว้น 12 · รูปย่อ 87 · ขอบล่าง 25 ----
     แถวหัวข้อ: คอลัมน์ซ้าย = ชื่อ + ป้ายฝ่าย, คอลัมน์ขวา = CHARACTER VOICE (แถวเดียวกัน) */
  .az-landing .characters .tales_container{justify-content:flex-end;padding:0 0 calc(var(--u)*25)}
  .az-landing .characters .tales_container::after{display:none}
  .az-landing .characters .slide_container{width:calc(100% - var(--u)*40)}
  /* พื้นขาวไล่จางใต้ตัวละคร (เว็บอ้างอิง: เริ่มจาง 28 เหนือหัวข้อ ทึบเต็มที่ 106 ใต้หัวข้อ) — ติดไปกับหัวข้อ
     คำบรรยายยาวแล้วหัวข้อขยับขึ้น พื้นจางก็ขยับตาม ตัวหนังสือไม่ลอยบนรูป */
  .az-landing .characters .slide_container::before{
    content:"";position:absolute;z-index:-1;left:50%;width:100vw;transform:translateX(-50%);
    top:calc(var(--u)*-28);bottom:calc(var(--u)*-260);pointer-events:none;
    background:linear-gradient(to bottom,
      rgba(247,247,247,0) 0,
      rgba(247,247,247,.35) calc(var(--u)*27),
      rgba(247,247,247,.75) calc(var(--u)*60),
      rgba(247,247,247,.93) calc(var(--u)*94),
      #f7f7f7 calc(var(--u)*134));
  }
  .az-landing .characters .title{align-items:flex-end;gap:calc(var(--u)*8);min-height:calc(var(--u)*45);margin-bottom:calc(var(--u)*12)}
  .az-landing .characters .title .name{gap:calc(var(--u)*5);max-width:none;font-size:calc(var(--u)*21);line-height:1.1}
  .az-landing .characters .title .world{
    gap:calc(var(--u)*4);min-height:calc(var(--u)*19);padding:calc(var(--u)*1) calc(var(--u)*9) calc(var(--u)*1) calc(var(--u)*7);
    border-radius:calc(var(--u)*10);font-size:calc(var(--u)*11);line-height:calc(var(--u)*17);
  }
  .az-landing .characters .title .world.type_1 .ico{width:calc(var(--u)*10);height:calc(var(--u)*12.5)}
  .az-landing .characters .title .world.type_2 .ico{width:calc(var(--u)*10);height:calc(var(--u)*11)}
  .az-landing .characters .title .world.type_3 .ico{width:calc(var(--u)*6.5);height:calc(var(--u)*14);top:0}
  /* CHARACTER VOICE: ปุ่มเสียง 2 ปุ่ม (ไอคอน 20 + ตัวอักษร 12) คั่นด้วยเส้น 1x9 · ลายตัวอักษรจาง ๆ ซ้อนอยู่เหนือปุ่ม */
  .az-landing .characters .voice_wrapper{
    position:relative;flex-wrap:nowrap;align-self:flex-end;max-width:none;
    gap:0 calc(var(--u)*18);margin:0 0 calc(var(--u)*8) auto;padding-top:0;
  }
  .az-landing .characters .voice_wrapper::before{
    position:absolute;top:calc(var(--u)*-9);right:0;z-index:0;flex:none;
    width:calc(var(--u)*153);height:calc(var(--u)*13);pointer-events:none;
    background-position:100% 50%;background-size:contain;
  }
  .az-landing .characters .voice{height:calc(var(--u)*19.5);gap:calc(var(--u)*5);padding-right:calc(var(--u)*18)}
  .az-landing .characters .voice:last-child{padding-right:0}
  .az-landing .characters .voice::after{width:1px;height:calc(var(--u)*9);background:#666}
  .az-landing .characters .voice span{font-size:calc(var(--u)*12)}
  .az-landing .characters .voice .sound-icon{width:calc(var(--u)*20);height:calc(var(--u)*19.5)}
  .az-landing .characters .voice .sound-icon-body{gap:calc(var(--u)*1);width:calc(var(--u)*9);height:calc(var(--u)*6)}
  .az-landing .characters .voice .sound-icon-body .line1{width:calc(var(--u)*1);height:calc(var(--u)*2)}
  .az-landing .characters .voice .sound-icon-body .line2{width:calc(var(--u)*1);height:calc(var(--u)*4)}
  .az-landing .characters .voice .sound-icon-body .line3{width:calc(var(--u)*1);height:calc(var(--u)*6)}
  .az-landing .characters .desc{font-size:calc(var(--u)*12);line-height:calc(var(--u)*17);min-height:calc(var(--u)*51)}
  .az-landing .characters .navigator{margin:calc(var(--u)*12) 0 0}

  /* ---- kibo ----
     กรอบรูปเล็กสองช่องทางขวาฝังอยู่ในรูปพื้นหลัง (char_bg_*.png 1440 จัตุรัส) ที่ x 834–1027, y 975–1066 ของรูป
     (กึ่งกลางแนวตั้ง 70.9%, ขอบซ้ายห่างกึ่งกลางรูป 7.99%)
     หัวข้อยึดขอบล่างจอแบบเว็บอ้างอิง (บนสุดที่ 257 จากขอบล่าง กึ่งกลางที่ 234) แล้วจัดรูปพื้นหลังให้กึ่งกลางกรอบสองช่อง
     ตรงกับกึ่งกลางแถวหัวข้อทุกความสูงจอ → กรอบไม่ทับคำบรรยายอีก
       --kb-s = ขนาดรูป: อย่างน้อยเต็มจอ, จอสูงจะขยายรูปเพิ่มแทนการเลื่อนลง (ขอบบนไม่โหว่)
       จอเตี้ยใช้ขนาดเต็มจอแล้วเลื่อนรูปขึ้น (ส่วนบนเป็นแค่ฉากน้ำ ตัดได้) */
  .az-landing .kibo{--kb-s:max(100vw, 100dvh, (100dvh - var(--u) * 234) / .709)}
  .az-landing .kibo .bg .bg_item{
    background-size:var(--kb-s) var(--kb-s);
    background-position:50% calc(100dvh - var(--u) * 234 - var(--kb-s) * .709);
  }
  .az-landing .kibo .slide_container{
    top:calc(100% - var(--u)*257);bottom:auto;left:calc(var(--u)*28);right:calc(var(--u)*28);
    width:auto;min-height:0;transform:none;
  }
  .az-landing .kibo .slide_item .title{
    flex-direction:column;align-items:flex-start;justify-content:flex-start;
    gap:calc(var(--u)*5);min-height:calc(var(--u)*46);margin-bottom:calc(var(--u)*12);
  }
  /* ชื่อ + อักษรรูน ห้ามยื่นไปถึงกรอบรูปเล็ก (ขอบซ้ายกรอบ = 50vw + 7.99% ของขนาดรูป) */
  .az-landing .kibo .slide_item .title .name{
    gap:calc(var(--u)*6);max-width:calc(50vw + var(--kb-s) * .0799 - var(--u)*36);
    font-size:calc(var(--u)*21);line-height:1.1;
  }
  .az-landing .kibo .slide_item .title .name h2{flex:0 0 auto}
  .az-landing .kibo .slide_item .title .name .symbol{
    flex:0 1 auto;min-width:0;width:auto;height:calc(var(--u)*8);margin:0;
    object-fit:contain;object-position:0 50%;
  }
  .az-landing .kibo .slide_item .title .type{
    position:static;min-width:0;height:calc(var(--u)*17);padding:0 calc(var(--u)*8);
    border-radius:calc(var(--u)*8.5);font-size:calc(var(--u)*11);letter-spacing:0;white-space:nowrap;
  }
  .az-landing .kibo .slide_item .title .type span{height:auto}
  .az-landing .kibo .desc{color:#666;font-size:calc(var(--u)*12);line-height:calc(var(--u)*17);min-height:calc(var(--u)*51)}
  .az-landing .kibo .navigator{bottom:calc(var(--u)*25)}

  /* ---- worlds: ตำแหน่ง/ขนาดจุดบนแผนที่ใช้ค่าบล็อกบน (วัดจากเว็บอ้างอิงแล้ว) ----
     เว็บอ้างอิงไม่มีขอบมืดซ้ายขวา · ชื่อสถานที่ 12.5px ขอบเงาเข้ม 4 ทิศ วางทับขอบล่างของรูป (ยกเว้น Lebe อยู่ใต้รูป) */
  .az-landing .worlds .content{-webkit-mask-image:none;mask-image:none}
  .az-landing .worlds .btn_map .name{
    top:84.1%;bottom:auto;padding:0;
    font-size:calc(var(--u)*12.5);font-weight:800;line-height:calc(var(--u)*13);letter-spacing:calc(var(--u)*1.25);
    -webkit-text-stroke:0;
    text-shadow:1.5px 0 1px #332800,0 1.5px 1px #332800,-1.5px 0 1px #332800,0 -1.5px 1px #332800,0 0 3px #332800;
  }
  .az-landing .worlds .btn_area_2 .name,
  .az-landing .worlds .btn_area_4 .name{top:84.2%}
  .az-landing .worlds .btn_area_3 .name{top:87.8%}
  .az-landing .worlds .btn_lebe .name{top:calc(100% + var(--u)*5)}

  /* ---- news: เรียงจากบนลงล่างแบบเว็บอ้างอิง (ไม่จัดกึ่งกลางจอ) ----
     ค่าจากดีไซน์ 资讯页H5 (750 กว้าง @2x → หาร 2):
     95 · หัวข้อ 19 · 18.5 · แบนเนอร์ 333x187 (x20.5 y132.5) · แท็บ 45x20 ที่ y339 · เส้น y383 · แถวข่าว 40.75 · เส้น y624 · ดูเพิ่มเติม
     รายการ/แท็บกว้าง 295 (x40..335) ตรงกับขอบแท็บซ้ายสุดและขวาสุด */
  .az-landing .news{justify-content:flex-start}
  .az-landing .news .news_container{padding:calc(var(--u)*95) 0 calc(var(--u)*40)}
  .az-landing .news .news_title_mo{
    position:relative;display:table;margin:0 auto calc(var(--u)*18.5);
    font-size:calc(var(--u)*19);line-height:calc(var(--u)*19);letter-spacing:0;
  }
  /* ลายตัวอักษร News จาง ๆ ด้านหลัง + ดาวท้ายหัวข้อ (ตามเว็บอ้างอิง) */
  .az-landing .news .news_title_mo::before{
    content:"";position:absolute;z-index:-1;top:calc(var(--u)*-27);left:50%;
    width:calc(var(--u)*103);height:calc(var(--u)*38);transform:translateX(-50%);
    background:url(../assets/e27/news/news_title.png) 50%/contain no-repeat;pointer-events:none;
  }
  .az-landing .news .news_title_mo::after{
    content:"";position:absolute;top:calc(var(--u)*-6.5);left:calc(100% + var(--u)*2.5);
    width:calc(var(--u)*15);height:calc(var(--u)*15);pointer-events:none;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='%23454545' d='M11 4l1.3 5.7L18 11l-5.7 1.3L11 18l-1.3-5.7L4 11l5.7-1.3zM4 .5l.7 2.8 2.8.7-2.8.7L4 7.5l-.7-2.8L.5 4l2.8-.7z'/%3E%3C/svg%3E") 50%/contain no-repeat;
  }
  .az-landing .news .news_right{margin:0 0 calc(var(--u)*19);padding:0 calc(var(--u)*21)}
  .az-landing .news .news_visual{border-radius:calc(var(--u)*4)}
  .az-landing .news .news_left{padding:0 calc(var(--u)*16.5)}
  /* แท็บ: ตัวหนา 14 สี #666 กล่อง 45x20 · แท็บที่เลือกพื้น #454545 ตัวขาว · เส้นคั่น 1x10
     ระยะกล่องแท็บถึงกล่องถัดไป 38.33 (เส้นคั่นอยู่กลาง) — หดได้ ภาษาที่คำยาวก็ยังอยู่แถวเดียวในความกว้างจอ */
  .az-landing .news .news_tabs{
    width:max-content;max-width:100%;height:calc(var(--u)*20);margin:0 auto calc(var(--u)*21.4);padding:0;
    flex-wrap:nowrap;justify-content:center;gap:0;
  }
  .az-landing .news .news_tabs > li{flex:0 0 auto}
  .az-landing .news .news_tabs > li.news_tab_sep{
    flex:0 1 calc(var(--u)*38.33);width:calc(var(--u)*38.33);min-width:7px;height:calc(var(--u)*10);
    background:linear-gradient(rgba(61,69,79,.4),rgba(61,69,79,.4)) 50% 50%/1px 100% no-repeat;
  }
  .az-landing .news .news_tab{
    padding:0 calc(var(--u)*8.5);
    color:#666;font-size:calc(var(--u)*14);line-height:calc(var(--u)*20);
  }
  .az-landing .news .news_tab.is-on{color:#fff;background:#454545}
  .az-landing .news .news_rule{margin:0}
  /* แถวละ 40.75: บรรทัด 17 · 2.75 · เส้นคั่น 1px (เฉพาะระหว่างแถว ไม่มีใต้แถวสุดท้าย) · 20 */
  .az-landing .news .news_list{
    display:flex;flex-direction:column;gap:0;
    margin:calc(var(--u)*28.1) calc(var(--u)*23.25) calc(var(--u)*24.9);
  }
  .az-landing .news .news_item{padding-bottom:calc(var(--u)*2.75)}
  .az-landing .news .news_item + .news_item{border-top:1px solid rgba(107,107,107,.2);padding-top:calc(var(--u)*20)}
  /* แถวข่าว: ป้ายหมวด | หัวข้อ (บรรทัดเดียว ตัด …) | วันที่ — ป้ายกับวันที่ไม่หด ไม่ตัดบรรทัด */
  .az-landing .news .news_item_btn{gap:0;padding:0}
  .az-landing .news .news_tag.news_tag--text{
    flex:0 0 auto;height:calc(var(--u)*12);margin-right:0;padding:0 calc(var(--u)*.5);
    border:0;border-radius:0;background:#cab289;color:#fff;
    font-size:calc(var(--u)*11);font-weight:700;line-height:calc(var(--u)*12);white-space:nowrap;
  }
  .az-landing .news .news_item_title{
    margin-left:calc(var(--u)*4);
    font-size:calc(var(--u)*12);font-weight:500;line-height:calc(var(--u)*17);color:#6a6a6a;
  }
  .az-landing .news .news_item_date{
    margin-left:calc(var(--u)*10);
    font-size:calc(var(--u)*11);line-height:calc(var(--u)*17);color:#999;
  }
  .az-landing .news .news_empty{padding:calc(var(--u)*24) 0}
  .az-landing .news .news_more{padding:calc(var(--u)*15.2) calc(var(--u)*24.5) 0 0}
  .az-landing .news .news_more a{font-size:calc(var(--u)*12);font-weight:700;line-height:calc(var(--u)*17)}
}

/* tablets in the mobile layout get a slightly larger art scale */
@media (min-width:768px) and (max-width:991.98px){
  .az-landing .characters .desc,.az-landing .kibo .desc{font-size:2.4vw}
  .az-landing .characters .title .name,.az-landing .kibo .slide_item .title .name{font-size:3.4vw}
  .az-landing .characters .title{gap:1.6vw;margin-bottom:2vw}
  .az-landing .characters .title .world{font-size:2.4vw}
  .az-landing .characters .voice_wrapper{gap:.8vw 1.6vw}
  .az-landing .worlds .content{min-height:1000px}
  .az-landing .worlds .btn_area_wrap{width:100%;min-width:100%;height:100%;top:0;left:50%;transform:translateX(-50%)}
  .az-landing .worlds .btn_map .visual .dot{width:35px;height:37px}
  .az-landing .worlds .btn_map .name{padding:9px 0 8px;font-size:16px;line-height:17px;letter-spacing:-.5px}
  .az-landing .worlds .btn_area_1{width:23.4028vw;height:23.4028vw;top:calc(50% - 346px);left:calc(50% - 134px)}
  .az-landing .worlds .btn_area_2{width:15.2083vw;height:15.3472vw;top:calc(50% - 173px);left:calc(50% - 241px)}
  .az-landing .worlds .btn_area_3{width:23.5417vw;height:23.6111vw;top:calc(50% + 86px);left:calc(50% - 36px)}
  .az-landing .worlds .btn_area_4{width:15.9028vw;height:16.0417vw;top:calc(50% - 112px);left:calc(50% - 77px)}
  .az-landing .worlds .btn_kibo_1{width:6.1111vw;height:5.2778vw;top:calc(50% - 305px);left:calc(50% - 260px)}
  .az-landing .worlds .btn_kibo_2{width:7.8472vw;height:5.1389vw;top:calc(50% - 155px);left:calc(50% + 82px)}
  .az-landing .worlds .btn_lebe{width:15.2778vw;height:10.5556vw;top:calc(50% - 430px);left:calc(50% + 50px)}
  .az-landing .worlds::after{height:15%}
  .az-landing .news .news_left,.az-landing .news .news_right{width:min(600px,86vw);margin-left:auto;margin-right:auto}
  .az-landing .news .news_title_mo{font-size:24px}
  .az-landing .news .news_tab{font-size:18px}
  .az-landing .news .news_item_title{font-size:16px}
}

/* very small phones */
@media (max-width:359.98px){
  .az-landing .intro__content{padding-inline:2.6em}
  .az-landing .registration .register_container{width:calc(100% - 24px)}
}

/* landscape phones — keep the art readable */
@media (max-height:520px) and (max-width:991.98px){
  .az-landing .fp__slide,.az-landing .section{min-height:560px!important}
}

/* -------------------------------------------------------------------------
   Entry animations only run while a slide is the active one (desktop),
   so they replay every time you scroll back to a section.
   ------------------------------------------------------------------------- */
@media (min-width:992px){
  .az-landing .fp__slide:not(.is-in) *,
  .az-landing .fp__slide:not(.is-in) *::before,
  .az-landing .fp__slide:not(.is-in) *::after{animation-name:none!important}
}

@media (prefers-reduced-motion:reduce){
  .az-landing,.az-landing *,.az-landing *::before,.az-landing *::after{animation-duration:.001s!important;animation-delay:0s!important;transition-duration:.001s!important}
}

/* =========================================================================
   Pre-register modal — black and white mockup (design pending)
   ========================================================================= */
.az-landing .video_modal{
  position:fixed;inset:0;z-index:230;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
}
.az-landing .video_modal[hidden]{display:none}
html:has(.az-landing) body:has(.video_modal:not([hidden])){overflow:hidden}
.az-landing .video_modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.78)}
.az-landing .video_modal__dialog{position:relative;z-index:1;width:min(960px,100%)}
.az-landing .video_modal__frame{position:relative;width:100%;aspect-ratio:16/9;background:#000}
.az-landing .video_modal__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.az-landing .video_modal__close{
  position:absolute;top:-44px;right:0;width:36px;height:36px;
  color:#fff;font-size:32px;line-height:1;
}
.az-landing .video_modal__close::before{content:"×"}

/* =========================================================================
   PRE-REGISTER MODAL — assets/modal-pre/
   Layout tuned to example-design-preregister(.png) / example-success.png
   Canvas refs: PC 818×621 · Mobile 640×904 · Success 1104×425
   ========================================================================= */
.az-landing .prereg_modal{
  position:fixed;inset:0;z-index:220;
  display:flex;align-items:center;justify-content:center;
  padding:24px 16px;
}
.az-landing .prereg_modal[hidden]{display:none}
html:has(.az-landing) body:has(.prereg_modal:not([hidden])){overflow:hidden}
.az-landing .prereg_modal,.az-landing .prereg_modal__countries{overscroll-behavior:contain}
.az-landing .prereg_modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.78)}

.az-landing .prereg_modal__dialog{
  position:relative;z-index:1;
  width:min(680px,calc(100vw - 48px),calc((100dvh - 72px) * 818 / 621));
  font-family:var(--sans)!important;
  color:#4a3320;
}
/* จอ ≥768: ให้ "กระดานฟอร์ม" อยู่กึ่งกลางจอพอดี แล้วริบบิ้น + ปุ่มโซเชียลยื่นออกไปทางขวา
   ในรูปพื้น 818x621 กระดานอยู่ที่ x 10→500 (กึ่งกลาง = 31.2% ของรูป) จึงเลื่อนทั้งกล่องไปทางขวา 18.8% ของความกว้าง
   และจำกัดความกว้างไม่ให้ส่วนที่ยื่นขวา (68.8% ของกล่องนับจากกลางจอ) ล้นจอ — ไม่ต้องตัดรูปใหม่ */
@media (min-width:768px){
  .az-landing .prereg_modal__dialog{
    width:min(680px,calc((50vw - 16px) / .688),calc((100dvh - 72px) * 818 / 621));
    transform:translateX(18.8%);
  }
}

/* Close — form: upper-right of board · success: banner corner */
.az-landing .prereg_modal__close{
  position:absolute;z-index:20;
  top:15.78%;right:36.06%;
  width:6.36%;height:auto;aspect-ratio:1;padding:0;border:0;
  background:url(../assets/modal-pre/close.png) center/contain no-repeat;
  cursor:pointer;transition:transform .2s,filter .2s;
}
.az-landing .prereg_modal__close::before{content:none}
.az-landing .prereg_modal__close:hover{transform:scale(1.08);filter:brightness(1.15)}
.az-landing .prereg_modal__dialog:has(#regSuccess:not([hidden])) .prereg_modal__close{
  top:25%;right:0%;width:4.84%;
}

/* Form view shell — PC bg 818×621 */
.az-landing .prereg_modal__form_view{width:100%}
.az-landing .prereg_modal__dialog:has(#regSuccess:not([hidden])) .prereg_modal__form_view{display:none}

.az-landing .prereg_modal__shell{
  position:relative;width:100%;aspect-ratio:818/621;
  background:url(../assets/modal-pre/bg-pre-regis-modal.png) center top/100% 100% no-repeat;
}

/* Content board — inner parchment (≈ x105 y175 w375 on 818×621 art) */
.az-landing .prereg_modal__board{
  position: absolute;
  left: 7%;
  top: 45.5%;
  width: 48.84%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Localized pre-register title images */
.az-landing .prereg_modal__title{
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:28px;margin:0 0 12px;text-align:center;
}
.az-landing .prereg_modal__title_img{display:none !important;width:auto;max-width:100%;height:auto;margin:0 auto}
.az-landing .prereg_modal__title_text{
  margin:0;color:#4a3320;
  font-family:"Sitka Web","Sitka Banner","Sitka Heading",var(--serif)!important;
  font-size:clamp(22px,3vw,30px);font-weight:800;line-height:1.1;
  text-transform:uppercase;letter-spacing:1px;
}
html[data-lang="en"] .az-landing .prereg_modal__title_img--en,
html[data-lang="th"] .az-landing .prereg_modal__title_img--th,
html[data-lang="vn"] .az-landing .prereg_modal__title_img--vn,
html[data-lang="id"] .az-landing .prereg_modal__title_img--id,
html[data-lang="zh"] .az-landing .prereg_modal__title_img--zh{display:block !important}
.az-landing .prereg_modal__title_text{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

.az-landing .prereg_modal__form{
  display:flex;flex-direction:column;align-items:stretch;gap:0;
  width:100%;
}
.az-landing .prereg_modal__form[hidden]{display:none}

.az-landing .prereg_modal__field{
  display:flex;flex-direction:column;gap:4px;width:100%;
  background:url(../assets/modal-pre/bg-form.png) top center/100% 58px no-repeat;
}
.az-landing .prereg_modal__field + .prereg_modal__field{margin-top:-4px}
.az-landing .prereg_modal__field_msg{margin:0;font-size:11px;font-weight:700;line-height:1.4;color:#a82222}
.az-landing .prereg_modal__field_msg:empty{display:none}

/* Input fields — bg-form.png 375×58 */
.az-landing .prereg_modal__field input[type="email"],
.az-landing .prereg_modal__drop_btn{
  width:100%;height:58px;padding:0 36px 0 14px;
  background-color:transparent !important;
  background-image:none;
  border:0;color:#4a3320;
  font-family:inherit!important;font-size:13px;font-weight:600;
  outline:none;
}
.az-landing .prereg_modal__field input[type="email"]{padding-left:28px}
.az-landing .prereg_modal__field input[type="email"]::placeholder{color:#8a7358;font-weight:500}
.az-landing .prereg_modal__field input[type="email"]:-webkit-autofill,
.az-landing .prereg_modal__field input[type="email"]:-webkit-autofill:hover,
.az-landing .prereg_modal__field input[type="email"]:-webkit-autofill:focus{
  -webkit-background-clip:text;
  -webkit-text-fill-color:#4a3320;
  caret-color:#4a3320;
}

.az-landing .prereg_modal__drop{position:relative;width:100%}
.az-landing .prereg_modal__drop_btn{
  display:flex;align-items:center;justify-content:flex-start;gap:8px;
  padding-left:58px;text-align:left;cursor:pointer;
}
.az-landing .prereg_modal__drop_btn::after{
  content: "";
  position: absolute;
  right: 39px;
  top: 43%;
  width: 0;
  height: 0;
  margin-top: -2px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 13px solid #4a3320;
  transition: transform .2s;
}
.az-landing .prereg_modal__drop_btn[aria-expanded="true"]::after{transform:rotate(180deg)}
.az-landing .prereg_modal__drop_value{display:flex;align-items:center;gap:8px;min-width:0}
.az-landing .prereg_modal__drop_btn:not(.is-set) .prereg_modal__drop_value{color:#8a7358;font-weight:500}
/* Globe icon shown before a country is selected */
.az-landing .prereg_modal__drop_btn:not(.is-set)::before{
  content:"";position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:24px;height:24px;
  background-color:#9a8268;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3.3 3 14.7 0 18M12 3c-3 3.3-3 14.7 0 18'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3.3 3 14.7 0 18M12 3c-3 3.3-3 14.7 0 18'/%3E%3C/svg%3E") center/contain no-repeat;
}
.az-landing .prereg_modal__drop_btn.is-set{padding-left:14px}
.az-landing .prereg_modal__drop_btn.is-set::before{display:none}

.az-landing .prereg_modal__countries{
  position:absolute;left:0;right:0;top:calc(100% + 2px);z-index:30;
  display:flex;flex-direction:column;
  max-height:180px;overflow:auto;
  background:#fce1a8;border:1px solid #a88048;border-radius:6px;
  box-shadow:0 8px 20px rgba(0,0,0,.35);
}
.az-landing .prereg_modal__countries[hidden]{display:none}
.az-landing .prereg_modal__countries label{
  display:flex;align-items:center;gap:10px;
  margin:0;padding:8px 12px;
  border-bottom:1px solid #ebcc91;
  color:#4a3320;font-size:13px;font-weight:600;cursor:pointer;
}
.az-landing .prereg_modal__countries label:last-child{border-bottom:0}
.az-landing .prereg_modal__countries label:hover,
.az-landing .prereg_modal__countries label:has(input:checked){background:#4a3320;color:#fce1a8}
.az-landing .prereg_modal__countries input{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);
}
.az-landing .prereg_modal__flag{width:22px;height:15px;flex:0 0 auto;border:1px solid rgba(0,0,0,.25);border-radius:2px}

/* PDPA checkbox */
.az-landing .prereg_modal__pdpa{
  display:flex;align-items:flex-start;gap:8px;
  margin:4px 0 0;padding:0 4px;
  color:#4a3320;font-size:10.5px;font-weight:500;line-height:1.5;cursor:pointer;
}
.az-landing .prereg_modal__pdpa input{
  width:14px;height:14px;margin-top:3px;flex:0 0 auto;
  appearance:none;-webkit-appearance:none;
  border:1.5px solid #4a3320 !important;border-radius:50%;
  background:transparent !important;
  box-shadow:none !important;
  cursor:pointer;
}
.az-landing .prereg_modal__pdpa input:checked{
  background:radial-gradient(circle,#4a3320 0 35%,transparent 39%) !important;
}
.az-landing .prereg_modal__pdpa a{color:#3b2311;font-weight:700;text-decoration:underline;text-underline-offset:2px}

/* Submit — submit-btn.png 202×58, scaled to stay inside the parchment */
.az-landing .prereg_modal__submit{
  align-self:center;display:flex;align-items:center;justify-content:center;
  width:48%;max-width:202px;height:auto;aspect-ratio:202/58;margin-top:12px;padding:0;
  line-height:1;
  background:url(../assets/modal-pre/submit-btn.png) center/100% 100% no-repeat;
  border:0;color:#fff;
  font-family:"Sitka Web","Sitka Banner",var(--serif)!important;
  font-size:clamp(13px, 2.1cqw, 17px);font-weight:800;letter-spacing:.05em;
  cursor:pointer;transition:transform .15s,filter .15s;
}
.az-landing .prereg_modal__submit:hover{transform:scale(1.03);filter:brightness(1.08)}
.az-landing .prereg_modal__submit:disabled{opacity:.45;cursor:not-allowed;transform:none}

.az-landing .prereg_modal__msg{min-height:1.2em;margin:0;font-size:11px;text-align:center}
.az-landing .prereg_modal__msg.is-err{color:#a82222;font-weight:700;text-decoration:underline}
.az-landing .prereg_modal__msg.is-ok{color:#1e7e34;font-weight:700}

/* Official Community — label on ribbon, icons below (right side on PC) */
.az-landing .prereg_modal__community{
  position:absolute;inset:0;z-index:10;pointer-events:none;
}
/* ป้ายข้อความบนริบบิ้น — กล่องเท่าพื้นที่เรียบของริบบิ้นในรูปพื้น (PC: x 510→782, y 420→468 บนรูป 818x621)
   ข้อความอยู่กึ่งกลางทั้งแนวนอน/แนวตั้ง ขนาดตัวอักษรย่อตามความกว้าง modal (cqw)
   ภาษาที่ข้อความยาวเกินริบบิ้น js/main.js (fitCommunityLabel) จะย่อตัวอักษรลงให้พอดี ไม่ล้นกรอบ */
.az-landing .prereg_modal__dialog{container-type:inline-size}
.az-landing .prereg_modal__community_label{
  position:absolute;left:62.35%;top:67.63%;width:33.25%;height:7.73%;
  display:flex;align-items:center;justify-content:center;
  margin:0;padding:0;overflow:hidden;pointer-events:none;
  color:#3e2718;font-family:"Sitka Web","Sitka Banner",var(--serif)!important;
  font-size:3.09cqw;font-weight:800;line-height:1;letter-spacing:.05em;text-align:center;
  white-space:nowrap;
}
.az-landing .prereg_modal__community_label > span{display:block;flex:0 0 auto;padding-top:.08em}

.az-landing .social_buttons{
  position:absolute;left:63.6%;top:76.5%;width:100%;
  display:flex;flex-direction:row;gap:3%;
  margin:0;pointer-events:none;
}
.az-landing .social_buttons > *{pointer-events:auto}
/* ปุ่มโซเชียล = แผ่นป้ายเปล่า (tile-pre.png ตัดจาก fb-pre.png เอาโลโก้เดิมออก) + ไอคอน Font Awesome วางทับ */
.az-landing .social_buttons a,
.az-landing .social_buttons button{
  position:relative;display:block;width:14.2%;aspect-ratio:1/1.025;height:auto;padding:0;border:0;
  overflow:hidden;text-indent:-9999px;white-space:nowrap;
  background:url(../assets/modal-pre/tile-pre.png) center/100% 100% no-repeat;cursor:pointer;
  transition:transform .2s,filter .2s;
}
.az-landing .social_buttons [data-channel]::before{
  content:"";position:absolute;top:47.8%;left:50.4%;width:52%;height:52%;transform:translate(-50%,-50%);
}
.az-landing .social_buttons [data-channel="facebook"]{background-image:url(../assets/modal-pre/fb-pre.png)}
.az-landing .social_buttons [data-channel="discord"]{background-image:url(../assets/modal-pre/dc-pre.png)}
.az-landing .social_buttons [data-channel="facebook"]::before,
.az-landing .social_buttons [data-channel="discord"]::before{content:none}
.az-landing .social_buttons a:hover,
.az-landing .social_buttons button:hover{transform:scale(1.06);filter:brightness(1.08)}


/* Localized success artwork
   จัดกึ่งกลางจอตาม "แถบกระดาษ" อย่างเดียว ไม่นับนางฟ้าด้านซ้ายกับดาวมุมขวาที่ยื่นออกมา
   ในรูปทั้ง 5 ภาษา แถบอยู่ที่ x≈206→1049 จากกว้าง ≈1070 (EN 194→1035 จาก 1054)
   กึ่งกลางแถบจึงอยู่ขวาของกึ่งกลางรูป ≈8.6% ของความกว้าง (EN 8.3%) → เลื่อนทั้งกล่องไปทางซ้ายเท่านั้น
   และจำกัดความกว้างให้ส่วนซ้ายของรูป (58.6% นับจากกึ่งกลางแถบ) ไม่ล้นขอบจอบนจอแคบ */
.az-landing .prereg_modal__dialog:has(#regSuccess:not([hidden])){
  --succ-shift:-8.6%;
  width:min(900px,calc(100vw - 48px),calc((50vw - 12px) / .586));
  transform:translateX(var(--succ-shift));
}
html[data-lang="en"] .az-landing .prereg_modal__dialog:has(#regSuccess:not([hidden])){--succ-shift:-8.3%}
.az-landing .prereg_modal__success{position:relative;width:100%}
.az-landing .prereg_modal__success[hidden]{display:none}
.az-landing .prereg_modal__success_bg{
  display:block !important;width:100%;height:auto;object-fit:contain;
}

/* PC ≥768 — ขนาดตาม example-design-preregister.png (จอ 1920×1080 = modal 818px, รูปพื้น 1:1)
   ทุกค่าเป็น cqw ของ modal: 1px บนรูป 818 = .12225cqw */
@media (min-width:768px){
  .az-landing .prereg_modal__dialog{
    width:min(818px,
      calc((50vw - 16px) / .67),
      calc((100dvh - 48px) * 818 / 733),
      max(calc(100vw * 818 / 1920), calc(100dvh * 818 / 1080)));
    transform:translate(17%, 8.94%);
  }
  .az-landing .prereg_modal__board{left:8.52%;top:46.46%;width:45.48%}
  .az-landing .prereg_modal__title{min-height:4.77cqw;margin:0 0 1.16cqw}
  .az-landing .prereg_modal__title_img--en{width:32.4cqw}
  .az-landing .prereg_modal__title_img--th{width:25.06cqw}
  .az-landing .prereg_modal__title_img--vn{width:39cqw}
  .az-landing .prereg_modal__title_img--id{width:38.88cqw}
  .az-landing .prereg_modal__title_img--zh{width:21.39cqw}
  .az-landing .prereg_modal__field{gap:.5cqw;background-size:100% 7.03cqw}
  .az-landing .prereg_modal__field + .prereg_modal__field{margin-top:0}
  .az-landing .prereg_modal__field input[type="email"],
  .az-landing .prereg_modal__drop_btn{
    height:7.03cqw;
    padding:0 4cqw .3cqw 2.87cqw;
    font-size:1.8cqw;
  }
  html[data-lang="zh"] .az-landing .prereg_modal__field input[type="email"],
  html[data-lang="zh"] .az-landing .prereg_modal__drop_btn{font-size:2cqw}
  .az-landing .prereg_modal__field input[type="email"]{padding-bottom:1.4cqw}
  .az-landing .prereg_modal__field input[type="email"]::placeholder,
  .az-landing .prereg_modal__drop_btn:not(.is-set) .prereg_modal__drop_value{color:#67523c}
  .az-landing .prereg_modal__field_msg{font-size:1.35cqw}
  .az-landing .prereg_modal__drop_btn{gap:1cqw;padding-left:10.43cqw}
  .az-landing .prereg_modal__drop_btn.is-set{padding-left:2.87cqw}
  .az-landing .prereg_modal__drop_btn::after{
    right:7.5cqw;top:2.4cqw;margin-top:0;
    border-left-width:1.45cqw;border-right-width:1.45cqw;border-top:2cqw solid #513b2b;
  }
  .az-landing .prereg_modal__drop_btn:not(.is-set)::before{
    left:3.83cqw;top:46.5%;width:3.4cqw;height:3.4cqw;background-color:#9d8a63;
  }
  .az-landing .prereg_modal__countries{top:calc(100% - .5cqw);max-height:22cqw}
  .az-landing .prereg_modal__countries label{gap:1.2cqw;padding:1cqw 1.5cqw;font-size:1.71cqw}
  .az-landing .prereg_modal__flag{width:2.7cqw;height:1.83cqw}
  .az-landing .prereg_modal__pdpa{
    gap:.5cqw;margin:-.43cqw 0 0;padding:0 0 0 2cqw;
    min-height:5.38cqw;
    color:#533825;font-size:1.7cqw;line-height:1.58;
  }
  html[data-lang="zh"] .az-landing .prereg_modal__pdpa{margin-top:-.2cqw;font-size:1.64cqw;line-height:1.64}
  .az-landing .prereg_modal__pdpa a{font-weight:inherit;text-decoration:none}
  .az-landing .prereg_modal__pdpa input{width:1.47cqw;height:1.47cqw;margin-top:.73cqw}
  .az-landing .prereg_modal__submit{
    width:24.7cqw;max-width:none;margin-top:.25cqw;padding:0;
    font-size:3.85cqw;
  }
  html[data-lang="zh"] .az-landing .prereg_modal__submit{margin-top:0}
  .az-landing .prereg_modal__msg{font-size:1.35cqw}
  .az-landing .prereg_modal__community_label{left:61.74%;top:67.62%;font-size:2.4cqw}
  html[data-lang="zh"] .az-landing .prereg_modal__community_label{font-size:2.7cqw}
  .az-landing .social_buttons{left:63.2%;top:75.52%;gap:.61%}
  .az-landing .social_buttons a,
  .az-landing .social_buttons button{width:15.04%;aspect-ratio:123/115}
}

/* Mobile — bg-pre-regis-modal-mobile.png 640×904 */
@media (max-width:767.98px){
  .az-landing .prereg_modal{padding:12px 0}
  .az-landing .prereg_modal__dialog{
    width:min(640px,100vw,calc((100dvh - 24px) * 640 / 904));
    transform:translateY(max(0px, min(14.8%, calc(50dvh - 50% - 12px))));
    container-type:inline-size;
  }
  .az-landing .prereg_modal__close{
    top:13.61%;right:7.97%;width:8.13%;
  }
  .az-landing .prereg_modal__shell{
    aspect-ratio:640/904;
    background-image:url(../assets/modal-pre/bg-pre-regis-modal-mobile.png);
  }
  .az-landing .prereg_modal__board{left:21.33%;top:35.4%;width:58.59%}
  /* ????????????????????????????????? PC (px ????????) ? 1px ????? 640 = .15625cqw */
  .az-landing .prereg_modal__title{height:4.375cqw;min-height:0;margin-bottom:2.03cqw}
  .az-landing .prereg_modal__title_img--en{width:41.40625cqw}
  .az-landing .prereg_modal__title_img--th{width:32.03125cqw}
  .az-landing .prereg_modal__title_img--vn{width:17.65625cqw}
  .az-landing .prereg_modal__title_img--id{width:49.6875cqw}
  .az-landing .prereg_modal__title_img--zh{width:27.34375cqw}
  .az-landing .prereg_modal__form{gap:0}
  .az-landing .prereg_modal__field{
    gap:.625cqw;
    background-size:100% 8.98cqw;
  }
  .az-landing .prereg_modal__field + .prereg_modal__field{margin-top:0}
  .az-landing .prereg_modal__field input[type="email"],
  .az-landing .prereg_modal__drop_btn{
    height:8.98cqw;
    padding:0 5.1cqw 0 3.36cqw;
    font-size:2.3cqw;
  }
  html[data-lang="zh"] .az-landing .prereg_modal__field input[type="email"],
  html[data-lang="zh"] .az-landing .prereg_modal__drop_btn{font-size:2.56cqw}
  .az-landing .prereg_modal__field input[type="email"]{padding-left:3.36cqw;font-size:2.15cqw}
  .az-landing .prereg_modal__field input[type="email"]::placeholder,
  .az-landing .prereg_modal__drop_btn:not(.is-set) .prereg_modal__drop_value{color:#67523c}
  .az-landing .prereg_modal__field_msg{font-size:1.71875cqw}
  .az-landing .prereg_modal__drop_btn{
    gap:1.25cqw;
    padding-left:13.2cqw;
  }
  .az-landing .prereg_modal__drop_btn::after{
    right:10.2cqw;top:3cqw;
    margin-top:0;
    border-left-width:1.85cqw;
    border-right-width:1.85cqw;
    border-top:2.56cqw solid #513b2b;
  }
  .az-landing .prereg_modal__drop_btn:not(.is-set)::before{
    left:4.78cqw;top:46.5%;
    width:4.35cqw;height:4.35cqw;background-color:#9d8a63;
  }
  .az-landing .prereg_modal__drop_btn.is-set{padding-left:3.36cqw}
  .az-landing .prereg_modal__countries{
    top:calc(100% - .8cqw);
    max-height:28.125cqw;
  }
  .az-landing .prereg_modal__countries label{
    gap:1.5625cqw;
    padding:1.25cqw 1.875cqw;
    font-size:2.3cqw;
  }
  .az-landing .prereg_modal__flag{width:3.4375cqw;height:2.34375cqw}
  .az-landing .prereg_modal__pdpa{
    gap:.63cqw;
    margin:.15cqw 0 0;
    padding:0 0 0 2.4cqw;
    min-height:6.86cqw;
    color:#533825;font-size:2.17cqw;line-height:1.58;
  }
  html[data-lang="zh"] .az-landing .prereg_modal__pdpa{margin-top:-.25cqw;font-size:2.1cqw;line-height:1.64}
  .az-landing .prereg_modal__pdpa a{font-weight:inherit;text-decoration:none}
  .az-landing .prereg_modal__pdpa input{
    width:1.88cqw;height:1.88cqw;margin-top:.94cqw;
  }
  .az-landing .prereg_modal__submit{
    width:31.56cqw;max-width:none;height:auto;aspect-ratio:202/58;
    margin-top:.16cqw;padding:0;
    font-size:4.92cqw;
  }
  html[data-lang="zh"] .az-landing .prereg_modal__submit{margin-top:.6cqw}
  .az-landing .prereg_modal__msg{font-size:1.71875cqw}
  /* ??????: ?????????????? x 160?370, y 746?782 ????? 640x904 */
  .az-landing .prereg_modal__community_label{
    left:25%;top:82.52%;width:32.8%;height:3.98%;
    font-size:2.34375cqw;letter-spacing:.04em;
  }
  html[data-lang="zh"] .az-landing .prereg_modal__community_label{font-size:2.64cqw}
  /* ??????????? 123x115 ??????? ~91px ????? 640 (x 167, y 784) */
  .az-landing .social_buttons{
    left:26.1%;top:86.7%;bottom:auto;
    flex-direction:row;gap:.47cqw;
  }
  .az-landing .social_buttons{width:auto}
  .az-landing .social_buttons a,
  .az-landing .social_buttons button{width:14.2cqw;height:auto;aspect-ratio:123/115}
}

/* Newspaper ใส่ font ที่ input/button ผ่าน #td-outer-wrap และมากับ !important
   กฎนี้เฉพาะกว่าธีม เพื่อให้ตัวอักษรใน modal ตรงกับ test.html
   ช่องกรอก / ข้อตกลง = --sans (en Sitka, th Kanit, zh Source Han Sans)
   ปุ่ม Submit กับข้อความบนริบบิ้น = --serif */
html:has(.az-landing) #td-outer-wrap .az-landing .prereg_modal,
html:has(.az-landing) #td-outer-wrap .az-landing .prereg_modal button,
html:has(.az-landing) #td-outer-wrap .az-landing .prereg_modal input,
html:has(.az-landing) #td-outer-wrap .az-landing .prereg_modal label,
html:has(.az-landing) #td-outer-wrap .az-landing .prereg_modal span,
html:has(.az-landing) #td-outer-wrap .az-landing .prereg_modal p,
html:has(.az-landing) #td-outer-wrap .az-landing .prereg_modal a,
html:has(.az-landing) .az-landing .prereg_modal button,
html:has(.az-landing) .az-landing .prereg_modal input,
html:has(.az-landing) .az-landing .prereg_modal label,
html:has(.az-landing) .az-landing .prereg_modal span,
html:has(.az-landing) .az-landing .prereg_modal p,
html:has(.az-landing) .az-landing .prereg_modal a,
html:has(.az-landing) #td-outer-wrap .az-landing .prereg_modal input::placeholder,
html:has(.az-landing) .az-landing .prereg_modal input::placeholder{
  font-family:var(--sans)!important;
  text-transform:none!important;
}
html:has(.az-landing) #td-outer-wrap .az-landing .prereg_modal__field input,
html:has(.az-landing) #td-outer-wrap .az-landing .prereg_modal__drop_btn,
html:has(.az-landing) .az-landing .prereg_modal__field input,
html:has(.az-landing) .az-landing .prereg_modal__drop_btn{
  font-weight:600!important;
}
html:has(.az-landing) #td-outer-wrap .az-landing .prereg_modal input::placeholder,
html:has(.az-landing) .az-landing .prereg_modal input::placeholder{
  font-weight:500!important;
}
html:has(.az-landing) #td-outer-wrap .az-landing .prereg_modal__submit,
html:has(.az-landing) #td-outer-wrap .az-landing .prereg_modal__community_label,
html:has(.az-landing) #td-outer-wrap .az-landing .prereg_modal__community_label > span,
html:has(.az-landing) .az-landing .prereg_modal__submit,
html:has(.az-landing) .az-landing .prereg_modal__community_label,
html:has(.az-landing) .az-landing .prereg_modal__community_label > span{
  font-family:var(--serif)!important;
}
html:has(.az-landing) #td-outer-wrap .az-landing .prereg_modal button.prereg_modal__submit,
html:has(.az-landing) .az-landing .prereg_modal button.prereg_modal__submit{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1!important;
  padding:0!important;
  font-weight:800!important;
  letter-spacing:.05em!important;
  text-indent:0;
}
/* ภาษาจีน: ปุ่ม Submit ใช้ Source Han Serif CN
   ต้องใส่ button ในตัวเลือก เพราะกฎ sans ของ .prereg_modal button เฉพาะกว่ากฎ serif ทั่วไป */
html[data-lang="zh"]:has(.az-landing) #td-outer-wrap .az-landing .prereg_modal button.prereg_modal__submit,
html[lang^="zh"]:has(.az-landing) #td-outer-wrap .az-landing .prereg_modal button.prereg_modal__submit,
html[data-lang="zh"]:has(.az-landing) .az-landing .prereg_modal button.prereg_modal__submit,
html[lang^="zh"]:has(.az-landing) .az-landing .prereg_modal button.prereg_modal__submit{
  font-family:"Source Han Serif CN","Source Han Serif Web","Noto Serif SC","Source Han Serif SC",serif!important;
  font-weight:800!important;
}
html[data-lang="en"]:has(.az-landing) #td-outer-wrap .az-landing .prereg_modal button.prereg_modal__submit,
html[lang="en"]:has(.az-landing) #td-outer-wrap .az-landing .prereg_modal button.prereg_modal__submit,
html[lang^="en-"]:has(.az-landing) #td-outer-wrap .az-landing .prereg_modal button.prereg_modal__submit,
html[data-lang="en"]:has(.az-landing) .az-landing .prereg_modal button.prereg_modal__submit,
html[lang="en"]:has(.az-landing) .az-landing .prereg_modal button.prereg_modal__submit,
html[lang^="en-"]:has(.az-landing) .az-landing .prereg_modal button.prereg_modal__submit{
  font-family:Calibri,"Segoe UI",sans-serif!important;
  font-weight:700!important;
}
/* ภาษาอินโดนีเซีย: ปุ่ม Submit และข้อความริบบิ้นใช้ Dominican
   ใส่ p/button ในตัวเลือกเพื่อชนะกฎ sans ของ modal */
html[data-lang="id"]:has(.az-landing) #td-outer-wrap .az-landing .prereg_modal button.prereg_modal__submit,
html[lang="id"]:has(.az-landing) #td-outer-wrap .az-landing .prereg_modal button.prereg_modal__submit,
html[lang^="id-"]:has(.az-landing) #td-outer-wrap .az-landing .prereg_modal button.prereg_modal__submit,
html[data-lang="id"]:has(.az-landing) .az-landing .prereg_modal button.prereg_modal__submit,
html[lang="id"]:has(.az-landing) .az-landing .prereg_modal button.prereg_modal__submit,
html[lang^="id-"]:has(.az-landing) .az-landing .prereg_modal button.prereg_modal__submit,
html[data-lang="id"]:has(.az-landing) #td-outer-wrap .az-landing .prereg_modal p.prereg_modal__community_label,
html[lang="id"]:has(.az-landing) #td-outer-wrap .az-landing .prereg_modal p.prereg_modal__community_label,
html[lang^="id-"]:has(.az-landing) #td-outer-wrap .az-landing .prereg_modal p.prereg_modal__community_label,
html[data-lang="id"]:has(.az-landing) .az-landing .prereg_modal p.prereg_modal__community_label,
html[lang="id"]:has(.az-landing) .az-landing .prereg_modal p.prereg_modal__community_label,
html[lang^="id-"]:has(.az-landing) .az-landing .prereg_modal p.prereg_modal__community_label,
html[data-lang="id"]:has(.az-landing) #td-outer-wrap .az-landing .prereg_modal .prereg_modal__community_label > span,
html[lang="id"]:has(.az-landing) #td-outer-wrap .az-landing .prereg_modal .prereg_modal__community_label > span,
html[lang^="id-"]:has(.az-landing) #td-outer-wrap .az-landing .prereg_modal .prereg_modal__community_label > span,
html[data-lang="id"]:has(.az-landing) .az-landing .prereg_modal .prereg_modal__community_label > span,
html[lang="id"]:has(.az-landing) .az-landing .prereg_modal .prereg_modal__community_label > span,
html[lang^="id-"]:has(.az-landing) .az-landing .prereg_modal .prereg_modal__community_label > span{
  font-family:Dominican,"Dominican Regular",serif!important;
  font-weight:400!important;
}
/* ภาษาเวียดนาม: ปุ่ม Submit และข้อความริบบิ้นใช้ Sigmar One (น้ำหนักเดียวคือ 400) */
html[data-lang="vn"]:has(.az-landing) #td-outer-wrap .az-landing .prereg_modal button.prereg_modal__submit,
html[lang="vi"]:has(.az-landing) #td-outer-wrap .az-landing .prereg_modal button.prereg_modal__submit,
html[lang^="vi-"]:has(.az-landing) #td-outer-wrap .az-landing .prereg_modal button.prereg_modal__submit,
html[data-lang="vn"]:has(.az-landing) .az-landing .prereg_modal button.prereg_modal__submit,
html[lang="vi"]:has(.az-landing) .az-landing .prereg_modal button.prereg_modal__submit,
html[lang^="vi-"]:has(.az-landing) .az-landing .prereg_modal button.prereg_modal__submit,
html[data-lang="vn"]:has(.az-landing) #td-outer-wrap .az-landing .prereg_modal p.prereg_modal__community_label,
html[lang="vi"]:has(.az-landing) #td-outer-wrap .az-landing .prereg_modal p.prereg_modal__community_label,
html[lang^="vi-"]:has(.az-landing) #td-outer-wrap .az-landing .prereg_modal p.prereg_modal__community_label,
html[data-lang="vn"]:has(.az-landing) .az-landing .prereg_modal p.prereg_modal__community_label,
html[lang="vi"]:has(.az-landing) .az-landing .prereg_modal p.prereg_modal__community_label,
html[lang^="vi-"]:has(.az-landing) .az-landing .prereg_modal p.prereg_modal__community_label,
html[data-lang="vn"]:has(.az-landing) #td-outer-wrap .az-landing .prereg_modal .prereg_modal__community_label > span,
html[lang="vi"]:has(.az-landing) #td-outer-wrap .az-landing .prereg_modal .prereg_modal__community_label > span,
html[lang^="vi-"]:has(.az-landing) #td-outer-wrap .az-landing .prereg_modal .prereg_modal__community_label > span,
html[data-lang="vn"]:has(.az-landing) .az-landing .prereg_modal .prereg_modal__community_label > span,
html[lang="vi"]:has(.az-landing) .az-landing .prereg_modal .prereg_modal__community_label > span,
html[lang^="vi-"]:has(.az-landing) .az-landing .prereg_modal .prereg_modal__community_label > span{
  font-family:"Sigmar One",cursive!important;
  font-weight:400!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
}
html[data-lang="vn"]:has(.az-landing) #td-outer-wrap .az-landing .prereg_modal button.prereg_modal__submit,
html[lang="vi"]:has(.az-landing) #td-outer-wrap .az-landing .prereg_modal button.prereg_modal__submit,
html[lang^="vi-"]:has(.az-landing) #td-outer-wrap .az-landing .prereg_modal button.prereg_modal__submit,
html[data-lang="vn"]:has(.az-landing) .az-landing .prereg_modal button.prereg_modal__submit,
html[lang="vi"]:has(.az-landing) .az-landing .prereg_modal button.prereg_modal__submit,
html[lang^="vi-"]:has(.az-landing) .az-landing .prereg_modal button.prereg_modal__submit{
  font-size:3.1cqw!important;
  line-height:1!important;
  overflow:hidden;
}
html[data-lang="vn"]:has(.az-landing) #td-outer-wrap .az-landing .prereg_modal p.prereg_modal__community_label,
html[lang="vi"]:has(.az-landing) #td-outer-wrap .az-landing .prereg_modal p.prereg_modal__community_label,
html[lang^="vi-"]:has(.az-landing) #td-outer-wrap .az-landing .prereg_modal p.prereg_modal__community_label,
html[data-lang="vn"]:has(.az-landing) .az-landing .prereg_modal p.prereg_modal__community_label,
html[lang="vi"]:has(.az-landing) .az-landing .prereg_modal p.prereg_modal__community_label,
html[lang^="vi-"]:has(.az-landing) .az-landing .prereg_modal p.prereg_modal__community_label{
  font-size:1.7cqw!important;
  overflow:hidden;
}
/* Newspaper ใส่ padding/margin/ขนาดขั้นต่ำให้ button ทำให้ปุ่มปิด (X) เลื่อนจากตำแหน่งในแบบ */
html:has(.az-landing) #td-outer-wrap .az-landing .prereg_modal__close,
html:has(.az-landing) .az-landing .prereg_modal__close{
  position:absolute!important;
  box-sizing:border-box!important;
  height:auto!important;min-width:0!important;min-height:0!important;max-width:none!important;
  margin:0!important;padding:0!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;
  background-color:transparent!important;
  line-height:0!important;font-size:0!important;
}