@font-face {
    font-family: roboto;
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'),local('Roboto-Regular'),url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
    unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F
}

@font-face {
    font-family: roboto;
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'),local('Roboto-Regular'),url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
    unicode-range: U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116
}

@font-face {
    font-family: roboto;
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'),local('Roboto-Regular'),url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
    unicode-range: U+1F00-1FFF
}

@font-face {
    font-family: roboto;
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'),local('Roboto-Regular'),url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');
    unicode-range: U+0370-03FF
}

@font-face {
    font-family: roboto;
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'),local('Roboto-Regular'),url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');
    unicode-range: U+0102-0103,U+0110-0111,U+1EA0-1EF9,U+20AB
}

@font-face {
    font-family: roboto;
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'),local('Roboto-Regular'),url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
    unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF
}

@font-face {
    font-family: roboto;
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'),local('Roboto-Regular'),url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

h1,h2 {
    margin-top: 20px
}

* {
    margin: 0;
    padding: 0
}

body {
    background: url(../images/bg-lobby.jpg) no-repeat;
    background-size: cover;
    font-family: Roboto;
    color: #fff;
    font-size: 12px
}

.logo {
    width: 120px
}

.download a {
    margin: 2px 0;
    float: left;
    width: 100%
}

.download {
    margin-top: 20px
}

.item {
    background: url(..//images/bg-popup-small.png) no-repeat;
    background-size: 100% 100%,cover;
    margin: 20px 10px 10px;
    position: relative;
    padding: 30px
}

h1,h2 {
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 700;
    color: #ffeb3b
}

.item a img {
    max-width: 50%
}

.item p {
    margin: 0;
    line-height: 22px
}

span.label {
    display: block;
    position: absolute;
    right: -3px;
    top: -4px
}

._text,.a-btn {
    padding: 15px 10px
}

._text span {
    text-transform: uppercase
}

.avatar {
    margin-bottom: 15px
}

.avatar img {
    display: block;
    margin: 0 auto;
    height: 124px;
    width: 124px
}

.item-help {
    width: 210px;
    padding-bottom: 10px
}

.row .col {
    padding: 0 5px!important
}

@media(min-width: 768px) {
}

@media(min-width: 992px) {
}

@media(min-width: 1200px) {
}

@media only screen and (min-device-width: 320px) and (max-device-width:480px) {
}

@media only screen and (max-width: 320px) {
}

@media only screen and (min-device-width: 768px) and (max-device-width:1024px) {
}

@media only screen and (min-device-width: 768px) and (max-device-width:1024px) and (orientation:landscape) {
}

@media only screen and (min-device-width: 768px) and (max-device-width:1024px) and (orientation:portrait) {
}

@media only screen and (min-width: 1224px) {
    .container {
        margin-top:80px!important
    }

    .logo {
        width: 200px!important
    }
}

@media only screen and (min-width: 1824px) {
}

@media only screen and (min-device-width: 320px) and (max-device-width:568px) {
}

@media only screen and (min-device-width: 320px) and (max-device-width:568px) and (orientation:landscape) {
}

@media only screen and (min-device-width: 320px) and (max-device-width:568px) and (orientation:portrait) {
}

@media only screen and (min-device-width: 414px) and (max-device-width:736px) {
    ._text,.a-btn {
        padding:20px 4px
    }

    .item a img {
        max-width: 30%
    }

    .avatar img {
    }
}

@media only screen and (min-device-width: 414px) and (max-device-width:736px) and (orientation:landscape) {
}

@media only screen and (min-device-width: 414px) and (max-device-width:736px) and (orientation:portrait) {
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .row::before,.row::after {
        content:none
    }
}

.blink {
    animation: blinker 1s linear infinite
}

@keyframes blinker {
    50% {
        opacity: 0
    }
}

.responsive {
    width: 100%;
    height: auto;
}
/* custom.css */

/* Block logo Sâm Lốc */
/* Hàng logo + mô tả của Trung tâm hướng dẫn */
.guide-portal {
  display: flex;
  align-items: center; /* căn giữa theo chiều dọc */
  gap: 12px;
  margin: 12px 0;
}
.hero {
  display: flex;
  justify-content: center;   /* căn ngang giữa */
  align-items: flex-start;   /* đẩy lên trên */
  padding-top: 40px;         /* cách mép trên 1 chút cho đẹp */
  min-height: auto;          /* bỏ chiều cao chiếm 70% */
}
.logo-samloc {
  --scale: .80;              /* scale logo */
  position: relative;
  width: calc(227px * var(--scale));
  height: calc(222px * var(--scale));
  flex-shrink: 0;            /* không co lại trong flex */
}

/* icon chính */
.logo-samloc::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 227px; height: 222px;
  background: url("../images/games.webp") no-repeat -1152px -1148px;
  transform: scale(var(--scale));
  transform-origin: top left;
}

/* chữ “Sâm Lốc – SOLO” */
.logo-samloc::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 100px;
  width: 188px; height: 78px;
  background: url("../images/text.webp") no-repeat -1638px -1069px;
  transform: scale(var(--scale));
  transform-origin: top left;
}
.related-links {
  border-top: 2px solid #eee;
  margin-top: 40px;
  padding-top: 20px;
  font-size: 1rem;
}
.related-links h2 {
  font-size: 1.25rem;
  color: #111827;
  margin-bottom: 15px;
}
.related-links a {
  color: #007bff;
  text-decoration: none;
}
.related-links a:hover {
  text-decoration: underline;
}
.event-table{
    width:100%;
    border-collapse:collapse;
    margin:20px 0;
    overflow:hidden;
    border-radius:12px;

    background:rgba(255,255,255,0.08);
    backdrop-filter:blur(6px);

    border:1px solid rgba(255,255,255,0.15);
}

.event-table th{
    background:rgba(7,124,212,0.75);
    color:#fff;
    padding:12px;
    text-align:center;
    border:1px solid rgba(255,255,255,0.1);
}

.event-table td{
    padding:10px;
    text-align:center;
    color:#fff;

    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.08);
}

.event-table tr:nth-child(even) td{
    background:rgba(255,255,255,0.05);
}

.event-table tr:hover td{
    background:rgba(255,255,255,0.08);
}