/* Our layer on top of the Dragon Nest template.
 *
 * public/dn/css/style.css stays exactly as it shipped so the template can be
 * patched or re-downloaded; everything we change lives here and loads after it.
 */

/* ------------------------------------------------------------- typography */

/* Sarabun for everything the reader reads.
 *
 * The template's Albertus has no Thai glyphs at all, and Chakra Petch (what the
 * old site used) is a display face — fine for headings, tiring for paragraphs.
 * Sarabun is the standard Thai text face and carries Latin too, so one family
 * covers both scripts and the page stops switching typeface mid-sentence.
 * Files are self-hosted (CSP is `font-src 'self'`); licence in
 * public/dn/fonts/Sarabun-OFL.txt.
 */
@font-face {
    font-family: 'Sarabun';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/sarabun-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Sarabun';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/sarabun-medium.woff2') format('woff2');
}

@font-face {
    font-family: 'Sarabun';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/sarabun-semibold.woff2') format('woff2');
}

@font-face {
    font-family: 'Sarabun';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/sarabun-bold.woff2') format('woff2');
}

/* Body copy, forms, navigation, news — Sarabun throughout. */
body,
input,
textarea,
select,
button,
.menu ul li a,
.block-title,
.block-note,
.newsTitle-link,
.news-list-link,
.newsText,
.newsDate,
.meta-link,
.footerBlock-text_copy,
.footerMenu ul li a,
.modalTitle span,
.breadcrumbs,
.contentText,
.button,
.button-green,
.button-orange,
.button-orange-small,
.dowbload-button,
.homeNews-title span,
.gallery-title span,
h1, h2, h3, h4, h5, h6 {
    font-family: 'Sarabun', 'Albertusmedium Regular', Tahoma, sans-serif;
}

/* Sarabun runs a touch smaller than Albertus at the same size, and Thai needs
   more room between lines than the template's fixed leading allows. */
body {
    font-size: 15px;
    line-height: 1.6;
}

.menu ul li a,
.meta-link,
.newsDate {
    letter-spacing: 0;
}

/* ---------------------------------------------------- longer Thai labels */

/* Menu items are spaced for six short English words. */
.menu ul li a {
    white-space: nowrap;
}

/* Headlines in the side list are one line with an ellipsis; Thai runs longer
   than the English the column was sized for. */
