/*
Theme Name: Pearl Quay
Theme URI: https://xn--12c8dbmixe4id.online/
Version: 1.0.1
Author: หวยลูกหมู
Description: เว็บไซต์คู่มือหวย คาสิโน และกีฬาภาษาไทยในบรรยากาศโรงแรมริมอ่าว
Text Domain: pearlquay
Requires at least: 6.3
Requires PHP: 7.4
License: GNU General Public License v2 or later
*/
:root{
    --deep:#092d33;--petrol:#12434a;--sea:#116169;--coral:#efaa95;--ember:#88402f;--shell:#faf6ef;--white:#fffdf9;--ink:#173236;--muted:#526768;--line:#c8d3ce;
    --sans:"Fahkwang","Leelawadee UI","Noto Sans Thai",Tahoma,Arial,sans-serif;
    --number:"Barlow Semi Condensed","Arial Narrow",Arial,sans-serif;
    --gutter:clamp(18px,4.4vw,75px)
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;color:var(--ink);background:var(--shell);font:1rem/1.74 var(--sans);overflow-wrap:break-word}
h1,h2,h3,p{margin:0}
h1,h2,h3{line-height:1.39}
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 #bf503a;outline-offset:3px}
.mast :focus-visible,.hero :focus-visible,.lesson :focus-visible,.closing :focus-visible{outline-color:#ffd0ac}
.frame{width:min(1450px,calc(100% - 2 * var(--gutter)));margin-inline:auto}
.skip{position:absolute;top:5px;left:10px;z-index:20;padding:9px 15px;background:white;transform:translateY(-180%)}
.skip:focus{transform:none}
.mast{background:var(--deep);color:white;position:relative;z-index:4;border-bottom:1px solid #527379}
.mast-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:70px}
.wordmark{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;flex:none}
.wordmark img{width:39px;height:39px}
.wordmark>span{font-size:1.45rem;font-weight:800;letter-spacing:-.045em}
.main-menu ul,.closing ul{list-style:none;margin:0;padding:0}
.main-menu ul{display:flex;align-items:center;gap:clamp(15px,2.1vw,36px)}
.main-menu a,.desk-login{display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:.92rem}
.main-menu a:hover,.main-menu a[aria-current=page],.desk-login:hover{color:var(--coral)}
.mast-actions{display:flex;align-items:center;gap:18px}
.main-menu .drawer-login,.nav-toggle{display:none}
.ui-icon{width:18px;height:18px;flex:none}
.action{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid transparent;min-height:45px;padding:8px 19px;border-radius:26px;font-size:.94rem;line-height:1.48;font-weight:700}
.primary-action{background:var(--coral);color:#33251f}
.primary-action:hover{background:#ffc5b4}
.mast .primary-action{min-height:40px;padding:8px 17px}
.outline-action{color:white;border-color:#d9e6dc}
.outline-action:hover{background:#204e53}
.ink-action{color:white;background:var(--petrol)}
.ink-action:hover{background:var(--deep)}
.hero{isolation:isolate;position:relative;display:grid;min-height:clamp(392px,33.5vw,550px);overflow:hidden;background:#0a3036;color:white}
.cover-art{position:absolute;inset:0;z-index:-2}
.cover-art img{width:100%;height:100%;object-fit:cover;object-position:65% 52%}
.hero::after{content:"";z-index:-1;position:absolute;inset:0;background:linear-gradient(90deg,#082e34 0%,#092b32f7 19%,#0a2b33d6 35%,#0a283346 59%,transparent 77%)}
.hero-frame{display:flex;align-items:center}
.hero-copy{max-width:min(58%,690px);padding:clamp(32px,4vw,64px) 0}
.hero h1{font-size:clamp(1.9rem,2.8vw,3.2rem);letter-spacing:-.045em}
.hero-brand{display:block;color:#fff4e5;font-size:clamp(3.4rem,6.65vw,7.1rem);font-weight:750;letter-spacing:-.065em;line-height:1.35}
.hero-heading{display:block;text-wrap:balance;font-size:clamp(1.4rem,2.2vw,2.7rem);line-height:1.55}
.hero-intro{max-width:37rem;margin:11px 0 20px;color:#ecf0e9;font-size:clamp(.95rem,1.1vw,1.15rem);line-height:1.8}
.hero-actions{display:flex;flex-wrap:wrap;gap:9px}
.directory{padding-block:clamp(25px,2.75vw,46px) clamp(28px,4vw,62px)}
.section-head,.journal-heading{display:flex;align-items:center;justify-content:space-between;gap:13px;margin:0 0 17px}
.section-head h2,.journal-heading h2,.member-panel h2{font-size:clamp(1.52rem,2.23vw,2.65rem);color:var(--deep);letter-spacing:-.045em}
.text-link{display:inline-flex;gap:8px;align-items:center;min-height:40px;color:var(--ember);font-size:.93rem;font-weight:700}
.text-link:hover,.member-panel a:hover{text-decoration:underline;text-underline-offset:4px}
.topic-grid{display:grid;grid-template-columns:1.25fr repeat(4,minmax(0,1fr));gap:clamp(9px,1.1vw,19px)}
.topic{border-radius:14px;position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:flex-end;min-width:0;aspect-ratio:1.17;background:var(--deep);color:white}
.topic-photo{position:absolute;inset:0;z-index:-2}
.topic-photo img,.read-cover img{width:100%;height:100%;object-fit:cover;transition:transform .24s ease-out}
.topic:hover img,.read-cover:hover img{transform:scale(1.035)}
.topic::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#081f23f5 0%,#0c2328bb 26%,#0c232808 69%)}
.topic-lottery{aspect-ratio:auto}
.topic-caption{width:100%;display:flex;align-items:end;justify-content:space-between;gap:4px;padding:clamp(11px,1.1vw,19px)}
.topic-caption h3{font-weight:700;font-size:clamp(1.18rem,1.54vw,1.75rem)}
.topic-caption p{font-size:clamp(.77rem,.91vw,1rem);color:#f1eee6;line-height:1.48}
.topic-arrow{width:24px;height:24px;flex:none;display:grid;place-items:center;border-radius:50%;border:1px solid #ffffff8c;color:#fff8ec}
.topic-arrow .ui-icon{width:14px;height:14px}
.topic:hover .topic-arrow{background:var(--coral);color:var(--deep)}
.lesson{display:grid;grid-template-columns:.9fr 1.15fr;align-items:center;gap:clamp(22px,5vw,88px);padding:clamp(24px,3.4vw,62px);border-radius:24px;background:var(--petrol);color:var(--shell)}
.lesson h2{font-size:clamp(1.8rem,2.9vw,3.45rem);letter-spacing:-.05em}
.lesson-copy p{color:#e0ebe5;margin:12px 0 5px}
.lesson .text-link{color:#ffc1a8}
.ticket-demo{min-width:0;margin:0;padding:12px 18px 18px;border:1px solid #81a59e;border-radius:16px;background:var(--deep)}
.ticket-demo legend{font-size:.88rem;padding:0 7px}
.ticket-choice{position:absolute;opacity:0;width:1px;height:1px}
.ticket-demo label{display:inline-flex;align-items:center;min-height:38px;border:1px solid #86a6a6;padding:5px 13px;margin:0 3px 5px 0;color:white;border-radius:25px;font:600 1.05rem/1.3 var(--number);font-variant-numeric:tabular-nums}
.ticket-choice:focus-visible+label{outline:3px solid var(--coral);outline-offset:2px}
.ticket-choice:checked+label{background:var(--shell);color:var(--ink);border-color:var(--shell)}
.ticket-result{display:none;align-items:center;gap:clamp(14px,2vw,32px);margin-top:13px}
#pick-front:checked~.result-front,#pick-last:checked~.result-last,#pick-both:checked~.result-both{display:flex}
.ticket-digits{display:flex;background:#f9f2e3;border-radius:8px;color:#495b5c;padding:8px 9px;flex:none}
.ticket-digits b{display:block;padding:5px 4px;line-height:1.1;font:700 clamp(1.3rem,2.22vw,2.5rem)/1.1 var(--number);font-variant-numeric:tabular-nums}
.ticket-digits .front-digits{border-right:1px dashed #8b9b91}
.result-front .front-digits,.result-last .last-digits,.result-both .ticket-digits b{color:var(--ember);text-decoration:underline;text-underline-offset:5px}
.ticket-explainer strong{display:block;color:#ffd1ba;font-size:1.2rem}
.ticket-explainer p{font-size:.92rem;line-height:1.56}
.journal{padding-block:clamp(35px,4vw,72px)}
.journal-controls{display:flex;align-items:center;gap:8px;font-size:.87rem}
.journal-controls select{max-width:100%;border:1px solid #91a5a4;border-radius:8px;background:var(--white);color:var(--ink);padding:6px 10px}
.journal-list,.read-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.9vw,30px)}
.read-card{min-width:0}
.read-cover{display:block;width:100%;aspect-ratio:1.67;overflow:hidden;background:#d6dfd8;border-radius:12px}
.read-body{padding:13px 0}
.read-meta,.article-byline{display:flex;flex-wrap:wrap;align-items:center;gap:5px 10px;color:var(--ember);font-size:.83rem}
.read-meta span{font-weight:700}
.read-meta time{color:var(--muted)}
.read-body h2,.read-body h3{font-size:clamp(1.1rem,1.42vw,1.55rem);margin:.44em 0}
.read-body h2 a:hover,.read-body h3 a:hover{text-decoration:underline}
.read-body p{font-size:.94rem;color:var(--muted);line-height:1.69}
.member-guides,.reading{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,.8fr);gap:clamp(25px,6vw,104px)}
.member-guides{padding-bottom:clamp(35px,4vw,70px)}
.member-panel{padding:24px;background:#f0e8db;border-radius:14px}
.member-panel h2{font-size:1.4rem;margin-bottom:12px}
.member-panel a{display:flex;align-items:center;justify-content:space-between;padding:8px 0;color:var(--ember);border-top:1px solid #d5c9b9;font-weight:600}
.closing{padding:clamp(32px,4vw,68px) 0 19px;color:var(--shell);background:var(--deep)}
.closing-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(18px,5vw,80px)}
.closing-brand p{color:#c4d9d8;font-size:.94rem;max-width:26rem;margin-top:14px}
.closing h2{font-size:1.05rem;margin:.2rem 0 .66rem}
.closing nav a{font-size:.91rem;display:inline-block;padding:4px 0;color:#e8efeb}
.closing nav a:hover,.colophon a:hover{color:var(--coral);text-decoration:underline}
.colophon{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 20px;border-top:1px solid #4c7173;padding-top:14px;margin-top:28px;color:#d2dfd7;font-size:.8rem}
.inner-head{color:white;background:var(--petrol);padding:clamp(26px,4vw,68px) 0;border-bottom:4px solid var(--coral)}
.inner-head h1{max-width:68rem;font-size:clamp(1.9rem,3.45vw,4.05rem);letter-spacing:-.04em;text-wrap:balance}
.inner-head p{color:#e9efea;max-width:54rem;font-size:clamp(.98rem,1.16vw,1.2rem);margin-top:14px}
.crumb,.article-byline{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 13px;color:#f5bfae;font-size:.85rem}
.crumb a,.article-byline a{text-decoration:underline;text-underline-offset:3px}
.reading,.archive-body,.missing{padding-block:clamp(30px,4vw,65px)}
.prose{min-width:0;font-size:1.05rem;line-height:1.85}
.prose h2{font-size:clamp(1.29rem,2vw,1.95rem);margin:1.48em 0 .46em}
.prose h3{font-size:1.17rem;margin:1.35em 0 .4em}
.prose>:first-child{margin-top:0}
.prose p,.prose ol,.prose ul,.prose blockquote{margin:0 0 1em}
.prose a:not(.action){color:var(--ember);text-decoration:underline;text-underline-offset:3px}
.prose ol,.prose ul{padding-inline-start:1.5em}
.prose table{border-collapse:collapse;width:100%;max-width:100%;margin-block:1.1em;font-size:.93em}
.prose caption{font-weight:700;text-align:left}
.prose td,.prose th{padding:7px 9px;text-align:start;border:1px solid var(--line);overflow-wrap:anywhere}
.prose th{background:#e5ede7}
.prose figure{max-width:100%;overflow-x:auto;margin-inline:0}
.reading-side{min-width:0}
.reading-side img{width:100%;height:auto;border-radius:12px}
.outbound{border-inline-start:4px solid var(--coral);padding:16px 19px;background:#eaf0ea;margin-bottom:25px}
.outbound p{font-size:.92rem;color:var(--muted);margin:8px 0 0}
.post-links{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;border-top:1px solid var(--line);padding-top:18px}
.archive-intro{max-width:870px;margin-bottom:28px}
.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}
@media(max-width:1000px){
    .mast-inner{gap:12px}.mast-actions{gap:12px}
    .topic-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
    .topic{aspect-ratio:.84}.topic-arrow{display:none}
    .topic-caption{padding:12px}.lesson{gap:22px}
}
@media(max-width:850px){
    .mast-inner{min-height:62px;flex-wrap:wrap;gap:0}
    .nav-ready .nav-toggle{display:grid;align-content:center;gap:5px;width:41px;height:41px;margin:0;padding:10px;border:1px solid #87a1a2;border-radius:50%;background:none}
    .nav-toggle span{height:2px;width:18px;background:white;display:block}
    .mast-actions{margin-left:auto}
    .main-menu{order:3;width:100%;padding:6px 0}
    .nav-ready .main-menu{display:none}
    .nav-ready .menu-open .main-menu{display:block;position:absolute;top:100%;left:0;padding:13px var(--gutter);background:var(--deep);border-bottom:1px solid #658788}
    .main-menu ul{flex-wrap:wrap;gap:0 22px}
    .main-menu .drawer-login{display:inline-flex;gap:6px;color:var(--coral)}
    .desk-login{display:none}
    .journal-list,.read-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .hero-copy{max-width:65%}
    .ticket-result{flex-wrap:wrap}
    .topic-caption{padding:9px}.topic-caption p{font-size:.75rem}
}
@media(max-width:720px){
    .lesson,.reading,.member-guides{grid-template-columns:1fr}
    .lesson h2 br{display:none}
    .closing-grid{grid-template-columns:1fr 1fr}
    .closing-brand{grid-column:1/-1}
}
@media(max-width:660px){
    :root{--gutter:16px}
    .mast-inner{min-height:59px}.wordmark{gap:5px}.wordmark img{width:33px;height:33px}.wordmark>span{font-size:1.23rem}
    .mast-actions{gap:6px}.mast .primary-action{min-height:38px;padding:7px 11px;font-size:.83rem}
    .hero{display:flex;flex-direction:column;min-height:0;background:var(--deep)}
    .hero::after{display:none}
    .cover-art{position:relative;z-index:auto;inset:auto;width:100%;height:clamp(225px,66vw,360px)}
    .cover-art img{object-position:50% 38%}
    .cover-art::after{content:"";position:absolute;inset:auto 0 -1px;height:28%;background:linear-gradient(0deg,var(--deep),transparent)}
    .hero-frame{position:relative}.hero-copy{max-width:100%;padding:0 0 20px}
    .hero-brand{font-size:clamp(2.35rem,9vw,3.5rem);line-height:1.3}
    .hero-heading{font-size:1.3rem;line-height:1.5;text-wrap:initial}
    .hero-intro{margin:7px 0 13px;line-height:1.65;font-size:.91rem}
    .hero-actions{gap:5px}.hero-actions .action{padding:7px 11px;font-size:.84rem;min-height:42px}
    .section-head,.journal-heading{gap:8px;margin-bottom:12px}.section-head h2,.journal-heading h2{font-size:1.4rem}
    .section-head .text-link{font-size:.8rem}
    .topic-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
    .topic{aspect-ratio:1.43;border-radius:10px}
    .topic-lottery{grid-column:1/-1;aspect-ratio:2.5}.topic-lottery .topic-photo img{object-position:50% 48%}
    .topic-caption h3{font-size:1.23rem}.topic-caption p{font-size:.78rem}
    .lesson{gap:12px;padding:19px 16px;border-radius:14px}.lesson h2{font-size:1.56rem}
    .ticket-demo{padding:5px 10px 12px}.ticket-demo label{font-size:.95rem;padding-inline:8px}
    .ticket-result{gap:10px}.journal-controls{font-size:.78rem}
}
@media(max-width:365px){
    :root{--gutter:12px}.mast .primary-action .ui-icon{display:none}
    .hero-actions .action{padding-inline:8px;font-size:.8rem}.journal-list,.read-grid{grid-template-columns:1fr}
    .ticket-demo label{margin-right:1px}
}
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{transition:none!important;scroll-behavior:auto!important}
}