/* 77pg-thailand.com : tokens */
:root{
 --sk-bg:#140a0f;--sk-bg2:#1a0d13;--sk-card:#21121a;--sk-card2:#2b1722;
 --sk-ink:#fff0f4;--sk-mut:#d3b4be;--sk-red:#ff283e;--sk-red2:#d3122e;--sk-gold:#ffc145;--sk-gold2:#ffdb8a;
 --sk-line:rgba(255,240,244,.15);--sk-fd:"Sigmar One","Noto Sans Thai Looped",sans-serif;--sk-fb:"Noto Sans Thai Looped","Sarabun",sans-serif;
 --sk-w:1180px;--sk-hh:68px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--sk-bg);color:var(--sk-ink);font:400 16px/1.78 var(--sk-fb);overflow-x:hidden;letter-spacing:.005em}
img{display:block;max-width:100%;height:auto}
a{color:var(--sk-gold);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--sk-gold2)}
h1,h2,h3,p,ul,ol,figure,details{margin:0}
ul,ol{padding:0}
button{font:inherit;color:inherit}
.sk-wrap{width:100%;max-width:var(--sk-w);margin:0 auto;padding:0 20px}
.sk-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* header */
.sk-hd{position:sticky;top:0;z-index:50;background:#110a0d;border-bottom:3px solid var(--sk-red);box-shadow:0 8px 0 -5px rgba(255,40,62,.25)}
.sk-hd-in{display:flex;align-items:center;gap:22px;min-height:var(--sk-hh)}
.sk-logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--sk-ink);flex:none}
.sk-logo svg{width:44px;height:38px}
.sk-logo-t{font:400 27px/1 var(--sk-fd);letter-spacing:.02em;color:var(--sk-ink)}
.sk-logo-t i{font-style:normal;color:var(--sk-red)}
.sk-menu{display:flex;gap:2px;margin:0 auto 0 8px;list-style:none}
.sk-menu a{display:block;padding:9px 11px;color:var(--sk-ink);text-decoration:none;font-weight:600;font-size:15px;border-bottom:2px solid transparent;text-transform:uppercase}
.sk-menu a:hover,.sk-menu a[aria-current]{color:var(--sk-gold);border-bottom-color:var(--sk-gold)}
.sk-act{display:flex;align-items:center;gap:10px;margin-left:auto}
.sk-menu+.sk-act{margin-left:0}
.sk-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;border:2px solid var(--sk-red);background:linear-gradient(180deg,#f01a35,#c10e29);color:#fff;font-weight:700;font-size:16px;text-decoration:none;border-radius:4px 14px 4px 14px;white-space:nowrap}
.sk-btn:hover{color:#fff;background:linear-gradient(180deg,#ff3a50,#d3122e)}
.sk-btn-g{background:transparent;border-color:var(--sk-gold);color:var(--sk-gold)}
.sk-btn-g:hover{background:rgba(255,193,69,.12);color:var(--sk-gold2)}
.sk-burger{display:none;width:46px;height:46px;border:2px solid var(--sk-line);background:transparent;border-radius:8px;cursor:pointer;position:relative}
.sk-burger i,.sk-burger i::before,.sk-burger i::after{position:absolute;left:11px;width:20px;height:2px;background:var(--sk-ink);content:"";transition:transform .2s}
.sk-burger i{top:21px}.sk-burger i::before{top:-7px;left:0}.sk-burger i::after{top:7px;left:0}
.sk-open .sk-burger i{background:transparent}
.sk-open .sk-burger i::before{transform:translateY(7px) rotate(45deg)}
.sk-open .sk-burger i::after{transform:translateY(-7px) rotate(-45deg)}

/* panel mobile toan man hinh */
.sk-panel{position:fixed;inset:0;z-index:60;background:#0e0609;padding:calc(var(--sk-hh) + 14px) 22px 96px;overflow-y:auto;visibility:hidden;opacity:0;transform:translateY(-12px);transition:opacity .2s,transform .2s,visibility .2s}
.sk-open .sk-panel{visibility:visible;opacity:1;transform:none}
.sk-open{overflow:hidden}
.sk-open .sk-hd{z-index:70}
.sk-pn-g{margin:0 0 6px;font:400 14px/1.4 var(--sk-fd);color:var(--sk-red);letter-spacing:.08em;padding-top:12px}
.sk-pn-l{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:10px}
.sk-pn-l a{display:flex;align-items:center;min-height:48px;padding:6px 12px;background:var(--sk-card);border-left:4px solid var(--sk-red);color:var(--sk-ink);text-decoration:none;font-size:15px;font-weight:600;line-height:1.35}
.sk-pn-cta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}

/* breadcrumb */
.sk-crumb{background:var(--sk-bg2);border-bottom:1px solid var(--sk-line);font-size:14px}
.sk-crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px 8px;padding:10px 0;color:var(--sk-mut)}
.sk-crumb li+li::before{content:"/";margin-right:8px;color:var(--sk-red)}
.sk-crumb a{color:var(--sk-mut);text-decoration:none}
.sk-crumb a:hover{color:var(--sk-gold)}

/* hero double7 */
.sk-hero{position:relative;overflow:hidden;padding:54px 0 62px;background:radial-gradient(900px 420px at 82% 8%,rgba(255,40,62,.28),transparent 70%),linear-gradient(180deg,#1c0b12,var(--sk-bg))}
.sk-hero::before{content:"77";position:absolute;right:-2%;top:-6%;font:400 clamp(260px,34vw,520px)/1 var(--sk-fd);color:transparent;-webkit-text-stroke:2px rgba(255,40,62,.22);pointer-events:none}
.sk-hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:34px;align-items:center}
.sk-kick{display:inline-block;margin-bottom:16px;padding:3px 14px;background:var(--sk-gold);color:#1a0d13;font-weight:800;font-size:14px;letter-spacing:.04em;clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%)}
.sk-h1{font:800 clamp(30px,4.6vw,52px)/1.28 var(--sk-fb);letter-spacing:0}
.sk-h1 b{font:400 1.18em/1 var(--sk-fd);color:var(--sk-red);text-shadow:3px 3px 0 #000}
.sk-lead{margin-top:16px;font-size:18px;color:#f4dce3;max-width:58ch}
.sk-cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.sk-note{margin-top:12px;font-size:13.5px;color:var(--sk-mut)}
.sk-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;list-style:none}
.sk-tags li{padding:2px 12px;border:1px dashed rgba(255,193,69,.6);color:var(--sk-gold2);font-size:14px}
.sk-d7{position:relative;aspect-ratio:1/.92;max-width:520px;margin-left:auto;width:100%}
.sk-d7 svg{position:absolute;inset:0;width:100%;height:100%}
.sk-d7 img{position:absolute;width:30%;aspect-ratio:3/4;object-fit:cover;border:3px solid var(--sk-ink);box-shadow:6px 6px 0 var(--sk-red)}
.sk-d7-a{left:27%;top:37%;transform:rotate(-5deg)}
.sk-d7-b{left:60%;top:41%;transform:rotate(4deg)}

/* section head */
.sk-sec{padding:56px 0}
.sk-sec-alt{background:var(--sk-bg2)}
.sk-sh{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 24px;margin-bottom:24px}
.sk-sh h2{font:800 clamp(24px,3vw,34px)/1.35 var(--sk-fb)}
.sk-sh h2::before{content:"7";display:inline-block;margin-right:10px;font:400 1.1em/1 var(--sk-fd);color:var(--sk-red);transform:skewX(-8deg)}
.sk-sh p{color:var(--sk-mut);font-size:15px;max-width:48ch}

/* luoi game 5 cot */
.sk-g5{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.sk-gc{position:relative;background:var(--sk-card);border:1px solid var(--sk-line);clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%)}
.sk-gc img{width:100%;aspect-ratio:10/11;object-fit:cover;object-position:50% 40%}
.sk-gc figcaption{padding:8px 10px 10px;font-size:13.5px;line-height:1.4;font-weight:600;color:var(--sk-ink);min-height:50px}
.sk-gc::after{content:"";position:absolute;left:0;top:0;width:4px;height:36px;background:var(--sk-red)}
.sk-g5-s{grid-template-columns:repeat(6,minmax(0,1fr))}
.sk-logos{list-style:none;display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.sk-logos li{width:84px}
.sk-logos img{width:84px;height:84px;object-fit:cover;border:2px solid var(--sk-line);border-radius:50%;background:#000}
.sk-cap{margin-top:12px;font-size:14px;color:var(--sk-mut)}

/* steps */
.sk-steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;counter-reset:s}
.sk-steps li{position:relative;padding:22px 20px 24px;border:1px solid var(--sk-line);margin-left:-1px;background:var(--sk-card)}
.sk-steps li:nth-child(even){background:var(--sk-card2)}
.sk-sn{display:block;font:400 56px/1 var(--sk-fd);color:var(--sk-gold);text-shadow:3px 3px 0 var(--sk-red2);margin-bottom:10px}
.sk-steps h3{font:700 18px/1.4 var(--sk-fb);margin-bottom:6px}
.sk-steps p{font-size:15px;color:#f0d6dd}

/* prose */
.sk-prose{max-width:800px;margin:0 auto}
.sk-prose h2{font:800 clamp(22px,2.6vw,30px)/1.4 var(--sk-fb);margin:46px 0 14px;padding-left:16px;border-left:6px solid var(--sk-red)}
.sk-prose h2:first-child{margin-top:0}
.sk-prose h3{font:700 20px/1.45 var(--sk-fb);margin:28px 0 8px;color:var(--sk-gold)}
.sk-prose p{margin:0 0 16px;font-size:17px}
.sk-prose ul,.sk-prose ol{margin:0 0 18px;padding-left:24px}
.sk-prose li{margin-bottom:6px;font-size:17px}
.sk-prose li::marker{color:var(--sk-red);font-weight:800}
.sk-prose strong{color:var(--sk-gold2)}
.sk-prose table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:15.5px;display:block;overflow-x:auto}
.sk-prose th,.sk-prose td{padding:10px 12px;border:1px solid var(--sk-line);text-align:left;vertical-align:top}
.sk-prose th{background:var(--sk-card2);color:var(--sk-gold2)}
.sk-mid{margin:34px 0;padding:20px 22px;border:2px dashed var(--sk-gold);background:rgba(255,193,69,.07);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 20px}
.sk-mid p{margin:0;font-size:16px;flex:1 1 240px}

/* live strip */
.sk-live{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:34px;align-items:center}
.sk-live-i{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.sk-live-i figure{background:var(--sk-card);border:1px solid var(--sk-line)}
.sk-live-i img{width:100%;aspect-ratio:3/4;object-fit:cover}
.sk-live-i figcaption{padding:6px 8px 8px;font-size:13px;color:var(--sk-mut);line-height:1.35}
.sk-live-t h2{font:800 clamp(24px,3vw,34px)/1.35 var(--sk-fb);margin-bottom:12px}
.sk-live-t p{color:#f0d6dd}

/* faq */
.sk-faq{max-width:860px;margin:0 auto}
.sk-faq details{border:1px solid var(--sk-line);background:var(--sk-card);margin-bottom:10px}
.sk-faq summary{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:14px 18px;cursor:pointer;font-weight:700;font-size:17px;list-style:none}
.sk-faq summary::-webkit-details-marker{display:none}
.sk-faq summary::after{content:"+";flex:none;width:30px;height:30px;line-height:28px;text-align:center;border:2px solid var(--sk-red);color:var(--sk-red);font-weight:800}
.sk-faq details[open] summary::after{content:"\2212";background:var(--sk-red);color:#fff}
.sk-faq details[open]{border-color:var(--sk-red)}
.sk-faq details p{padding:0 18px 16px;color:#f0d6dd;font-size:16.5px}
.sk-faq-h{max-width:860px;margin:0 auto 22px}

/* cta band */
.sk-band{position:relative;padding:52px 0;background:repeating-linear-gradient(135deg,#a50e24 0 18px,#8e0b1f 18px 36px);text-align:center;border-top:3px solid var(--sk-gold)}
.sk-band h2{font:800 clamp(24px,3.2vw,36px)/1.4 var(--sk-fb);margin-bottom:10px;text-shadow:2px 2px 0 rgba(0,0,0,.45)}
.sk-band p{margin:0 auto 20px;max-width:60ch;color:#ffe9ee}
.sk-band .sk-btn{background:var(--sk-gold);border-color:var(--sk-gold);color:#1a0d13;font-size:18px;min-height:52px;padding:0 34px}
.sk-band .sk-btn:hover{background:var(--sk-gold2);color:#1a0d13}
.sk-band .sk-note{color:#ffd9e0}

/* trang con */
.sk-pi{padding:44px 0 36px;background:linear-gradient(180deg,#1c0b12,var(--sk-bg));border-bottom:1px solid var(--sk-line)}
.sk-pi-in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:36px;align-items:center}
.sk-pi-in-1{grid-template-columns:minmax(0,1fr)}
.sk-pi .sk-h1{font-size:clamp(27px,3.8vw,42px)}
.sk-mos{position:relative;aspect-ratio:1/.9;width:100%;max-width:340px;margin-left:auto}
.sk-mos img{position:absolute;width:50%;aspect-ratio:3/4;object-fit:cover;border:3px solid var(--sk-ink);box-shadow:5px 5px 0 var(--sk-red)}
.sk-mos img:nth-child(1){left:2%;top:4%;transform:rotate(-4deg)}
.sk-mos img:nth-child(2){left:46%;top:18%;transform:rotate(3deg);z-index:2;box-shadow:5px 5px 0 var(--sk-gold)}
.sk-mos img:nth-child(3){left:20%;top:50%;transform:rotate(-1deg);z-index:1;width:42%}
.sk-body{padding:48px 0 30px}
.sk-gal{padding:12px 0 36px}

/* footer */
.sk-ft{background:#0d0609;border-top:3px solid var(--sk-red);padding:44px 0 34px;font-size:15px;color:#e4cbd3}
.sk-ft-g{display:grid;grid-template-columns:1.3fr repeat(3,minmax(0,1fr));gap:28px}
.sk-ft-b p{margin-top:10px;font-size:14px;line-height:1.7;color:var(--sk-mut)}
.sk-ft h2,.sk-ft-h{font:400 15px/1.4 var(--sk-fd);letter-spacing:.07em;color:var(--sk-red);margin:0 0 10px}
.sk-ft ul{list-style:none}
.sk-ft li a{display:inline-block;padding:5px 0;color:#f0dbe1;text-decoration:none}
.sk-ft li a:hover{color:var(--sk-gold)}
.sk-chips{display:flex;flex-wrap:wrap;gap:8px;margin:30px 0 0;padding-top:22px;border-top:1px solid var(--sk-line);list-style:none}
.sk-chips li{padding:2px 12px;border:1px solid var(--sk-line);font-size:13px;color:var(--sk-mut)}
.sk-legal{margin-top:20px;font-size:13.5px;line-height:1.7;color:var(--sk-mut)}
.sk-18{display:inline-block;margin-right:8px;padding:0 8px;border:2px solid var(--sk-gold);color:var(--sk-gold);font-weight:800}

/* bottom nav */
.sk-bn{display:none}

/* tablet */
@media (max-width:1100px){
 .sk-menu a{padding:9px 8px;font-size:14px}
 .sk-act .sk-btn-g{display:none}
}
@media (max-width:960px){
 .sk-menu{display:none}
 .sk-burger{display:block}
 .sk-act{margin-left:auto}
 .sk-hero-in,.sk-live,.sk-pi-in{grid-template-columns:minmax(0,1fr)}
 .sk-d7{margin:8px auto 0;max-width:440px}
 .sk-mos{margin:6px auto 0;max-width:300px}
 .sk-g5{grid-template-columns:repeat(4,minmax(0,1fr))}
 .sk-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
 .sk-ft-g{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
 :root{--sk-hh:60px}
 body{font-size:16px;padding-bottom:84px}
 .sk-wrap{padding:0 16px}
 .sk-logo svg{width:38px;height:33px}
 .sk-logo-t{font-size:23px}
 .sk-act .sk-btn{min-height:40px;padding:0 14px;font-size:15px}
 .sk-hero{padding:34px 0 40px}
 .sk-lead{font-size:16.5px}
 .sk-sec{padding:40px 0}
 .sk-g5{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .sk-steps{grid-template-columns:minmax(0,1fr)}
 .sk-steps li{margin-left:0;margin-top:-1px;padding-left:92px;min-height:96px}
 .sk-sn{position:absolute;left:18px;top:16px;font-size:48px}
 .sk-live-i{grid-template-columns:repeat(2,minmax(0,1fr))}
 .sk-prose p,.sk-prose li{font-size:16.5px}
 .sk-ft-g{grid-template-columns:minmax(0,1fr)}
 .sk-mid{padding:16px}
 .sk-cta-row .sk-btn{flex:1 1 140px}
 .sk-pn-l{grid-template-columns:minmax(0,1fr)}
 .sk-bn{position:fixed;left:0;right:0;bottom:0;z-index:55;display:grid;grid-template-columns:1fr 1fr 78px 1fr 1fr;align-items:end;height:68px;background:#110a0d;border-top:3px solid var(--sk-red);padding:0 4px}
 .sk-bn a,.sk-bn button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:100%;padding:4px 0;background:none;border:0;color:var(--sk-mut);font-size:12.5px;line-height:1.2;text-decoration:none;cursor:pointer}
 .sk-bn a[aria-current]{color:var(--sk-gold)}
 .sk-bn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2}
 .sk-bn .sk-bn-c{height:64px;width:64px;margin:0 auto 10px;border-radius:50%;background:linear-gradient(180deg,#ff3a50,#c10e29);border:3px solid var(--sk-gold);color:#fff;font-weight:800;font-size:13px;box-shadow:0 6px 0 rgba(0,0,0,.4)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}