.news-list-link {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* -------------------------------------- pieces the template does not have */

/* ทั้งสองกล่องนี้ขึ้นบนกระดาษสีครีมเสมอ (ในโมดัลและหน้าเข้าสู่ระบบ/สมัคร)
   สีเดิมเป็นชุดตัวอักษรอ่อนสำหรับพื้นมืด พอวางบนกระดาษเลยจางจนอ่านไม่ออก */
.formError,
.formSuccess {
    margin: 0 0 16px;
    padding: 11px 15px;
    border-radius: 3px;
    font-size: 14px;
    line-height: 1.55;
    letter-spacing: 0;
}

.formError {
    border-left: 3px solid #b3352c;
    background: rgba(179, 53, 44, 0.12);
    color: #8f2b23;
}

.formSuccess {
    border-left: 3px solid #4a7c2f;
    background: rgba(74, 124, 47, 0.12);
    color: #3c6626;
}

.formHint {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    opacity: 0.7;
}

.modalLead {
    margin-bottom: 18px;
    line-height: 1.6;
    opacity: 0.85;
}

/* Sign out and the language switcher are forms where the template had links. */
.enterBlock form {
    display: inline-flex;
    align-items: center;
    margin-left: 10px;
}

.langBlock-drop form {
    margin: 0;
}

.langBlock-drop button {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

/* Inner pages drop the tall animated hero. The artwork inside .animation is
   absolutely positioned and taller than the box, so without clipping it spills
   over the page below — very visible on the dark item-search page. */
.header-container--compact {
    height: 300px;
    overflow: hidden;
}

/* ของเดิมตัดภาพฮีโร่ทิ้งตรง ๆ ที่ขอบล่างของกรอบ 300px ได้เส้นตรงพาดท้องฟ้า
   ทั้งจอ เพราะภาพในกรอบสว่างกว่าพื้นหลัง body ที่อยู่ถัดลงไป ไล่ให้จางหายไป
   แทน รอยต่อจึงไม่มีให้เห็น (inset:0 เพื่อให้ mask มีความสูงจับ — ตัว
   .animation เองสูง 0 เพราะลูกทุกตัวเป็น absolute กล่องเท่ากรอบพอดีอยู่แล้ว
   ตำแหน่งลูกจึงไม่ขยับ) */
.header-container--compact .animation {
    position: absolute;
    inset: 0;
    opacity: 0.55;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 40%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 40%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}


/* ----------------------------------- campaign strip above the home blocks */

/* The share bar and the event band come from the old shell, where they had
   their own stylesheet. Here they sit on the template's dark parchment, so
   they get a plate of their own rather than floating on the artwork. */
.homeStrip {
    margin: 0 0 30px;
    padding: 22px 28px;
    background: rgba(10, 12, 16, 0.82);
    border: 1px solid rgba(214, 170, 92, 0.28);
    border-radius: 4px;
    text-align: center;
}

.homeStrip--actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.hero-share__eyebrow {
    margin-bottom: 6px;
    font-size: 13px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #d6aa5c;
}

.hero-share__count {
    margin-bottom: 14px;
}

.hero-share__count b {
    font-size: 34px;
    color: #fff;
}

.hero-share__count span {
    margin-left: 8px;
    opacity: 0.75;
}

.hero-share__next {
    margin-top: 14px;
    font-size: 14px;
    opacity: 0.85;
}

.hero-share__next b {
    color: #d6aa5c;
}

.hero-share__cta {
    margin-top: 16px;
}

/* The share track and its markers are positioned, so they only need colour. */
.share-track {
    position: relative;
    height: 10px;
    margin: 0 auto;
    max-width: 720px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
}

.share-track__fill {
    height: 100%;
    background: linear-gradient(90deg, #d6aa5c, #f0d08a);
    border-radius: 999px;
}

.share-track__mark {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(214, 170, 92, 0.6);
    background: #10131a;
    cursor: pointer;
}

.share-track__mark.is-reached {
    background: #d6aa5c;
}

.share-step {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* ------------------------------------------- ตัวละครที่ล้นออกจากไทล์คู่มือ */

/*
 * .blockWiki:after วาด wiki-hero.webp ขนาด 300x234 โดยยึดขอบล่าง (bottom: 0)
 * แต่ไทล์สูงแค่ 130px ตัวละครจึงโผล่ขึ้นไปเหนือไทล์ 104px ไปนั่งทับไทล์
 * "เติมเงิน" (หรือ "ลงทะเบียน" ตอนยังไม่ล็อกอิน) ที่อยู่ข้างบนพอดี และเห็นชัด
 * ขึ้นอีกตอนเอาเมาส์ชี้ เพราะ .block:hover ทำให้ไทล์สว่างขึ้นแต่ตัวละครไม่สว่างตาม
 *
 * แก้สองชั้น: ย่อรูปลงให้ล้นน้อยลง และดันทั้งไทล์ไปอยู่หลังไทล์เพื่อนบ้าน
 * ส่วนที่ยังล้นจึงไปอยู่ "หลัง" การ์ด ไม่ใช่ทับหน้า ภาพบนการ์ดครบเหมือนเดิม
 */
.blockWiki:after {
    width: 232px;
    height: 181px;
    right: -40px;
    background-size: 232px 181px;
}

.blockWiki:hover:after {
    right: -48px;
}

/* .block ทุกใบเป็น z-index 2 และ :hover ดันเป็น 3 — ใบนี้ต้องต่ำกว่าเพื่อนเสมอ
   รวมถึงตอนถูกชี้ด้วย ไม่งั้นตัวละครจะเด้งขึ้นมาทับอีกครั้ง */
.blockWiki,
.blockWiki:hover {
    z-index: 1;
}

@media (max-width: 793px) {
    /* จอแคบเทมเพลตซ่อนตัวละครอยู่แล้ว ไม่ต้องกดให้อยู่ชั้นล่าง */
    .blockWiki,
    .blockWiki:hover {
        z-index: 2;
    }
}

/* ------------------------------------------------------------ event band */

.event-band {
    margin: 0 0 30px;
    padding: 22px 28px;
    background: rgba(10, 12, 16, 0.82);
    border: 1px solid rgba(214, 170, 92, 0.28);
    border-radius: 4px;
}

.event-band__inner {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    justify-content: center;
}

.event-band__icon img {
    width: 56px;
    height: 56px;
}

.event-band__icon figcaption {
    margin-top: 4px;
    font-size: 12px;
    opacity: 0.8;
}

.event-band__eyebrow {
    font-size: 13px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #d6aa5c;
}

.event-band__title {
    margin: 4px 0 8px;
    font-size: 22px;
    color: #fff;
}

.event-band__figures strong {
    font-size: 24px;
    color: #fff;
}

.event-band__figures em {
    margin-left: 10px;
    font-style: normal;
    color: #d6aa5c;
}

/* ------------------------------------------------- buttons fit Thai labels */

/* The template's buttons are fixed-size PNG plates (182x42, 236 for blue) with
   `font-size: 10px` and `text-transform: uppercase` — sized for short English
   words in a face that has no Thai. At 10px Thai is unreadable, and a longer
   label runs straight off the plate. Stretching the plate to the label keeps
   the look and fits any language. */
.button,
.button-green,
.button-orange,
.button-blue {
    width: auto;
    min-width: 182px;
    padding: 0 22px;
    background-size: 100% 100%;
    font-size: 14px;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.button-orange-small {
    width: auto;
    min-width: 140px;
    padding: 0 18px;
    background-size: 100% 100%;
    font-size: 14px;
}

.dowbload-button {
    background-size: 100% 100%;
    font-size: 18px;
}

/* Thai has no uppercase; forcing it only pushes the Latin fallback around. */
:lang(th) .button,
:lang(th) .button-green,
:lang(th) .button-orange,
:lang(th) .button-orange-small,
:lang(th) .dowbload-button,
:lang(th) .tab-button {
    text-transform: none;
}

/* Same story for the small category tags and the menu. */
:lang(th) .menu ul li a,
:lang(th) .meta-link,
:lang(th) .newsDate {
    text-transform: none;
    font-size: 14px;
}

/* แถบปุ่มที่ซ่อนไว้ (ดู pages/dn/home.blade.php) — [hidden] ต้องชนะ .homeStrip */
.homeStrip--hidden {
    display: none !important;
}


/* โลโก้ของ template ถูกวางไว้ตายตัวสำหรับจอกว้าง พอจอแคบตัวอักษรท้ายจะโดนตัด */
.logo img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 560px) {
    .logo img {
        max-width: 88%;
    }
}

/* ------------------------------------------------- แผ่นกระดาษ (โมดัล + หน้าบัญชี) */

/* ของเดิมวางกระดาษเป็น background-size: cover บนกล่องที่สูงไม่เท่ากัน
   ภาพจึงถูกครอบตัด ขอบกระดาษที่ฉีกเป็นหยัก ๆ หายไปทีละด้าน และเงาใน
   ไฟล์ก็ยืดจนกรอบดูเบี้ยว อีกทั้ง modal-reg-bg.webp ยังฝังอัญมณีมาในรูป
   ซ้อนกับอัญมณีที่ :after วาดให้อยู่แล้ว กลายเป็นสองใบ

   เปลี่ยนมาเป็น border-image เก้าช่อง: มุมทั้งสี่คงขนาดจริงเสมอ ขอบยืด
   เฉพาะตามแนวของมัน เนื้อกระดาษตรงกลางยืดเติมพื้นที่ (fill) แผ่นจึงสูง
   เท่าไรก็ได้โดยกรอบไม่ผิดสัดส่วน ไฟล์ nexus-modal-frame.png คือ
   modal-login-bg.webp ที่ลบอัญมณีออกแล้ว */
.registration-modal,
.login-modal,
.authPlate {
    width: 600px;
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
    /* พื้นกระดาษอยู่ในรูปทั้งผืน แล้วให้ border-image วาดด้วย `fill`
       เนื้อในของ nexus-modal-frame.png ถูกสร้างจากสูตรที่ขึ้นกับระยะถึงขอบ
       อย่างเดียว ชิ้นขอบกับชิ้นกลางจึงบรรจบกันเป็นสีเดียวกันเป๊ะ ยืดเท่าไร
       ก็ไม่เห็นรอยต่อ และไม่มีแถบแบบตอนที่ไล่เฉดด้วย CSS ทับเข้าไปอีกชั้น */
    background: #e8cf95;
    box-shadow: none;
    border: 46px solid transparent;
    border-image: url(../images/nexus-modal-frame.png) 46 fill stretch;
    padding: 26px 16px 18px;
    position: relative;
    color: #534436;
}

/* อัญมณีคร่อมขอบบน — เดิมถูก overflow ของแผ่นตัดครึ่ง */
.registration-modal::after,
.login-modal::after,
.authPlate::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -57px;
    margin-left: -65px;
    width: 130px;
    height: 47px;
    background: url(../images/modal-icon.png) no-repeat;
    pointer-events: none;
}

/* เว้นที่ให้อัญมณีกับปุ่มกากบาทที่ยื่นพ้นแผ่น ไม่งั้นโดนขอบจอตัด */
.hystmodal__window {
    margin: 46px 0;
    padding: 26px 16px 18px;
    overflow: visible;
}

/* ปุ่มปิดวางเทียบขอบใน (padding box) ส่วนขอบกระดาษที่ตาเห็นอยู่สูงขึ้นไป
   อีก 46px ตามความหนาของ border-image จึงต้องหักออกด้วย ไม่งั้นกากบาท
   ไปนั่งกลางแผ่น */
.hystmodal__close {
    top: -62px;
    right: -62px;
    z-index: 2;
}

@media (max-width: 620px) {
    .registration-modal,
    .login-modal,
    .authPlate {
        border-width: 30px;
        border-image-width: 30px;
        padding: 14px 4px 10px;
    }

    .hystmodal__window {
        margin: 40px 0;
        padding: 14px 4px 10px;
    }

    .registration-modal::after,
    .login-modal::after,
    .authPlate::after {
        top: -41px;
    }

    .hystmodal__close {
        top: -42px;
        right: -42px;
        background-size: 44px 44px;
        width: 44px;
        height: 44px;
    }
}

/*
 * ช่องกรอก: ร่องที่จมลงไปในกระดาษ
 *
 * เทมเพลตตั้ง `input { width: 80% }` ไว้ ช่องกรอกจริงจึงแคบกว่ากรอบที่ตาเห็น
 * เกือบหนึ่งในห้า ปกติมองไม่ออกเพราะพื้นของทั้งคู่โปร่งใส แต่พอ Chrome ทาสี
 * ตอน autofill สี่เหลี่ยมนั้นก็โผล่ออกมาเป็นกล่องซ้อนกล่อง
 *
 * แก้ที่ต้นเหตุ: ให้ <input> กินเต็มกรอบ ไอคอนลอยทับด้วย position: absolute
 * สิ่งที่ Chrome ทาจึงคลุมทั้งช่องพอดี ไม่เหลือขอบให้เห็น
 *
 * และพื้นเป็นสีทึบค่าเดียว ไม่ใช่ rgba ทับกระดาษ เพราะเงา 1000px ที่ใช้ทับสี
 * ของ autofill รับได้เฉพาะสีทึบ ถ้าพื้นยังโปร่งใสอยู่ สองชั้นจะไม่มีวันตรงกัน
 */
.inField {
    display: block;
    padding: 0;
    border: 1px solid rgba(36, 18, 8, 0.28);
    border-radius: 2px;
    background: #d8c495;
    box-shadow: inset 0 2px 5px rgba(58, 38, 12, 0.2);
    overflow: hidden;
}

.inField .icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    opacity: 0.65;
    pointer-events: none;
    z-index: 1;
}

.inField input {
    display: block;
    width: 100%;
    padding: 12px 16px 12px 46px;
    border: 0;
    background: transparent;
    color: #3f3228;
    font-size: 15px;
}

.inField input::placeholder {
    color: rgba(83, 68, 54, 0.5);
}

/* hover ของเทมเพลตเป็น rgba ขาว ซึ่งจะไปลบสีทึบที่เพิ่งตั้งไว้ */
.inField:hover {
    border-color: rgba(36, 18, 8, 0.4);
    background: #e0cda0;
}

.inField:focus-within {
    border-color: rgba(156, 68, 17, 0.6);
    background: #e6d5ad;
}

.inField input:focus {
    outline: none;
}

/*
 * สีที่ Chrome ทาตอน autofill ทับด้วย background-color ไม่ได้ ต้องใช้เงา inset
 * หนา ๆ เงาที่เขียนไว้ก่อนจะถูกวาดทับเงาที่เขียนทีหลัง จึงใส่เงาร่องไว้ตัวแรก
 * แล้วสีพื้นไว้ตัวหลัง ช่องที่ถูกเติมอัตโนมัติจึงหน้าตาเหมือนช่องปกติเป๊ะ
 */
.inField input:-webkit-autofill,
.inField input:-webkit-autofill:hover,
.inField input:-webkit-autofill:focus,
.inField input:-webkit-autofill:active {
    -webkit-box-shadow: inset 0 2px 5px rgba(58, 38, 12, 0.2), inset 0 0 0 1000px #d8c495;
    box-shadow: inset 0 2px 5px rgba(58, 38, 12, 0.2), inset 0 0 0 1000px #d8c495;
    -webkit-text-fill-color: #3f3228;
    caret-color: #3f3228;
}

.inField:hover input:-webkit-autofill {
    -webkit-box-shadow: inset 0 2px 5px rgba(58, 38, 12, 0.2), inset 0 0 0 1000px #e0cda0;
    box-shadow: inset 0 2px 5px rgba(58, 38, 12, 0.2), inset 0 0 0 1000px #e0cda0;
}

.inField:focus-within input:-webkit-autofill {
    -webkit-box-shadow: inset 0 2px 5px rgba(58, 38, 12, 0.2), inset 0 0 0 1000px #e6d5ad;
    box-shadow: inset 0 2px 5px rgba(58, 38, 12, 0.2), inset 0 0 0 1000px #e6d5ad;
}

/* Firefox ใช้ชื่อมาตรฐาน และไม่ได้ทาพื้นหลังแบบ !important จึงตั้งตรง ๆ ได้ */
.inField input:autofill {
    background: transparent;
    color: #3f3228;
}

/* ระยะบรรทัดเดิมเผื่อไว้สำหรับแผ่นสูงคงที่ที่มีไม่กี่ช่อง */
.registration-modal .formGroup,
.authPlate .formGroup {
    margin-bottom: 14px;
}

.registration-modal .formHint,
.authPlate .formHint {
    margin-top: 4px;
    font-size: 12px;
}

/* แถวปุ่มเดิมเว้นใต้ไว้ 35px เพราะแผ่นสูงตายตัว */
.modalButtons {
    margin-bottom: 0;
    padding-top: 14px;
    gap: 16px;
    flex-wrap: wrap;
}

/* ------------------------------------------- หน้าเข้าสู่ระบบ / สมัครสมาชิก */

/* หน้าเต็มสองหน้านี้เคยใช้ชุดสีฟ้า-ม่วงจาก auth.css ซึ่งเป็นคนละภาษากับ
   ทั้งเว็บ ตอนนี้ใช้แผ่นกระดาษใบเดียวกับโมดัล ทั้งสองทางเข้าจึงหน้าตาเหมือนกัน */
.authShell {
    display: flex;
    justify-content: center;
    padding: 70px 20px 90px;
}

.authPlate .modalTitle {
    margin-bottom: 22px;
}

.authPlate-lead {
    margin-bottom: 20px;
    line-height: 1.6;
    text-align: center;
    opacity: 0.85;
}

/* สองช่องต่อแถวเมื่อจอกว้างพอ ไม่งั้นหน้าสมัครยาวเกินหนึ่งจอ */
.authGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 18px;
}

.authGrid > .formGroup--wide {
    grid-column: 1 / -1;
}

@media (max-width: 620px) {
    .authShell {
        padding: 40px 12px 60px;
    }

    .authGrid {
        grid-template-columns: 1fr;
    }
}

/* สิ่งที่ได้จากการมีบัญชี วางใต้ฟอร์มบนกระดาษแผ่นเดียวกัน */
.authPerks {
    margin: 18px 0 0;
    padding-top: 16px;
    border-top: 1px solid rgba(83, 68, 54, 0.18);
    list-style: none;
    display: grid;
    gap: 9px;
}

.authPerks li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    line-height: 1.5;
    letter-spacing: 0;
}

