/*
Theme Name: Allinbet88 Bayfront
Theme URI: https://allinbet88.online/
Author: allinbet88
Version: 1.0.1
Description: เลือกคู่มือตามหมวดของ allinbet88 ในบรรยากาศคาสิโนคลับร่วมสมัยริมอ่าวสิงคโปร์
Text Domain: allinbet88-bayfront
Requires at least: 6.3
Requires PHP: 7.4
License: GNU General Public License v2 or later
*/
:root {
    --midnight:#101d2c;
    --indigo:#163942;
    --blue:#24535b;
    --porcelain:#f7f6f1;
    --ivory:#e4eae6;
    --ink:#122936;
    --muted:#4e6269;
    --rule:#becac8;
    --amber:#a5ded3;
    --oak:#804439;
    --sans:"Fahkwang","Leelawadee UI","Noto Sans Thai",Tahoma,Arial,sans-serif;
    --display:"Baskervville",Baskerville,"Times New Roman",serif;
    --gutter:clamp(18px,4.5vw,80px);
}
*,*::before,*::after { box-sizing:border-box; }
body { margin:0; background:var(--porcelain); color:var(--ink); font:1rem/1.7 var(--sans); overflow-wrap:break-word; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { line-height:1.42; }
a { color:inherit; text-decoration:none; }
img,picture,svg { display:block; }
img { max-width:100%; }
select,button { font:inherit; }
button,select,label[for] { cursor:pointer; }
[hidden] { display:none!important; }
:focus-visible { outline:3px solid #916224; outline-offset:4px; }
.hero :focus-visible,.mast :focus-visible,.closing :focus-visible,.lesson :focus-visible { outline-color:var(--amber); }
.frame { width:min(1510px,calc(100% - 2 * var(--gutter))); margin-inline:auto; }
.skip { position:absolute; z-index:8; padding:8px 14px; background:white; transform:translateY(-150%); }
.skip:focus { transform:none; }
.mast { position:relative; z-index:5; color:var(--porcelain); background:var(--midnight); border-bottom:1px solid #464252; }
.mast-inner { min-height:72px; display:flex; align-items:center; gap:clamp(18px,3vw,50px); }
.wordmark { display:inline-flex; align-items:center; gap:9px; white-space:nowrap; flex:none; }
.wordmark img { width:34px; height:34px; }
.wordmark>span { font:600 clamp(1.7rem,2.25vw,2.25rem)/1 var(--display); text-transform:uppercase; letter-spacing:-.055em; }
.wordmark b { color:var(--amber); font-weight:400; }
.main-menu { margin-inline:auto; }
.main-menu ul,.closing ul { list-style:none; margin:0; padding:0; }
.main-menu ul { display:flex; gap:clamp(13px,2.2vw,34px); }
.main-menu a,.desk-login { display:inline-flex; align-items:center; min-height:44px; font-size:.92rem; font-weight:620; }
.main-menu a:hover,.main-menu a[aria-current="page"],.desk-login:hover { color:var(--amber); }
.mast-actions { display:flex; align-items:center; gap:18px; }
.main-menu .drawer-login,.nav-toggle { display:none; }
.ui-icon { width:17px; height:17px; flex:none; }
.action { min-height:45px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:9px 20px; font-size:.95rem; font-weight:650; line-height:1.5; border:1px solid transparent; border-radius:5px; }
.primary-action { background:var(--amber); color:#251d15; }
.primary-action:hover { background:#ffcf8a; }
.outline-action { color:white; border-color:#c5bac2; background:#22223291; }
.outline-action:hover,.ink-action:hover { background:var(--blue); }
.ink-action { background:var(--indigo); color:white; }

.hero { position:relative; isolation:isolate; display:grid; align-items:stretch; background:var(--midnight); color:var(--porcelain); min-height:clamp(435px,36vw,595px); }
.cover-art { position:absolute; inset:0; z-index:-2; overflow:hidden; background:var(--indigo); }
.cover-art img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:77% center; }
.hero::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(90deg,#101d2cf7 0%,#163642dd 21%,#20444d91 42%,transparent 72%); }
.hero-frame { display:flex; align-items:center; }
.hero-copy { width:min(44vw,660px); padding-block:clamp(37px,4.1vw,67px); }
.hero-brand { display:block; font:400 clamp(4.9rem,8.2vw,9rem)/.93 var(--display); text-transform:uppercase; letter-spacing:-.068em; padding-bottom:.17em; }
.hero-brand b { color:var(--amber); font-weight:400; }
.hero-heading { display:block; font-weight:630; font-size:clamp(1.35rem,2.05vw,2.45rem); letter-spacing:-.035em; text-wrap:balance; }
.hero-intro { margin:11px 0 21px; max-width:33rem; color:#f0ece7; font-size:clamp(.98rem,1.08vw,1.13rem); }
.hero-actions { display:flex; flex-wrap:wrap; gap:10px; }
.directory { padding-block:clamp(29px,3.1vw,55px) clamp(39px,4.2vw,70px); }
.section-head,.journal-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px; }
.section-head h2,.journal-heading h2 { font-size:clamp(1.5rem,2.05vw,2.5rem); letter-spacing:-.035em; }
.text-link { display:inline-flex; align-items:center; gap:8px; min-height:40px; color:var(--oak); font-size:.9rem; font-weight:650; }
.text-link:hover,.member-panel a:hover { text-decoration:underline; text-underline-offset:4px; }
.topic-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(9px,1.25vw,23px); }
.topic { display:block; min-width:0; }
.topic-photo { position:relative; aspect-ratio:1.65; overflow:hidden; background:var(--indigo); border-radius:22px 4px 4px 4px; }
.topic-photo img,.read-cover img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .24s ease; }
.topic:hover img,.read-cover:hover img { transform:scale(1.035); }
.topic-caption { display:flex; justify-content:space-between; align-items:center; gap:6px; padding:10px 0; border-bottom:1px solid var(--rule); }
.topic-caption h3 { font-size:clamp(1.1rem,1.48vw,1.55rem); }
.topic-caption p { font-size:clamp(.78rem,.88vw,.95rem); color:var(--muted); }
.topic-arrow { display:grid; place-items:center; flex:none; color:var(--oak); }
.topic-arrow .ui-icon { width:16px; }
.lesson { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(22px,4vw,62px); align-items:center; padding:clamp(24px,3.6vw,60px); color:var(--porcelain); background:linear-gradient(110deg,#212236,#303044 70%); border-radius:5px; border-inline-start:6px solid #b78950; }
.lesson-copy h2 { font-size:clamp(1.6rem,2.65vw,3.1rem); line-height:1.36; letter-spacing:-.035em; }
.lesson-copy p { color:#e6e2e3; margin:10px 0 5px; max-width:34rem; }
.lesson .text-link { color:var(--amber); }
.relay-demo { padding:12px clamp(12px,1.45vw,22px) 20px; margin:0; min-width:0; border:1px solid #777183; border-radius:5px; }
.relay-demo legend { padding-inline:7px; color:var(--porcelain); font-weight:620; }
.relay-choice { position:absolute; width:1px; height:1px; opacity:0; }
.relay-demo label { display:inline-flex; align-items:center; min-height:41px; padding:6px 11px; margin:2px 3px 4px 0; border:1px solid #898294; border-radius:4px; font-size:.88rem; }
.relay-choice:checked+label { color:#291e11; background:var(--amber); border-color:var(--amber); }
.relay-choice:focus-visible+label { outline:3px solid white; outline-offset:3px; }
.relay-result { display:none; gap:16px; align-items:center; margin-top:14px; min-height:84px; }
#relay-back:checked~.result-back,#relay-breast:checked~.result-breast,#relay-fly:checked~.result-fly { display:flex; }
.relay-ranges { flex:none; display:grid; gap:3px; width:6.35rem; font-variant-numeric:tabular-nums; }
.relay-ranges span { display:flex; justify-content:space-between; align-items:baseline; gap:6px; padding:4px 6px; color:var(--ink); background:var(--ivory); }
.relay-ranges small { font-size:.67rem; }
.relay-ranges b { font-size:.95rem; }
.relay-explainer { min-width:0; }
.relay-explainer strong { display:block; color:var(--amber); font-size:1.35rem; }
.relay-explainer p { color:#f1ebee; font-size:.93rem; }
.journal { padding-block:clamp(34px,4.4vw,70px); }
.journal-controls { display:flex; align-items:center; gap:7px; font-size:.86rem; }
.journal-controls select { padding:6px 9px; border:1px solid var(--rule); border-radius:4px; color:var(--ink); background:white; }
.journal-list,.read-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(13px,1.7vw,28px); }
.read-card,.reading-side { min-width:0; }
.read-cover { position:relative; display:block; width:100%; aspect-ratio:1.65; overflow:hidden; background:var(--indigo); border-radius:5px; }
.read-body { padding-block:13px; }
.read-meta,.article-byline,.crumb { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; font-size:.84rem; color:var(--muted); }
.read-meta span { font-weight:700; color:var(--oak); }
.read-body h2,.read-body h3 { margin:.38em 0; font-size:clamp(1.1rem,1.38vw,1.52rem); }
.read-body a:hover { text-decoration:underline; }
.read-body p { color:var(--muted); font-size:.94rem; }
.member-guides,.reading { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,.82fr); gap:clamp(25px,5vw,90px); }
.member-guides { padding-bottom:clamp(30px,4vw,68px); }
.member-panel { align-self:start; border:1px solid var(--rule); padding:22px; border-radius:4px; background:var(--ivory); }
.member-panel h2 { font-size:1.38rem; margin-bottom:12px; }
.member-panel a { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:9px 0; border-top:1px solid var(--rule); font-weight:600; color:var(--oak); }
.closing { padding:clamp(30px,4vw,70px) 0 20px; color:var(--porcelain); background:var(--midnight); border-top:4px double #805f44; }
.closing-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(20px,5vw,80px); }
.closing-brand p { margin-top:15px; max-width:28rem; color:#e3dce2; font-size:.93rem; }
.closing h2 { margin:.2em 0 .7em; font-size:1.06rem; color:var(--porcelain); }
.closing nav a { display:inline-block; padding:4px 0; color:#e5e1e6; font-size:.92rem; }
.closing nav a:hover { text-decoration:underline; color:var(--amber); }
.colophon { display:flex; justify-content:space-between; flex-wrap:wrap; gap:4px 18px; padding-top:15px; margin-top:26px; border-top:1px solid #585162; font-size:.8rem; color:#e1dce2; }
.inner-head { color:var(--porcelain); background:var(--indigo); padding:clamp(30px,4vw,65px) 0; border-bottom:3px solid #b1854c; }
.inner-head h1 { max-width:65rem; font-size:clamp(1.85rem,3.45vw,4.1rem); letter-spacing:-.04em; text-wrap:balance; }
.inner-head p { max-width:55rem; margin-top:13px; font-size:clamp(.98rem,1.16vw,1.2rem); color:#e9e4e7; }
.crumb,.article-byline { color:#f4d39e; margin-bottom:11px; }
.crumb a,.article-byline a { text-decoration:underline; text-underline-offset:3px; }
.reading,.archive-body,.missing { padding-block:clamp(27px,4vw,65px); }
.archive-intro { max-width:870px; margin-bottom:28px; }
.prose { min-width:0; color:var(--ink); font-size:1.05rem; line-height:1.85; }
.prose h2 { margin:1.45em 0 .4em; font-size:clamp(1.25rem,1.95vw,2rem); }
.prose h3 { margin:1.3em 0 .4em; font-size:1.16rem; }
.prose>:first-child { margin-top:0; }
.prose p,.prose ul,.prose ol,.prose blockquote { margin:0 0 1em; }
.prose ul,.prose ol { padding-inline-start:1.55em; }
.prose a:not(.action) { color:var(--oak); text-decoration:underline; text-underline-offset:3px; }
.prose table { width:100%; max-width:100%; margin-block:1em; border-collapse:collapse; font-size:.93em; }
.prose caption { text-align:left; font-weight:700; }
.prose td,.prose th { border:1px solid var(--rule); padding:7px 9px; text-align:start; overflow-wrap:anywhere; }
.prose th { background:var(--ivory); }
.prose figure { margin-inline:0; max-width:100%; overflow-x:auto; }
.reading-side img { width:100%; height:auto; border-radius:5px; }
.outbound { padding:16px 18px; margin-bottom:25px; border-inline-start:4px solid var(--oak); background:var(--ivory); }
.outbound p { margin:8px 0 0; font-size:.93rem; color:var(--muted); }
.post-links { display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; border-top:1px solid var(--rule); padding-top:18px; }
.pagination { margin-top:24px; }
.page-numbers { display:inline-block; padding:6px 10px; }
.missing h1 { font-size:clamp(2rem,5vw,4rem); } .missing .action { margin-top:15px; }
.nav-toggle span { width:17px; height:2px; background:var(--porcelain); }
@media(max-width:1000px){
    .mast-inner,.mast-actions { gap:13px; }
    .hero-copy { width:min(54vw,555px); }
    .topic-arrow { display:none; }
}
@media(max-width:860px){
    .mast-inner { min-height:58px; flex-wrap:wrap; gap:0; }
    .mast-actions { margin-inline-start:auto; gap:8px; }
    .nav-toggle { display:grid; place-content:center; gap:5px; width:42px; height:42px; border:1px solid #83747c; border-radius:4px; background:var(--indigo); }
    .main-menu { display:none; position:absolute; top:100%; left:0; width:100%; margin:0; padding:12px var(--gutter); background:var(--midnight); border-bottom:1px solid #83747c; }
    .menu-open .main-menu { display:block; }
    .main-menu ul { flex-wrap:wrap; gap:0 23px; }
    .main-menu .drawer-login { display:inline-flex; color:var(--amber); gap:6px; }
    .desk-login { display:none; }
    .hero { min-height:370px; }
    .journal-list,.read-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:730px){
    .lesson,.member-guides,.reading { grid-template-columns:1fr; }
    .lesson-copy h2 br { display:none; }
    .closing-grid { grid-template-columns:1fr 1fr; }
    .closing-brand { grid-column:1/-1; }
}
@media(max-width:660px){
    :root { --gutter:15px; }
    .wordmark { gap:6px; } .wordmark img { width:27px; height:27px; } .wordmark>span { font-size:1.55rem; }
    .mast .primary-action { min-height:41px; padding:6px 10px; font-size:.83rem; }
    .nav-toggle { width:40px; height:40px; }
    .hero { grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:center; min-height:0; gap:14px; padding:14px var(--gutter); }
    .hero::after { display:none; }
    .hero-frame { grid-area:1/1; min-width:0; width:100%; }
    .hero-copy { width:100%; padding:8px 0; }
    .hero-brand { font-size:clamp(3.2rem,9.3vw,4.1rem); }
    .hero-heading { font-size:1.28rem; }
    .hero-intro { margin:8px 0 13px; font-size:.91rem; }
    .hero-actions { gap:7px; }
    .hero-actions .action { min-height:43px; padding:6px 11px; font-size:.86rem; }
    .cover-art { grid-area:1/2; position:relative; inset:auto; z-index:0; width:100%; aspect-ratio:2/3; border-radius:25px 4px 4px 4px; }
    .cover-art img { object-fit:contain; object-position:center; }
    .topic-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
    .topic-casino { grid-column:1/-1; display:grid; grid-template-columns:1.05fr 1fr; background:var(--ivory); border-radius:15px 3px 3px 3px; overflow:hidden; }
    .topic-casino .topic-photo { border-radius:0; } .topic-casino .topic-caption { padding:10px 12px; }
    .topic-photo { border-radius:14px 3px 3px 3px; }
    .topic-caption { padding:7px 0; } .topic-caption h3 { font-size:1.12rem; }
    .section-head h2,.journal-heading h2 { font-size:1.4rem; }
    .section-head .text-link,.journal-controls { font-size:.8rem; }
    .lesson { padding:19px 13px; gap:14px; }
    .relay-demo label { font-size:.82rem; padding:4px 7px; min-height:38px; }
    .relay-demo { padding:7px 9px 12px; }
    .relay-result { gap:10px; flex-wrap:wrap; }
    .relay-ranges { width:100%; display:flex; } .relay-ranges span { gap:7px; } 
}
@media(max-width:480px){
    .hero { display:flex; flex-direction:column; align-items:stretch; padding:17px var(--gutter) var(--gutter); }
    .hero-frame { order:-1; }
    .hero-copy { padding:0; }
    .hero-brand { font-size:clamp(3.4rem,13vw,4.2rem); }
    .hero-heading { font-size:clamp(1.23rem,5.25vw,1.58rem); }
    .cover-art { align-self:stretch; flex:0 0 auto; }
}
@media(max-width:365px){
    :root { --gutter:10px; }
    .mast .primary-action .ui-icon { display:none; }
    .journal-list,.read-grid { grid-template-columns:1fr; }
    .hero-actions .action { padding-inline:8px; }
    .lesson { padding:16px 9px; }
}
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after { transition:none!important; scroll-behavior:auto!important; }
}


:root{--display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;--sans:"Leelawadee UI","Noto Sans Thai",Tahoma,Arial,sans-serif}
.mast{background:#102531;color:#fff;border-bottom:1px solid #40636a}.wordmark>span,.hero-brand{font-family:var(--display);font-weight:780;letter-spacing:-.055em}.wordmark b,.hero-brand b{font-weight:500;color:#a9e6d7}.wordmark>span{font-size:clamp(1.35rem,2.05vw,2.15rem)}.primary-action{background:#a7e1d4;color:#112e37}.primary-action:hover{background:#c8f3e6;color:#0c2731}.action{border-radius:6px}.hero{background:#132e3d;color:#f7f5ec}.hero::after{display:none}.hero-heading{color:#f6f1df}.hero .hero-intro{color:#dce9e7}.outline-action{background:transparent;color:#fff;border-color:#91a8ac}.hero-brand{font-size:clamp(3.3rem,6vw,6.5rem)}.hero-frame{z-index:1}.directory{padding-block:clamp(24px,3.3vw,48px)}.section-head{border-bottom:1px solid #bdc7c2;padding-bottom:11px}.topic{border-radius:10px;overflow:hidden;background:#183744;color:#fff}.topic-photo{border-radius:0;aspect-ratio:1.58}.topic-grid{gap:clamp(10px,1.25vw,22px)}.topic-caption{padding:10px 12px;color:#fff;border:0}.topic-caption p,.topic-arrow{color:#c4e7de}.lesson{background:linear-gradient(115deg,#172e42,#21494e);border-left:4px solid #e48772}.relay-ranges{width:7rem}.read-cover{border-radius:8px}.member-panel{border-top:3px solid #d48470}.closing{border-top-color:#79a6a0}.inner-head{background:linear-gradient(110deg,#152b40,#234a50)}
@media(min-width:661px){.hero{display:grid;grid-template-columns:39% 61%;min-height:clamp(365px,32vw,555px)}.hero-frame{grid-area:1/1;width:100%;min-width:0}.hero-copy{width:100%;padding:35px clamp(17px,3vw,53px) 35px var(--gutter)}.cover-art{grid-area:1/2;position:relative;inset:auto;z-index:0;margin:16px 18px 16px 0;border-radius:3px 26px 3px 26px;overflow:hidden}.cover-art img{object-fit:cover;object-position:83% center}.hero-brand{font-size:clamp(2.5rem,4.35vw,5rem)}}
@media(max-width:860px){.mast-inner{flex-wrap:nowrap;gap:9px}.wordmark{margin-right:auto}.mast-actions{gap:6px}}
@media(max-width:660px){.hero{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;min-height:0}.hero-frame{order:1;width:100%;min-width:0}.hero-copy{width:100%;padding:13px var(--gutter) 19px}.hero .hero-brand{font-size:clamp(2.6rem,10vw,3.9rem)}.hero .hero-intro{margin:7px 0 12px}.cover-art{position:relative;inset:auto;grid-area:auto;z-index:0;order:0;width:100%;height:auto;align-self:stretch;aspect-ratio:1.73;border-radius:0}.cover-art img{object-fit:cover;object-position:center 16%}.topic-casino,.topic-casino .topic-photo{border-radius:7px}.topic-casino .topic-caption{background:#183744}.topic-caption{padding:8px}.mast-inner{min-height:54px}.wordmark{gap:5px}.wordmark>span{font-size:clamp(1.05rem,4.75vw,1.4rem)}.wordmark img{width:25px;height:25px}.mast .primary-action{padding-inline:9px}.mast .primary-action .ui-icon{display:none}.relay-ranges{width:100%}.hero-actions .action{font-size:clamp(.77rem,3.25vw,.92rem);padding-inline:10px}}