/*!
 * Hanuman 3D — manual styles
 * © 2026 Woradon Phikun (วรดร พิกุล) · https://www.hanumanconnect.com · admin@hanumanconnect.com
 * สงวนลิขสิทธิ์ ห้ามคัดลอก ดัดแปลง แจกจ่าย หรือนำไปใช้ต่อโดยไม่ได้รับอนุญาตเป็นลายลักษณ์อักษร
 * All rights reserved. Not covered by the GPL licence of the PHP files - see LICENSE.txt.
 * three.js and its add-ons in assets/vendor are MIT licensed by their authors.
 */
/* Hanuman 3D - manual: lightbox (--box), admin page (--admin) and printable A4 view (--print). */
.hnmw3d-man {
	--m-navy: #0f2c4c;
	--m-green: #0c8f63;
	--m-green-soft: #e6f5ee;
	--m-line: #dfe5ec;
	--m-muted: #5b6b7c;
	--m-amber-soft: #fff4dc;
	--m-amber: #7a4a00;
	font-family: "Prompt", "Sarabun", "Noto Sans Thai", system-ui, sans-serif;
	color: var(--m-navy);
	line-height: 1.65;
	font-size: 15px;
	text-align: left;
}
.hnmw3d-man *, .hnmw3d-man *::before, .hnmw3d-man *::after { box-sizing: border-box; }
.hnmw3d-man[hidden] { display: none !important; }
.hnmw3d-man h1, .hnmw3d-man h2, .hnmw3d-man h3, .hnmw3d-man p, .hnmw3d-man ol, .hnmw3d-man ul, .hnmw3d-man dl, .hnmw3d-man dd, .hnmw3d-man figure { margin: 0; padding: 0; font-family: inherit; color: inherit; text-transform: none; letter-spacing: 0; }
.hnmw3d-man ol, .hnmw3d-man ul { list-style: none; }
.hnmw3d-man__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--m-green); }