.authPerks b {
    flex: 0 0 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(156, 68, 17, 0.14);
    color: #9c4411;
    font-size: 12px;
    text-align: center;
    line-height: 22px;
}

.authSwitch {
    margin-top: 16px;
    text-align: center;
    font-size: 14px;
}

.authSwitch a {
    color: #9c4411;
    font-weight: 600;
}

.authSwitch a:hover {
    color: #ff6b16;
}

/* หน้าสมัครมีหกช่อง จับคู่สองช่องต่อแถวแล้วยังต้องการหน้ากระดาษกว้างกว่า */
.authPlate--wide {
    width: 760px;
}

.authRemember {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 4px;
    font-size: 14px;
    letter-spacing: 0;
    cursor: pointer;
}

.authRemember input {
    width: 16px;
    height: 16px;
    accent-color: #9c4411;
}

/* ปิดรับสมัครชั่วคราว: บอกให้ชัดว่าไม่ใช่ความผิดของคนกรอก */
.authClosed {
    margin: 6px 0 4px;
    padding: 26px 22px;
    text-align: center;
    border: 1px solid rgba(156, 68, 17, 0.25);
    border-radius: 4px;
    background: rgba(156, 68, 17, 0.07);
}

.authClosed b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: rgba(156, 68, 17, 0.16);
    color: #9c4411;
    font-size: 20px;
}

