:root { --plyr-color-main: #ffe8b5 }


::-webkit-scrollbar { width:0px; background:rgba(0,0,0,0) }
::-webkit-scrollbar-track { background:rgba(0,0,0,0) }
::-webkit-scrollbar-thumb { background: #333 }
::-webkit-scrollbar-thumb:hover { background:rgba(0,0,0,0); background: #ffff8e }


.text-config-rounded {font-family: "Config Rounded"}

html { font-size:14px }

.fake-scrollbar { position: absolute; width:5px; right:5px; top:48%; z-index:5000; height:13vh; background-color:#fff; border-radius: 4px; }
.lock-scroll{ overflow: hidden!important;}
body { overflow-x: hidden; background-color: #000; width:100%; font-weight:400; letter-spacing:0.4px; font-family: Poppins, sans-serif; z-index:-100; background-size:100%; margin:0px; height:auto; padding:0; font-size:1rem; -moz-osx-font-smoothing: grayscale; text-rendering: optimizelegibility; outline:none; color:#333; line-height:18px }
ul, li { padding:0; margin:0; list-style:none; float:left; font-family: helvetica; font-weight: normal}
img { padding:0; margin:0; float:left; width:100% }
button { background-color:#00ACF2; padding:8px 12px; border-radius:4px; border:none; font-size:16px; color:#FFF }
button:hover {  background-color:#F0F0F0; cursor:pointer; color:#333 }
ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, hgroup, p, blockquote, figure, form, fieldset, input, legend, pre, abbr { margin: 0; padding: 0 }
a { cursor:pointer; color:#008b8e; text-decoration:none; letter-spacing:0.3px }

a:first-child { float:left; cursor: pointer; }
a:last-child { float:right }

img { width:100% }
p { width:100% }

h1 span, h2 span { text-transform:uppercase }

/* index */

.wrap-index { width:100%; height: 100vh; float:left; position:relative; background-color:#000 }
.wrap-index .list-game { width:86%; float:left; padding:30px 7% 0px 7%}
.wrap-index .list-game .game-chosen { width:19%; float:left; background-color:#1A1A1A; border-radius: 24px; padding-bottom:30px; margin:0.5% }
.wrap-index .list-game .game-chosen .logo { width:100%; float:left }
.wrap-index .list-game .game-chosen .infomation { width:100%; float:left; padding:30px 35px 0 35px; box-sizing:border-box }
.wrap-index .list-game .game-chosen .infomation .left { float:left; padding:8px 20px; border-radius: 40px; background-color:#db00be; color:#FFF; cursor:pointer }
.wrap-index .list-game .game-chosen .infomation .left:hover { background-color: #FFF; color:#db00be }
.wrap-index .list-game .game-chosen .infomation .right { float:right; padding:8px 20px; border-radius: 40px; background-color:#FFF; opacity:0.2; pointer-events: none }
.wrap-index .list-game .game-chosen .infomation .right.enable { background-color:#db00be; color:#FFF; cursor:pointer; opacity:1 }
.wrap-index .list-game .game-chosen .checklist-able { width:80%; float:left; margin:0 10%; box-sizing: border-box; color:#FFF }
.wrap-index .list-game .game-chosen .checklist-able .list { width:100%; float:left; border-bottom:1px dotted #333; font-weight: 300; }
.wrap-index .list-game .game-chosen .checklist-able .list .task-name { width:80%; float:left; height:40px; line-height:40px }
.wrap-index .list-game .game-chosen .checklist-able .list .icon { width:40px; aspect-ratio: 1/1; float:right }
.wrap-index .list-game .game-chosen.coming .logo { filter: grayscale(1); float:left }
.wrap-index .list-game .game-chosen.coming .checklist-able { color:#555 }
.wrap-index .list-game .game-chosen.coming .infomation .left { background-color:#FFF; opacity:0.2; color:#333; pointer-events: none; }

/* artshow */


.wrap { width:100%; margin:0%; float:left }
.video-container { width:100% }

.video1 { width:100% }

.hinhfull { width:100%; float:left }



/* Spine */
@media only screen and (max-width:1440px) {
    .wrap-index .list-game { top:5%; left:0; transform: translate(0%,0%) }
    .wrap-index .list-game .game-chosen { width:32% }
}

@media only screen and (max-width:1180px) {
    .wrap-index .list-game { width:96%; padding:0 2%; top:5%; left:0; transform: translate(0%,0%); }
    .wrap-index .list-game .game-chosen { width:100%; margin:10px 0 0 0 }
}