/* Lightbox */
.hnmw3d-man--box { position: fixed; inset: 0; z-index: 1000001; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(9, 24, 43, .62); backdrop-filter: blur(3px); }
.hnmw3d-man--box .hnmw3d-man__dialog { display: flex; flex-direction: column; width: min(1040px, 100%); height: min(860px, 100%); background: #fff; border-radius: 18px; box-shadow: 0 30px 80px rgba(9, 24, 43, .45); overflow: hidden; outline: 0; }
.hnmw3d-man__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 22px; border-bottom: 1px solid var(--m-line); background: linear-gradient(120deg, #fff 0%, #f1faf6 60%, #dff2ea 100%); }
.hnmw3d-man__bar h2 { font-size: 19px; font-weight: 700; line-height: 1.3; }
.hnmw3d-man__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.hnmw3d-man .hnmw3d-man__btn { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border: 1px solid var(--m-line); border-radius: 10px; background: #fff; color: var(--m-navy); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; }
.hnmw3d-man .hnmw3d-man__btn:hover { border-color: var(--m-green); color: var(--m-green); }
.hnmw3d-man .hnmw3d-man__btn.is-primary { background: var(--m-green); border-color: var(--m-green); color: #fff; }
.hnmw3d-man .hnmw3d-man__btn.is-primary:hover { background: #0a7652; color: #fff; }
.hnmw3d-man .hnmw3d-man__btn:focus-visible, .hnmw3d-man .hnmw3d-man__close:focus-visible, .hnmw3d-man__toc a:focus-visible { outline: 3px solid #7cc7ab; outline-offset: 2px; }
.hnmw3d-man .hnmw3d-man__close { width: 40px; height: 40px; border: 0; border-radius: 10px; background: #eef2f6; color: var(--m-navy); font-size: 24px; line-height: 1; cursor: pointer; padding: 0; }
.hnmw3d-man .hnmw3d-man__close:hover { background: #dfe5ec; }

.hnmw3d-man__layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 0; flex: 1; }
.hnmw3d-man__nav { padding: 18px 14px; border-right: 1px solid var(--m-line); background: #f7f9fb; overflow-y: auto; }
.hnmw3d-man__toc { display: grid; gap: 2px; }
.hnmw3d-man__toc a { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 9px; color: var(--m-navy); font-size: 13.5px; font-weight: 500; line-height: 1.45; text-decoration: none; }
.hnmw3d-man__toc a:hover, .hnmw3d-man__toc a.is-active { background: var(--m-green-soft); color: #075e41; }
.hnmw3d-man__toc a span { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1px solid var(--m-line); font-size: 11.5px; font-weight: 700; display: grid; place-items: center; }
.hnmw3d-man__toc a.is-active span { background: var(--m-green); border-color: var(--m-green); color: #fff; }
.hnmw3d-man__content { padding: 26px 30px 34px; overflow-y: auto; }
.hnmw3d-man__sec { max-width: 720px; padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid var(--m-line); scroll-margin-top: 12px; }
.hnmw3d-man__sec:last-of-type { border-bottom: 0; margin-bottom: 0; }
.hnmw3d-man .hnmw3d-man__h { display: flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 700; line-height: 1.35; margin-bottom: 8px; }
.hnmw3d-man__h span { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--m-navy); color: #fff; font-size: 15px; display: grid; place-items: center; }
.hnmw3d-man .hnmw3d-man__lead { color: var(--m-muted); margin-bottom: 14px; }
.hnmw3d-man__fig { margin: 0 0 16px !important; border: 1px solid var(--m-line); border-radius: 12px; overflow: hidden; background: #f7f9fb; }
.hnmw3d-man__fig img { display: block; width: 100%; height: auto; }
.hnmw3d-man__fig figcaption { padding: 7px 12px; font-size: 12.5px; color: var(--m-muted); border-top: 1px solid var(--m-line); background: #fff; }
.hnmw3d-man__steps { display: grid; gap: 9px; }
.hnmw3d-man__steps li { position: relative; padding-left: 22px; }
.hnmw3d-man__steps li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--m-green); }
.hnmw3d-man__steps strong { font-weight: 600; }
.hnmw3d-man code { padding: 1px 6px; border-radius: 5px; background: #eef2f6; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .88em; color: var(--m-navy); }
.hnmw3d-man .hnmw3d-man__tip { margin-top: 14px; padding: 11px 14px; border-left: 4px solid #e0a52b; border-radius: 0 10px 10px 0; background: var(--m-amber-soft); color: var(--m-amber); font-size: 14px; }
.hnmw3d-man__faq dt { font-weight: 600; margin-top: 14px; }
.hnmw3d-man__faq dt:first-child { margin-top: 0; }
.hnmw3d-man__faq dd { color: var(--m-muted); padding-left: 14px; border-left: 3px solid var(--m-green-soft); margin-top: 4px; }
.hnmw3d-man__contact { max-width: 720px; margin-top: 26px; padding: 16px 20px; border-radius: 14px; background: var(--m-navy); color: #fff; font-size: 14px; }
.hnmw3d-man .hnmw3d-man__contact p { color: #fff; }
.hnmw3d-man .hnmw3d-man__contact-h { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: #8fe0c1; }
.hnmw3d-man .hnmw3d-man__contact-n { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.hnmw3d-man__contact span { display: inline-block; min-width: 64px; color: #a9bdd3; }

@media (max-width: 760px) {
	.hnmw3d-man--box { padding: 0; }
	.hnmw3d-man--box .hnmw3d-man__dialog { height: 100%; border-radius: 0; }
	.hnmw3d-man__bar { padding: 12px 14px; align-items: flex-start; }
	.hnmw3d-man__bar h2 { font-size: 16px; }
	.hnmw3d-man__layout { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
	.hnmw3d-man__nav { padding: 8px 10px; border-right: 0; border-bottom: 1px solid var(--m-line); overflow-x: auto; }
	.hnmw3d-man__toc { display: flex; gap: 6px; }
	.hnmw3d-man__toc a { white-space: nowrap; padding: 8px 10px; }
	.hnmw3d-man__content { padding: 18px 16px 28px; }
	.hnmw3d-man .hnmw3d-man__h { font-size: 18px; }
}

/* Admin page */
.hnmw3d-man--admin { max-width: 1080px; }
.hnmw3d-man--admin .hnmw3d-man__hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 16px 0; padding: 24px 28px; border: 1px solid var(--m-line); border-radius: 16px; background: linear-gradient(120deg, #fff 0%, #f1faf6 55%, #dff2ea 100%); }
.hnmw3d-man--admin .hnmw3d-man__hero h2 { font-size: 22px; font-weight: 700; margin: 2px 0 6px; }
.hnmw3d-man--admin .hnmw3d-man__hero p:last-child { max-width: 560px; color: var(--m-muted); font-size: 14px; }
.hnmw3d-man--admin .nav-tab-wrapper { margin-bottom: 0; }
.hnmw3d-man--admin .hnmw3d-man__layout { border: 1px solid #c3c4c7; border-top: 0; background: #fff; border-radius: 0 0 12px 12px; overflow: hidden; }
.hnmw3d-man--admin .hnmw3d-man__nav { position: sticky; top: 32px; align-self: start; background: transparent; border-right: 0; }
.hnmw3d-man--admin .hnmw3d-man__content { overflow: visible; border-left: 1px solid var(--m-line); }
.hnmw3d-man--admin .hnmw3d-man__sec { scroll-margin-top: 48px; }

/* Printable A4 view */
body.hnmw3d-man--print { margin: 0; background: #e9edf2; font-size: 11.5pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.hnmw3d-man--print .hnmw3d-man__printbar { position: sticky; top: 0; z-index: 2; padding: 10px; text-align: center; background: var(--m-navy); }
.hnmw3d-man--print .hnmw3d-man__printbar button { padding: 9px 18px; border: 0; border-radius: 9px; background: var(--m-green); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.hnmw3d-man--print .hnmw3d-man__cover, .hnmw3d-man--print .hnmw3d-man__content { width: 210mm; margin: 18px auto; background: #fff; box-shadow: 0 6px 24px rgba(15, 44, 76, .15); }
.hnmw3d-man--print .hnmw3d-man__cover { min-height: 297mm; padding: 34mm 22mm 20mm; display: flex; flex-direction: column; background: linear-gradient(160deg, #fff 0%, #f1faf6 55%, #cfeadd 100%); }
.hnmw3d-man--print .hnmw3d-man__cover img { width: 96px; height: 96px; border-radius: 20px; margin-bottom: 22mm; box-shadow: 0 8px 24px rgba(15, 44, 76, .18); }
.hnmw3d-man--print .hnmw3d-man__cover h1 { font-size: 30pt; font-weight: 700; line-height: 1.25; margin: 6px 0 10px; max-width: 150mm; }
.hnmw3d-man--print .hnmw3d-man__sub { font-size: 13pt; color: var(--m-muted); max-width: 140mm; }
.hnmw3d-man--print .hnmw3d-man__cover-toc { margin-top: 20mm; padding: 14px 18px; border-radius: 14px; background: rgba(255, 255, 255, .8); border: 1px solid var(--m-line); max-width: 130mm; }
.hnmw3d-man--print .hnmw3d-man__cover-toc > p { font-weight: 700; margin-bottom: 6px; }
.hnmw3d-man--print .hnmw3d-man__toc a { padding: 3px 0; font-size: 11pt; }
.hnmw3d-man--print .hnmw3d-man__cover-foot { margin-top: auto; padding-top: 12px; border-top: 2px solid var(--m-green); font-weight: 600; }
.hnmw3d-man--print .hnmw3d-man__content { padding: 18mm 20mm; overflow: visible; }
.hnmw3d-man--print .hnmw3d-man__sec, .hnmw3d-man--print .hnmw3d-man__contact { max-width: none; }
.hnmw3d-man--print .hnmw3d-man__sec { break-inside: avoid; padding-bottom: 5mm; margin-bottom: 5mm; }
.hnmw3d-man--print .hnmw3d-man__h { font-size: 16pt; break-after: avoid; }
.hnmw3d-man--print .hnmw3d-man__fig, .hnmw3d-man--print .hnmw3d-man__tip, .hnmw3d-man--print .hnmw3d-man__steps li, .hnmw3d-man--print .hnmw3d-man__contact { break-inside: avoid; }
.hnmw3d-man--print .hnmw3d-man__fig img { max-height: 76mm; object-fit: contain; }
/* Paged output: the cover is a full-bleed page of its own; every other page keeps real margins so
   nothing touches the paper edge, and carries the page number and the credit line in the margin. */
@page { size: A4; margin: 17mm 0 19mm; @bottom-left { content: "© Woradon Phikun · www.hanumanconnect.com · admin@hanumanconnect.com"; font: 8pt "Prompt", sans-serif; color: #5b6b7c; margin-left: 20mm; } @bottom-right { content: counter(page) " / " counter(pages); font: 8pt "Prompt", sans-serif; color: #5b6b7c; margin-right: 20mm; } }
@page :first { margin: 0; @bottom-left { content: none; } @bottom-right { content: none; } }
@media print {
	body.hnmw3d-man--print { background: #fff; }
	.hnmw3d-man--print .hnmw3d-man__printbar { display: none; }
	.hnmw3d-man--print .hnmw3d-man__cover, .hnmw3d-man--print .hnmw3d-man__content { width: auto; margin: 0; box-shadow: none; }
	.hnmw3d-man--print .hnmw3d-man__cover { height: 297mm; min-height: 0; break-after: page; }
	.hnmw3d-man--print .hnmw3d-man__content { padding: 0 20mm; }
	.hnmw3d-man--print .hnmw3d-man__sec { break-inside: avoid; }
	.hnmw3d-man--print .hnmw3d-man__h, .hnmw3d-man--print .hnmw3d-man__lead { break-after: avoid; }
	.hnmw3d-man--print .hnmw3d-man__fig, .hnmw3d-man--print .hnmw3d-man__tip, .hnmw3d-man--print .hnmw3d-man__steps li, .hnmw3d-man--print .hnmw3d-man__faq dt, .hnmw3d-man--print .hnmw3d-man__contact, .hnmw3d-man--print .hnmw3d-man__credit { break-inside: avoid; }
	.hnmw3d-man--print .hnmw3d-man__faq dt { break-after: avoid; }
	.hnmw3d-man--print .hnmw3d-man__steps li { orphans: 2; widows: 2; }
}
.hnmw3d-man .hnmw3d-man__credit { max-width: 720px; margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--m-line); font-size: 12.5px; color: var(--m-muted); line-height: 1.7; }
.hnmw3d-man .hnmw3d-man__credit a { color: var(--m-navy); font-weight: 600; text-decoration: none !important; }
.hnmw3d-man .hnmw3d-man__credit a:hover { color: var(--m-green); }
.hnmw3d-man--print .hnmw3d-man__credit { max-width: none; font-size: 9pt; }
.hnmw3d-man--print .hnmw3d-man__cover-foot { font-weight: 400; }
.hnmw3d-man--print .hnmw3d-man__cover-foot > p:first-child { font-weight: 600; }
.hnmw3d-man--print .hnmw3d-man__cover-foot .hnmw3d-man__credit { margin-top: 4px; padding-top: 0; border-top: 0; }

/* Theme-proofing: themes often style bare li, img, a and headings. */
.hnmw3d-man li { list-style: none !important; margin: 0; }
.hnmw3d-man li::marker { content: none; }
.hnmw3d-man .hnmw3d-man__fig img { border-radius: 0 !important; margin: 0; max-width: 100%; box-shadow: none; }
.hnmw3d-man .hnmw3d-man__toc a, .hnmw3d-man .hnmw3d-man__btn { text-decoration: none !important; box-shadow: none; }
.hnmw3d-man .hnmw3d-man__steps li { padding-left: 22px; }
.hnmw3d-man .hnmw3d-man__close, .hnmw3d-man .hnmw3d-man__btn { text-transform: none; letter-spacing: 0; font-family: inherit; }
.hnmw3d-man--box .hnmw3d-man__layout { grid-template-rows: minmax(0, 1fr); overflow: hidden; }
.hnmw3d-man--box .hnmw3d-man__nav, .hnmw3d-man--box .hnmw3d-man__content { min-height: 0; }
@media (max-width: 760px) { .hnmw3d-man--box .hnmw3d-man__layout { grid-template-rows: auto minmax(0, 1fr); } }

/* 1.207.0 (owner 2026-10-18): lightbox header - logo + name / title / download / close.
   Wide screens: one row. Phones: compact block (name row with ×, title, full-width download) that shrinks to one row
   (logo + name + icon download + ×) once the reader scrolls. No print button. */
.hnmw3d-man--box .hnmw3d-man__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "id act close" "title act close"; align-items: center; column-gap: 12px; row-gap: 2px; }
.hnmw3d-man__id { grid-area: id; display: flex; align-items: center; gap: 10px; min-width: 0; }
.hnmw3d-man .hnmw3d-man__logo { flex: none; display: block; width: auto; height: 34px; max-width: 120px; object-fit: contain; border-radius: 6px; background: #fff; padding: 2px; margin: 0; box-shadow: none; }
.hnmw3d-man__id .hnmw3d-man__eyebrow { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-transform: none; letter-spacing: .02em; font-size: 13px; }
.hnmw3d-man--box .hnmw3d-man__bar h2 { grid-area: title; min-width: 0; word-break: normal; overflow-wrap: break-word; }
.hnmw3d-man--box .hnmw3d-man__bar .hnmw3d-man__actions { grid-area: act; flex-wrap: nowrap; }
.hnmw3d-man--box .hnmw3d-man__bar .hnmw3d-man__close { grid-area: close; }
.hnmw3d-man .hnmw3d-man__btn { gap: 6px; }
@media (max-width: 760px) {
	.hnmw3d-man--box .hnmw3d-man__bar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id close" "title title" "act act"; row-gap: 6px; padding: 10px 12px 12px; align-items: center; }
	.hnmw3d-man .hnmw3d-man__logo { height: 28px; max-width: 96px; }
	.hnmw3d-man--box .hnmw3d-man__bar h2 { font-size: 16.5px; line-height: 1.35; }
	.hnmw3d-man--box .hnmw3d-man__bar .hnmw3d-man__actions { justify-content: stretch; }
	.hnmw3d-man--box .hnmw3d-man__bar .hnmw3d-man__btn.is-primary { flex: 1; justify-content: center; min-height: 42px; }
	.hnmw3d-man--box .hnmw3d-man__bar .hnmw3d-man__close { width: 36px; height: 36px; font-size: 22px; }
	.hnmw3d-man--box .hnmw3d-man__bar.is-compact { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "id act close"; padding: 8px 12px; }
	.hnmw3d-man--box .hnmw3d-man__bar.is-compact h2 { display: none; }
	.hnmw3d-man--box .hnmw3d-man__bar.is-compact .hnmw3d-man__btn.is-primary { flex: none; width: 40px; min-height: 36px; height: 36px; padding: 0; }
	.hnmw3d-man--box .hnmw3d-man__bar.is-compact .hnmw3d-man__btn-t { display: none; }
}
@media (max-width: 760px) { .hnmw3d-man--admin .hnmw3d-man__hero { padding: 16px; } .hnmw3d-man--admin .hnmw3d-man__actions { width: 100%; } .hnmw3d-man--admin .hnmw3d-man__btn.is-primary { flex: 1; justify-content: center; } }