.authClosed h3 {
    margin-bottom: 8px;
    font-size: 19px;
    color: #231f1e;
}

.authClosed p {
    line-height: 1.6;
    opacity: 0.85;
}

/* ช่องที่กรอกผิด: ทำให้เห็นว่าเป็นช่องไหนโดยไม่ต้องอ่านข้อความอย่างเดียว */
/* สีทึบเหมือนช่องปกติ ด้วยเหตุผลเดียวกัน — เงาของ autofill ต้องเอาไปใช้ต่อได้ */
.inField--invalid,
.inField--invalid:hover {
    border-color: rgba(179, 53, 44, 0.55);
    background: #d5b98d;
}

.inField--invalid input:-webkit-autofill {
    -webkit-box-shadow: inset 0 2px 5px rgba(58, 38, 12, 0.2), inset 0 0 0 1000px #d5b98d;
    box-shadow: inset 0 2px 5px rgba(58, 38, 12, 0.2), inset 0 0 0 1000px #d5b98d;
}

.fieldError {
    display: block;
    margin-top: 6px;
    color: #8f2b23;
    font-size: 12.5px;
    letter-spacing: 0;
}

/* ------------------------------------------------------------- inner pages */

/* ดาวน์โหลด: ปุ่มก้อนเดียวกับหน้าแรก พร้อมแถวรายละเอียดใต้ปุ่ม */
.dnDownload {
    margin: 26px 0 10px;
    text-align: center;
}

