/*
Theme Name: Oceanx88 Nightliner
Version: 1.0.0
Author: oceanx88
Description: คู่มือคาสิโน กีฬา และสลากภาษาไทยของ oceanx88.site
Text Domain: oceanx88-nightliner
Requires at least: 6.3
Requires PHP: 7.4
License: GNU General Public License v2 or later
*/
:root {
    --hull:#103839;
    --deep:#092c31;
    --ink:#122e31;
    --foam:#f7f4e9;
    --shell:#e9e8db;
    --white:#fffdf4;
    --tide:#d3e2d9;
    --copper:#f3bb88;
    --bronze:#77502f;
    --line:#c7c8b9;
    --body:"Fahkwang","Leelawadee UI","Noto Sans Thai",Tahoma,Arial,sans-serif;
    --display:"Baskervville","Georgia",serif;
    color-scheme:light;
}
*,*::before,*::after {box-sizing:border-box}
body {margin:0; background:var(--foam); color:var(--ink); font:1rem/1.7 var(--body); overflow-wrap:break-word}
h1,h2,h3,p {margin:0}
h1,h2,h3 {line-height:1.23}
a {color:inherit; text-decoration:none}
img,picture,svg {display:block}
img {max-width:100%}
button,select {font:inherit}
button,select,label[for] {cursor:pointer}
[hidden] {display:none !important}
:focus-visible {outline:3px solid #ae5620; outline-offset:3px}
.hero :focus-visible,.mast :focus-visible,.turn-section :focus-visible,.closing :focus-visible {outline-color:#ffe2b7}
.frame {width:min(1400px,calc(100% - clamp(48px,8vw,150px))); margin-inline:auto}
.skip {position:absolute; z-index:30; top:7px; left:10px; transform:translateY(-165%); padding:8px 13px; color:var(--ink); background:white}
.skip:focus {transform:none}
.mast {position:relative; z-index:10; background:var(--deep); color:var(--white); border-bottom:1px solid #82928c}
.mast-inner {min-height:66px; display:flex; align-items:center; gap:clamp(18px,4.4vw,72px)}
.wordmark {display:inline-flex; align-items:center; flex:none; gap:9px; white-space:nowrap}
.wordmark img {width:35px; height:35px}
.wordmark span {display:inline-block; font:600 1.65rem/.95 var(--display); letter-spacing:-.06em}
.wordmark b,.hero-brand b {color:var(--copper); font-style:italic}
.main-menu ul,.closing ul {list-style:none; margin:0; padding:0}
.main-menu ul {display:flex; gap:clamp(15px,1.9vw,34px)}
.main-menu a,.desk-login {display:inline-flex; align-items:center; min-height:42px; font-weight:600; font-size:.92rem}
.main-menu a:hover,.desk-login:hover,.main-menu a[aria-current="page"] {text-decoration:underline; text-underline-offset:6px}
.mast-actions {margin-left:auto; display:flex; align-items:center; gap:17px}
.nav-toggle,.main-menu .drawer-login {display:none}
.ui-icon {width:18px; height:18px; flex:none}
.action {display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:25px; border:1px solid transparent; font-size:.94rem; font-weight:700; min-height:46px; padding:10px 21px; line-height:1.4}
.primary-action {background:var(--copper); color:#182c2c}
.primary-action:hover {background:#ffcc9d}
.mast .primary-action {min-height:39px; padding:6px 16px}
.outline-action {border-color:#b4cfbe; background:#09292dba; color:var(--white)}
.outline-action:hover {background:#194748}
.ink-action {background:var(--hull); color:var(--white)}
.ink-action:hover {background:#215958}
.hero {position:relative; isolation:isolate; overflow:hidden; color:var(--white); background:var(--deep); border-bottom:4px solid #b58e68}
.cover-art {position:absolute; inset:0; z-index:-2}
.cover-art img {height:100%; width:100%; object-fit:cover; object-position:65% 48%}
.hero::before {content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#092a2df2 0%,#092a2ddc 18%,#092a2db8 33%,#092a2d53 47%,transparent 65%)}
.hero-inner {display:flex; align-items:center; min-height:clamp(430px,37vw,602px); padding-block:clamp(45px,6vw,100px)}
.hero-copy {width:min(49%,710px)}
.hero-copy h1 {font-size:clamp(1.75rem,2.55vw,2.9rem); font-weight:650}
.hero-brand {display:block; font:normal 500 clamp(4.6rem,7.9vw,9rem)/.84 var(--display); letter-spacing:-.08em}
.hero-brand b {font-weight:500}
.hero-heading {display:block; margin:.66em 0 .36em; letter-spacing:-.045em}
.hero-intro {font-size:clamp(.97rem,1.12vw,1.16rem); color:#f3f6ec; max-width:33em; line-height:1.7; text-wrap:balance}
.hero-actions {display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.directory,.journal {padding-block:clamp(27px,3.1vw,52px)}
.section-head,.journal-heading {display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:16px}
.section-head h2,.journal-heading h2,.lesson-copy h2 {font-size:clamp(1.5rem,2.1vw,2.4rem); letter-spacing:-.045em}
.text-link {display:inline-flex; align-items:center; gap:7px; min-height:38px; color:var(--bronze); font-weight:650; font-size:.9rem}
.text-link:hover,.member-panel a:hover {text-decoration:underline; text-underline-offset:4px}
.topic-grid {display:grid; grid-template-columns:1.13fr repeat(4,minmax(0,1fr)); gap:clamp(9px,1.25vw,20px)}
.topic {display:block; min-width:0; position:relative; border-radius:26px 26px 9px 9px; overflow:hidden; border:1px solid #c1c4b7; background:var(--white)}
.topic:hover {border-color:var(--bronze)}
.topic-photo {aspect-ratio:1.69; overflow:hidden; background:#385759}
@media (min-width:681px) { .topic:first-child .topic-photo {aspect-ratio:1.91} }
.topic-photo img,.read-cover img {width:100%; height:100%; object-fit:cover; transition:transform .22s ease-out}
.topic-sports .topic-photo img {object-position:center 46%}
.topic:hover img,.read-cover:hover img {transform:scale(1.035)}
.topic-caption {padding:11px 23px 12px 13px; border-top:2px solid #bb997a}
.topic-caption h3 {font-size:clamp(1.08rem,1.36vw,1.6rem)}
.topic-caption p {font-size:.83rem; color:#435450; margin-top:3px; line-height:1.44}
.topic-arrow {position:absolute; right:11px; bottom:13px; color:var(--bronze)}
.topic-arrow .ui-icon {width:13px; height:13px}
.turn-band {color:var(--white); background:var(--hull); border-block:1px solid #5b7874}
.turn-section {display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(22px,6vw,90px); padding-block:clamp(31px,3.5vw,62px)}
.lesson-copy p {color:var(--tide); margin:12px 0 6px; max-width:39em}
.lesson-copy .text-link {color:var(--copper)}
.turn-board {margin:0; min-width:0; padding:7px 14px 12px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; border:1px solid #658481; border-radius:15px; background:#092c31}
.turn-board legend {padding:0 6px; font-size:.86rem; color:var(--tide)}
.turn-board input {position:absolute; width:1px; height:1px; opacity:0}
.turn-board label {display:grid; place-items:center; min-height:42px; text-align:center; font-size:.95rem; border:1px solid #79958c; border-radius:20px; padding:5px}
.turn-board input:checked + label {background:var(--foam); color:var(--ink); font-weight:700}
.turn-board input:focus-visible + label {outline:3px solid var(--copper); outline-offset:2px}
.turn-result {grid-column:1/-1; display:none; grid-template-columns:auto 1fr; align-items:center; gap:13px; padding:6px 3px 0}
.turn-result strong {font-size:1.43rem; color:var(--copper); white-space:nowrap}
.turn-result p {font-size:.92rem; line-height:1.56}
#turn-1:checked ~ #result-1,#turn-2:checked ~ #result-2,#turn-3:checked ~ #result-3 {display:grid}
.journal-controls {display:flex; align-items:center; gap:8px; font-size:.9rem}
.journal-controls select {border:1px solid #8c9d93; padding:5px 12px; min-height:40px; border-radius:20px; background:var(--white); color:var(--ink)}
.journal-list,.read-grid {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(13px,1.7vw,25px)}
.read-card {display:grid; grid-template-columns:31% minmax(0,1fr); align-items:start; gap:15px; border-top:1px solid var(--line); padding-top:13px}
.read-cover {aspect-ratio:1.5; background:var(--hull); border-radius:10px; overflow:hidden}
.read-meta {display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 11px; color:#4b5c57; font-size:.8rem}
.read-meta span {color:var(--bronze); font-weight:700}
.read-body h2,.read-body h3 {font-size:clamp(1.05rem,1.47vw,1.63rem); margin:4px 0 5px}
.read-body a:hover {text-decoration:underline; color:var(--bronze)}
.read-body p,.feature-copy p {color:#3a4b47; line-height:1.65}
.read-body p {font-size:.9rem}
.member-guides,.reading {display:grid; grid-template-columns:minmax(0,1fr) minmax(230px,31%); gap:clamp(24px,5.4vw,86px); padding-block:clamp(28px,3.6vw,66px); align-items:start}
.member-guides {border-top:1px solid var(--line)}
.feature-copy h2,.member-panel h2 {font-size:clamp(1.25rem,1.75vw,1.82rem); margin-bottom:11px}
.feature-copy p {margin:.7em 0}
.feature-copy a,.prose a:not(.action) {color:#70451f; text-decoration:underline; text-underline-offset:3px}
.member-panel {border-top:3px solid #b98c65; background:var(--white); padding:17px 21px}
.member-panel a {display:flex; align-items:center; justify-content:space-between; min-height:44px; gap:8px; border-bottom:1px solid var(--line)}
.closing {background:var(--deep); color:var(--foam); border-top:2px solid #b38e72}
.closing-grid {display:grid; grid-template-columns:1.24fr .84fr 1fr; gap:clamp(20px,6vw,94px); padding-block:40px}
.closing-brand p {max-width:29em; color:var(--tide); font-size:.92rem; margin-top:12px}
.closing h2 {color:var(--copper); font-size:1.08rem; margin-bottom:9px}
.closing li a {display:inline-flex; align-items:center; min-height:34px; font-size:.89rem}
.closing li a:hover {text-decoration:underline}
.colophon {display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px; border-top:1px solid #52706a; padding-block:14px; color:var(--tide); font-size:.8rem}
.inner-head {color:var(--white); background:var(--hull); padding-block:clamp(30px,4vw,67px); border-bottom:3px solid #bd956d}
.crumb,.article-byline {display:flex; flex-wrap:wrap; gap:4px 9px; align-items:baseline; color:var(--tide); font-size:.86rem; margin-bottom:14px}
.crumb a:hover {text-decoration:underline}
.inner-head h1 {max-width:27em; font-size:clamp(1.85rem,3.5vw,4rem)}
.inner-head p {color:#e1ebe4; margin-top:13px; max-width:50em}
.prose {min-width:0; overflow-wrap:anywhere; line-height:1.84}
.prose h2,.prose h3 {margin:1.1em 0 .48em}
.prose h2 {font-size:clamp(1.28rem,2.1vw,2.1rem)}
.prose h3 {font-size:1.17rem}
.prose p,.prose ol,.prose ul {margin:0 0 .94em}
.prose ul,.prose ol {padding-inline-start:1.4em}
.prose > :first-child {margin-top:0}
.prose table {width:100%; table-layout:fixed; border-collapse:collapse; margin:15px 0; font-size:.95rem}
.prose th,.prose td {border:1px solid var(--line); padding:8px 10px; text-align:start}
.prose th {background:var(--shell)}
.reading-side {background:var(--white); border:1px solid var(--line); border-radius:17px; overflow:hidden}
.reading-side img {width:100%; height:auto}
.reading-side .text-link {margin:8px 14px}
.post-links {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--line); padding-top:14px}
.archive-body,.missing {padding-block:clamp(27px,3.8vw,61px)}
.archive-intro {margin-bottom:20px}
.outbound {padding:17px 20px; margin-bottom:24px; border-left:3px solid #ad845c; background:var(--white)}
.outbound p {margin:8px 0 0; font-size:.9rem; color:#495a54}
.pagination,.missing .action {margin-top:18px}
@media (max-width:970px) {
    .mast-inner {min-height:59px; gap:9px; flex-wrap:wrap}
    .mast-actions {gap:8px}
    .desk-login {display:none}
    .main-menu {order:3; width:100%}
    .main-menu ul {flex-wrap:wrap; gap:4px 19px}
    .main-menu .drawer-login {display:inline-flex}
    .nav-ready .mast-inner {flex-wrap:nowrap}
    .nav-ready .main-menu {position:absolute; display:none; inset:100% 0 auto; padding:5px 4% 13px; background:var(--deep); border-bottom:2px solid var(--copper)}
    .nav-ready .menu-open .main-menu {display:block}
    .nav-ready .nav-toggle {display:grid; place-content:center; gap:4px; width:41px; height:41px; border:1px solid #829f98; border-radius:50%; color:white; background:transparent}
    .nav-toggle span {width:15px; height:2px; background:currentColor}
    .hero-inner {min-height:358px}
    .hero-brand {font-size:clamp(3.7rem,7vw,5rem)}
    .hero-copy {width:51%}
    .hero-copy h1 {font-size:1.62rem}
    .hero-actions {gap:7px; margin-top:15px}
    .hero-actions .action {padding:8px 12px; min-height:42px; font-size:.85rem}
    .topic {border-radius:17px 17px 8px 8px}
    .topic-caption {padding:9px 8px}
    .topic-caption p {font-size:.76rem}
    .topic-arrow {display:none}
    .read-cover {aspect-ratio:1.18}
}
@media (max-width:680px) {
    .frame {width:calc(100% - 32px)}
    .wordmark {gap:6px}
    .wordmark img {width:30px; height:30px}
    .wordmark span {font-size:1.45rem}
    .mast .primary-action {font-size:.82rem; padding:7px 11px}
    .hero {display:flex; flex-direction:column}
    .cover-art {position:relative; inset:auto; z-index:0; aspect-ratio:4/5; overflow:hidden}
    .cover-art img {object-position:center}
    .hero::before {display:none}
    .hero-inner {min-height:0; width:100%; padding:17px 18px 20px}
    .hero-copy {width:100%}
    .hero-copy h1 {font-size:clamp(1.24rem,4.2vw,1.6rem)}
    .hero-brand {font-size:clamp(3.1rem,12vw,4.5rem)}
    .hero-heading {margin:.34em 0 .3em}
    .hero-intro {font-size:.88rem; line-height:1.55; text-wrap:pretty}
    .hero-actions {margin-top:12px}
    .hero-actions .action {padding-inline:11px; font-size:.82rem}
    .directory,.journal {padding-block:23px 28px}
    .section-head,.journal-heading {gap:8px; margin-bottom:11px}
    .section-head h2,.lesson-copy h2,.journal-heading h2 {font-size:1.38rem}
    .section-head .text-link {font-size:.78rem}
    .topic-grid {grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px}
    .topic {border-radius:14px 14px 7px 7px}
    .topic:first-child {grid-column:1/-1; display:grid; grid-template-columns:52% 1fr; align-items:center}
    .topic:first-child .topic-caption {border:0}
    .topic-photo {aspect-ratio:1.6}
    .topic-caption {padding:9px 10px}
    .topic-caption h3 {font-size:1.07rem}
    .turn-section,.member-guides,.reading {grid-template-columns:minmax(0,1fr); gap:18px}
    .turn-board {padding:5px 8px 10px; gap:5px}
    .turn-board label {font-size:.85rem}
    .turn-result {gap:9px}
    .journal-heading {flex-wrap:wrap}
    .journal-list,.read-grid {grid-template-columns:minmax(0,1fr)}
    .read-card {grid-template-columns:29% minmax(0,1fr); gap:11px}
    .read-body p,.prose table {font-size:.84rem}
    .closing-grid {grid-template-columns:1fr 1fr; gap:23px}
    .closing-brand {grid-column:1/-1}
    .prose th,.prose td {padding:5px}
}
@media (min-width:481px) and (max-width:680px) { .cover-art {aspect-ratio:2.32} }
@media (max-width:360px) {
    .frame {width:calc(100% - 24px)}
    .mast .primary-action .ui-icon {display:none}
    .hero-inner {width:100%; padding-inline:13px}
    .hero-actions .action {padding-inline:8px}
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after {transition-duration:0s !important; scroll-behavior:auto !important} }