.dnDownload-meta {
    gap: 14px;
    margin-top: 14px;
    font-size: 14px;
    opacity: 0.85;
    flex-wrap: wrap;
}

.dnDownload-sep {
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.25);
}

/* ตารางสเปก: template ไม่มีตาราง จึงยืมสีของกรอบเนื้อหามาใช้ */
.dnTableWrap {
    overflow-x: auto;
    margin: 16px 0 10px;
}

.dnTable {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.dnTable th,
.dnTable td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid rgba(120, 90, 40, 0.18);
}

.dnTable thead th {
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom-width: 2px;
}

.dnTable tbody th {
    white-space: nowrap;
}

.dnTable tbody tr:hover td,
.dnTable tbody tr:hover th {
    background: rgba(214, 170, 92, 0.08);
}

/* หน้าดาวน์โหลดใช้ .download ซ้ำจากหน้าแรก แต่ไม่ต้องการระยะห่างด้านบนเท่านั้น */
.dnDownload .download {
    margin-top: 120px;
}

/* --------------------------------------------------------- flash messages */

/* .alert-box came from the old bright site's Tailwind bundle and had no styles
   at all on this shell — the text simply floated over the hero artwork, which
   is exactly how it looked when a QR request failed. */
.alert-box {
    max-width: 1180px;
    margin: 0 auto 18px;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: 14.5px;
    line-height: 1.55;
    background: rgba(8, 12, 22, 0.94);
    border: 1px solid rgba(120, 160, 220, 0.24);
    color: #d8e6f5;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.alert-success {
    background: rgba(18, 34, 20, 0.95);
    border-color: rgba(108, 194, 74, 0.45);
    color: #cdf0bd;
}

.alert-error {
    background: rgba(38, 16, 16, 0.95);
    border-color: rgba(224, 86, 79, 0.45);
    color: #ffc2be;
}

.alert-info {
    background: rgba(12, 24, 38, 0.95);
    border-color: rgba(76, 196, 255, 0.4);
    color: #b6e4ff;
}

/* --------------------------------------------------------- หน้าแจ้งข้อผิดพลาด */

/* 403 / 404 ของเดิมเป็นหน้าเปล่าของ Laravel — ตัวเลขกับคำอังกฤษกลางจอขาว
   ซึ่งอ่านแล้วเหมือนเว็บพัง ไม่ใช่ว่าเปิดผิดหน้าหรือไม่มีสิทธิ์ */
.errPage {
    max-width: 44rem;
    margin: 0 auto;
    padding: 30px 0 40px;
    text-align: center;
}

.errPage-code {
    margin-bottom: 4px;
    font-size: 72px;
    font-weight: 700;
    line-height: 1;
    color: rgba(36, 18, 8, 0.18);
    letter-spacing: 0.06em;
}

.errPage h1 {
    margin-bottom: 12px;
    font-size: 30px;
    font-weight: 700;
    color: #231f1e;
}

.errPage-lead {
    margin-bottom: 26px;
    font-size: 16px;
    line-height: 1.7;
    color: #6f5e49;
}

.errPage-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    flex-wrap: wrap;
}

.errPage-link {
    color: #9c4411;
    font-weight: 600;
    letter-spacing: 0;
}

.errPage-link:hover {
    color: #ff6b16;
}

/* ทางเข้าระบบหลังบ้าน — ไอคอนเล็กข้างชื่อไอดี ไม่ใช่รายการในเมนูหลัก
   มีแอดมินไม่กี่คน เมนูหลักเป็นของผู้เล่นทุกคน คำว่า "ระบบหลังบ้าน Admin"
   ยาวพอที่จะเบียดเมนูที่เหลือให้แคบลงทั้งแถบ */
.adminDot {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin-right: 10px;
    border: 1px solid rgba(214, 170, 92, 0.32);
    border-radius: 3px;
    color: rgba(214, 170, 92, 0.75);
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
}

.adminDot:hover,
.adminDot.is-active {
    border-color: rgba(214, 170, 92, 0.7);
    background: rgba(214, 170, 92, 0.14);
    color: #f0d08a;
}

/* ------------------------------------------------------------ ฟุตเตอร์ */

/*
 * เทมเพลตวาง footer-bg.webp (1920x481) ไว้แบบไม่ตั้ง background-size
 * รูปจึงวาดที่ขนาดจริงเสมอ: จอกว้างกว่า 1920 รูปไปไม่ถึงขอบสองข้าง จอแคบกว่า
 * ก็โดนครอบตัดข้าง ๆ และตัวกล่องสูง 478px ซึ่งเตี้ยกว่ารูป ก้นรูปจึงขาดไปด้วย
 */
.footerPage {
    background-size: cover;
    background-position: center top;
}

/*
 * ฉากมืดทับงานศิลป์ — และห้ามสร้าง stacking context ให้ .footerPage
 *
 * เมนูกับบรรทัดลิขสิทธิ์ต้องอ่านออก จึงต้องมีฉากมืดคลุมมังกรไว้ แต่วิธีที่ใช้
 * ก่อนหน้า (isolation: isolate + ::after ที่ z-index: -1) พังปุ่มลูกศรขึ้นบน:
 * เทมเพลตมีแถบดำ `.footer:after` (z-index: auto, สูง 86px) ปิดหัวฟุตเตอร์ไว้
 * และปุ่ม `.toTop` ยื่นลงมาทับแถบนั้น 36px ปุ่มเห็นเต็มเพราะมัน z-index: 2 แข่ง
 * อยู่ใน stacking context เดียวกับแถบดำ พอ isolate ปุ่มก็ถูกขังอยู่ในกล่องของ
 * .footerPage ซึ่งเป็น z-index: auto ต่ำกว่าแถบดำ ปุ่มเลยโดนตัดครึ่ง
 *
 * ทางออก: ไม่ใช้ pseudo-element เลย วางฉากมืดเป็น background ชั้นบนสุดของ
 * .footerPage เอง (gradient อยู่เหนือรูป) ไม่ต้องมีชั้นซ้อนให้แข่งกับใคร
 */
.footerPage {
    background-image:
        linear-gradient(180deg, rgba(12, 9, 5, 0.88) 0%, rgba(12, 9, 5, 0.93) 55%, #14100c 100%),
        url(../images/footer-bg.webp?v=painted-v1);
    background-repeat: no-repeat, no-repeat;
    background-size: 100% 100%, cover;
    background-position: center top, center top;
}

/* ---------------------------------------------------- บล็อกข่าวหน้าแรก */

/* .homeNews ตั้ง height: 689px ตายตัว ซึ่งวัดจากข้อความอังกฤษของเทมเพลต
   หัวข้อข่าวไทยยาวกว่าและตัดบรรทัดมากกว่า เนื้อหาจึงล้นกล่อง ดันปุ่ม
   "ข่าวทั้งหมด" ตกลงไปใต้แผ่นกระดาษ แทนที่จะอยู่ในกรอบตามแบบ */
.homeNews {
    height: auto;
    min-height: 689px;
    display: flex;
    flex-direction: column;
}

/* ปุ่มเกาะก้นกล่องเสมอ ไม่ว่าข่าวจะสั้นหรือยาว */
.homeNews .moreNews {
    margin-top: auto;
    padding-top: 26px;
}

/* รูปในแกลเลอรีมาได้ทุกสัดส่วน กรอบเป็น 16:9 — cover ตัดให้พอดีแทนที่จะยืดรูป
   สำคัญตอนเจ้าของเว็บเอาภาพหน้าจอจริงมาใส่ ซึ่งจะมีขนาดไม่เท่ากัน */
.gallery .item-slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ------------------------------------------- เชื่อม Discord ก่อนสมัครไอดี */

/* ปุ่มเชื่อม Discord: ป้ายหนังสีไวน์เย็บขอบ สีเดียวกับปุ่มในหน้าย้ายอุปกรณ์ ไม่ใช้ปุ่ม PNG ของเทมเพลต
   ซึ่งฟอนต์ 10px ตัวพิมพ์ใหญ่ของมันอ่านภาษาไทยไม่ออก
   รอยเย็บคือ outline ประเส้นในขอบ (ไม่ต้องใช้ pseudo-element)
   ต้องตั้งสีที่ตัวลูก เพราะ button ในเทมเพลตบังคับ color ขาวด้วย !important ทั้งปุ่ม */
.discordConnect {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: fit-content;
    min-width: 240px;
    max-width: 100%;
    height: auto;
    margin: 8px auto 4px;
    padding: 14px 28px;
    border: 1px solid #5c2b34;
    border-radius: 3px;
    background: #7d414b;
    box-shadow: 0 4px 10px rgba(92, 43, 52, 0.28);
    outline: 1px dashed rgba(246, 228, 189, 0.55);
    outline-offset: -6px;
    filter: none;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: 0;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
}

.discordConnect:hover {
    filter: none;
    text-decoration: none;
    background: #6b3540;
    transform: translateY(-1px);
}

.discordConnect:active {
    transform: translateY(0);
}

/* โฟกัสคีย์บอร์ด: เปลี่ยนรอยเย็บเป็นเส้นทึบให้เห็นชัด */
.discordConnect:focus-visible {
    outline: 2px solid #f6e4bd;
    outline-offset: -5px;
    box-shadow: 0 0 0 3px #7d414b;
}

.discordConnect svg {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: #f0d9a8;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.discordConnect > span {
    color: #f6e4bd;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

/* ตราประทับ (ใช้ในโน้ต "เชื่อมแล้ว"): โล่ ทรงเดียวกับตราในหน้าย้ายอุปกรณ์ */
.discordSeal {
    display: grid;
    place-items: center;
    flex: 0 0 46px;
    width: 46px;
    height: 52px;
    color: #f0d9a8;
    background: radial-gradient(circle at 35% 28%, #a85b66 0%, #7d414b 52%, #5c2b34 100%);
    clip-path: polygon(50% 0, 96% 20%, 96% 74%, 50% 100%, 4% 74%, 4% 20%);
}

.discordSeal svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.discordSeal--ok {
    background: radial-gradient(circle at 35% 28%, #86a06e 0%, #56704c 52%, #3d5535 100%);
}

/* เชื่อมแล้ว: โน้ตกระดาษที่ประทับตราสีเขียวไว้ */
.discordLinked {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 18px;
    padding: 11px 16px 11px 12px;
    border: 1px solid rgba(86, 112, 76, 0.5);
    border-left: 3px solid #56704c;
    border-radius: 3px;
    background: rgba(255, 250, 236, 0.75);
}

.discordLinked .discordSeal {
    flex-basis: 38px;
    width: 38px;
    height: 43px;
}

.discordLinked .discordSeal svg {
    width: 21px;
    height: 21px;
}

.discordLinked-text {
    display: grid;
    gap: 1px;
    min-width: 0;
    color: #513c2c;
    font-size: 14px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.discordLinked-text b {
    font-weight: 700;
}

.discordLinked-text span {
    color: #816a4d;
    font-size: 13px;
}

.discordLinked-text a {
    justify-self: start;
    color: #7d414b;
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.discordLinked-text a:hover {
    color: #a24450;
}


/* ---------------------------------------------------- article body lists */

/* ข่าวแบบ HTML (เช่นประกาศ CBT) ใช้ h3 / ul / ol แต่ reset ของเทมเพลตลบ bullet และระยะห่างทิ้ง
   รายการเลยติดกันเป็นก้อนเดียว คืนให้เฉพาะในเนื้อข่าว */
.contentText h2,
.contentText h3,
.contentText h4 {
    margin: 1.6em 0 0.6em;
}

.contentText ul,
.contentText ol {
    margin: 0 0 1em;
    padding-left: 1.6em;
}

.contentText ul { list-style: disc; }
.contentText ol { list-style: decimal; }

.contentText li {
    margin: 0.3em 0;
}

.contentText p {
    margin: 0 0 1em;
}