@font-face {
    font-family:'SVN-Tungsten';
    src:url('/Source/SVN-Tungsten Book.ttf') format('woff2'),/* Thay thế bằng đường dẫn thực tế */
  
           url('/Source/SVN-Tungsten Book.ttf') format('woff');
    /* Thay thế bằng đường dẫn thực tế */
  
      font-weight:normal;
    font-style:normal;
  }
  
  @font-face {
    font-family:'SVN-Gilroy';
    font-display:block;
    src:url('/Source/SVN-Gilroy Medium.otf');
  }
  
  @font-face {
    font-family:'SVN-Gilroy';
    font-display:block;
    src:url('/Source/SVN-Gilroy Bold.otf');
    font-weight:700;
  }
  
  :root {
    --color-main:#02A9FD;
    --color-social:#2557ae;
    --color-hover:#036191;
    --color-text:#2557ae;
    --m1:#0393DC;
    --m2:#02a9fd;
    --color-red:#c00;
    --background-hover:#02A9FD;
    --background-static:#02A9FD;
    --color-2:#2261d0;
    --color-3:#0f0f0f;
    --background:#02A9FD;
    --bottom:110px;
    --left:20px;
    --right:20px;
    display:block;
  }
  
  /* Sử dụng font */
  
  * {
    margin:0;
    padding:0;
    box-sizing:border-box;
    letter-spacing:1.2px;
    user-select:none;
    unicode-bidi:isolate;
  }
  
  a {
    color:white;
    text-decoration:none !important;
  }
  
  body,
  html {
    background-color:#f3f3f3;
    margin:0;
    padding:0;
    display:flex;
    scroll-behavior:smooth;
    flex-direction:column;
    align-items:center;
  }
  
  header navM {
    display:none;
  }
  
  nav.navbar {
    display:flex;
    align-items:center;

  }
  
  header {
    background-color:#333;
    color:#f7d80c;
    padding:10px 20px;
    position:relative;
    top:0;
    width:100%;
    z-index:1000;
    text-align:center;
  }
  
  .fixed-header {
    position:fixed;
    top:0;
    left:0;
  }
  
  header p {
    color:#ffffff;
    position:relative;
    z-index:1;
    text-decoration:none !important;
    padding:9px 5px;
    margin-right:20px;
    font-size:24px;
    display:flex;
    align-items:center;
    text-transform:uppercase;
    border-radius:10px;
    border:1px solid transparent;
    font-family:SVN-Tungsten;
    letter-spacing:1.2px;
  }
  
  header .navbar a {
    position: relative;
    z-index: 1;
    text-decoration: none !important;
    padding: 9px 5px;
    font-size: 24px;
    display: flex;
    align-items: center;
    text-transform: uppercase;
    font-family: SVN-Tungsten;
    letter-spacing: 1.2px;
    color: white; /* hoặc màu mặc định */
    transition: color 0.5s ease-in-out;
  }
  
  header .navbar a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 1px;
    width: 100%;
    background-color: #f7d80c;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.5s ease-in-out;
    z-index: -1;
  }
  
  header .navbar a:hover {
    color: #f7d80c;
  }
  
  header .navbar a:hover::after {
    transform: scaleX(1);
  }
  
  
  
  .banner {
    position:relative;
    background-image:url(/Data/Info/banner.jpg);
    background-repeat:no-repeat;
    background-attachment:scroll;
    /* hoặc scroll,local */
  
                background-size:100% 100%;
    height:100vh;
    width:100%;
  }
  
  .EventStatus#active {
    color:white;
    background-color:green;
    padding:0 4px;
    height:23px;
    font-size:12px;
    display:flex;
    border-radius:4px;
    align-items:center;
    font-family:'SVN-Gilroy';
  }
  
  .EventStatus#end {
    color:white;
    background-color:red;
    padding:0 4px;
    height:23px;
    font-size:12px;
    display:flex;
    border-radius:4px;
    align-items:center;
    font-family:'SVN-Gilroy';
  }
  
  .ContentGame {
    display:flex;
    align-items:center;
    font-size:15px;
    padding:0 4px;
    height:32px;
    color:white;
    font-family:'SVN-Gilroy';
    min-width:100px;
    border-radius:4px;
    border:1px solid #8db1eb;
    background-color:#0866ff;
    /* text-align:center;
    */
  
              justify-content:center;
  }
  
  .content {
    position:absolute;
    display:flex;
    bottom:100px;
    left:50px;
    width:300px;
    background-color:rgba(255,255,255,0.8);
    border:2px solid #ff8100;
    border-radius:10px;
    box-shadow:0 4px 8px rgba(0,0,0,0.2);
    align-content:space-around;
    align-items:center;
    flex-wrap:nowrap;
    flex-direction:column;
    justify-content:center;
    padding:10px 0 10px 0;
  }
  
  .header-content {
    font-family:SVN-Tungsten;
    font-size:30px;
    color:#ff8100;
    text-align:center;
    padding:10px;
    width:90%;
    font-weight:bold;
  }
  
  .text-content {
    font-family:SVN-Tungsten;
    font-size:20px;
    color:#333;
    text-align:center;
    padding:10px;
    width:90%;
  }
  
  .body {
    padding:20px;
    background-color:#ffff;
    height:720px;
  }
  
  ul.footer-ul.m-0 {
    text-align:left;
    text-decoration:none !important;
    color:white;
  }
  
  ul.footer-ul.m-0 li a {
    text-decoration:none !important;
    color:white;
  }
  
  footer {
    color:white;
    text-align:center;
    bottom:0;
    width:100%;
  }
  
  .footer-layout {
    padding:134px 0 14px;
    background:url(/img/bg.jpg) no-repeat;
    position:relative;
    background-size:cover;
    min-height:500px;
  }
  
  .copyright {
    background:url(/img/p.png) center top no-repeat;
    background-size:100% auto;
  }
  
  .wrap-content {
    margin:auto;
    width:calc(100% - 20px);
    max-width:1200px;
    padding:0;
  }
  
  .footer-info {
    font-size:25px;
  }
  
  .footer-layout .wrap-content {
    border-radius:20px;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    background:linear-gradient(105deg,rgba(0,0,0,0.80) -0.78%,rgba(0,0,0,0.80) 100%);
    box-shadow:0 0 30px 0 rgb(247 216 12 / 57%);
    backdrop-filter:blur(27px);
    padding:30px 35px;
    color:#ffff;
    align-items:center;
    align-content:center;
    text-align:center;
  }
  
  .copy-wap {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    padding:70px 0 30px;
    flex:1;
    color:#fff;
  }
  
  .navbar li {
    font-family:SVN-Tungsten;
    letter-spacing:1.2px;
    font-size:20px;
    padding:9px 5px;
    font-weight:bold;
    text-decoration:none !important;
  }
  
  .slider {
    position:relative;
    width:100%;
    height: 100vh;
    overflow:hidden;
  }
  
  .slides {
    display:flex;
    transition:transform 1s ease;
    width:300vw;
    height: 100vh;
    /* 3 slides x 100vw */;
  }

  select#StatusCN {
    width: 250px;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    padding: 5px;
    border-radius: 5px;
    border: none;
}
  
  .slide {
    width:100vw;
    height:100vh;
    object-fit:cover;
    flex-shrink:0;
  }
  
  /* Navigation buttons */
  
    .nav {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background-color:rgba(0,0,0,0.4);
    color:white;
    border:none;
    font-size:30px;
    padding:10px 20px;
    cursor:pointer;
    z-index:10;
    transition:background-color 0.3s ease;
  }
  
  .nav:hover {
    background-color:rgba(0,0,0,0.7);
  }
  
  .prev {
    left:10px;
  }
  
  .next {
    right:10px;
  }
  
  /* Timeline progress bar at the top */
  
    .progress-bar {
    position:absolute;
    top:0;
    left:0;
    height:5px;
    background-color:orange;
    width:0%;
    animation:progress 6s linear infinite;
    z-index:5;
  }
  
  @keyframes progress {
    0% {
      width:0%;
    }
    100% {
      width:100%;
    }
  }
  
  .Libary {
    display:flex;
    flex-wrap:nowrap;
    justify-content:center;
  }
  
  .libary-item {
    position:relative;
    width:calc(100% / 3);
    height:700px;
    overflow:hidden;
  }
  
  .Libary img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform 0.5s ease;
  }
  
  .libary-item:hover img {
    transform:scale(1.1);
    /* phóng to ảnh */;
  }
  
  .libary-content3d {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:linear-gradient(180deg,rgba(2,169,253,0.00) 74.65%,#f7d80c 100%);
    color:white;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:20px;
    text-align:center;
    transition:opacity 0.5s ease;
    cursor:pointer;
  }
  
  .libary-content3d h3 {
    text-align:center;
    position:absolute;
    top:10px;
    color:#FFF;
    text-shadow:0 2px 3px rgba(255,255,255,0.8);
    -webkit-background-clip:text;
    -moz-background-clip:text;
    background-clip:text;
    font-size:38px;
    font-weight:600;
    text-transform:capitalize;
    width:100%;
    margin-bottom:0;
    font-family:'SVN-Tungsten';
    letter-spacing:3.2px;
  }
  
  .libary-content3d h3:hover {
    transition:0.5s ease;
    color:var(--color-main);
  }
  
  .libary-contentkh {
    display:flex;
    flex-direction:column;
    align-items:center;
    background-color:#f7d80c;
    color:aliceblue;
    padding:20px;
    width:calc(100% / 3);
    height:700px;
    background:linear-gradient(180deg,rgba(2,169,253,0.00) 74.65%,#f7d80c 100%);
  }
  
  .libary-contentkg {
    display:flex;
    flex-direction:column;
    align-items:center;
    background-color:#f7d80c;
    color:aliceblue;
    padding:20px;
    width:calc(100% / 3);
    height:700px;
    background:linear-gradient(180deg,rgba(2,169,253,0.00) 74.65%,#f7d80c 100%);
  }
  
  .libary-content h3 {
    color:#FFF;
    text-shadow:0 2px 4px rgba(0,0,0,0.55),0px 2px 4px #02A9FD;
    -webkit-text-stroke-width:1.5px;
    font-size:40px;
    font-weight:700;
    text-transform:capitalize;
    width:100%;
    margin-bottom:0;
    font-family:'SVN-Tungsten';
    text-align:center;
    cursor:pointer;
    position:absolute;
  }
  
  .libary-content h3:hover {
    transition:0.5s ease;
    color:var(--color-main);
  }
  
  .text-split {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:normal;
    -webkit-box-orient:vertical;
    display:-webkit-box;
  }
  
  .menu-drop {
    position:relative;
  }
  
  .sub-menu {
    position:absolute;
    display:none;
    top:100%;
    /* Đặt ngay bên dưới menu cha */
  
      left:0;
    /* Canh trái với menu cha */
  
      list-style:none;
    margin:0;
    padding:0;
    background:#333;
    /* hoặc màu khác tùy giao diện */
  
      width:200px;
    /* hoặc auto */
  
      box-shadow:0 2px 6px rgba(0,0,0,0.15);
    /* tùy chọn */
  
      z-index:100;
  }
  
  .menu-drop:hover > .sub-menu {
    display:block;
  }
  
  .active {
    color:#f7d80c;
    border-bottom:1px solid #f7d80c;
    transition:all .5s ease-in-out;
  }
  
  .ImageBody {
    background-color:#f3f3f3;
    width:100%;
    min-height:980px;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    padding-bottom:0;
  }
  
  .ContentImage {
    width:60%;
    margin:10px;
    position:relative;
    overflow:hidden;
  }
  
  .CyberShow {
    display:flex;
    min-height:700px;
    flex-direction:column;
    align-items:center;
  }
  
  .HeadCyber {
    min-height:300px;
    display:flex;
    width:900px;
    margin-top:50px;
    gap:5px;
  }
  
  .ImageHead {
    /* background-color:white;
    */
  
      width:50%;
    border:none;
    border-radius:8px;
    display:flex;
    align-items:stretch;
    justify-content:center;
    max-height:400px;
    overflow:hidden;
  }
  
  /* Sự kiện */
  
  .Sukien {
    display:flex;
    flex-direction:column;
    align-items:center;
    background-color:#f3f3f3;
    width:100%;
  }
  
  .SukienTit {
    padding:30px;
    font-size:50px;
    font-weight:bold;
    font-family:'SVN-Tungsten';
    color:#ffde00;
    text-shadow:1px 1px black;
  }
  
  .SukienList {
    width: 70%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 0;
    grid-row-gap: 0;
    gap: 30px;
    padding: 30px;
}
  
  .SukienItem {
    border-radius:8px;
    background-color:white;
    display:flex;
    flex-direction:row;
    align-content:center;
    align-items:center;
    height:226px;
    overflow:hidden;
  }
  
  .SukienItem:hover {
    border:1px solid #02a9fd;
  }
  
  .BodyAll {
    width:80%;
    background-color:red;
    display:flex;
  }
  
  .Thread {
    width:80%;
    height:700px;
  }
  
  .subThread {
    width:20%;
    height:700px;
  }
  .SukienImage {
    display: flex
;
    width: 50%;
    height: 90%;
    align-items: center;
    justify-content: center;
}

.SukienImage img {
  border-radius: 15px;
  padding: 5px;
  max-width: 100%;
  max-height: 100%;
}
  
.SukienContent {
  height: 100%;
  display: flex
;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-evenly;
  width: 50%;
}
  
  .TitleSukien {
    border-radius:4px;
    color:black;
    font-weight:bold;
    font-family:'SVN-Gilroy';
    font-size:20px;
  }
  
  .FormSukien {
    text-align:left;
    /* width:90%;
    */
  
      border-radius:4px;
    background-color:#02a9fd;
    color:white;
    /* font-weight:bold;
    */
  
      padding:5px;
  }
  
  .TimeSukien {
    color:#02a9fd;
    border:1px solid #02a9fd;
    padding:5px;
    border-radius:4px;
    font-family:'SVN-Gilroy';
    font-size:12px;
  }
  
  .SukienPages {
    padding:20px;
    display:flex;
    align-items:center;
    gap:20px;
    justify-content:center;
  }
  
  .PagesSelect {
    border:1px solid #02a9fd;
    padding:4px;
    border-radius:4px;
    cursor:pointer;
    color:#02a9fd;
  }
  
  /* Kết thúc sự kiện */
  
  .ImageHead img {
    width:100%;
    object-fit:fill;
    overflow:hidden;
    border-radius:8px;
  }
  
  .GioiThieu {
    color:black;
    font-weight:bold;
    width:50%;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    justify-content:space-between;
    border:none;
    border-radius:8px;
    background-color:white;
  }
  
  #TextGT {
    margin:10px;
    letter-spacing:normal;
  }
  
  button.Add {
    padding:5px;
    background-color:white;
    border-radius:4px;
    font-weight:bold;
    border:1px solid red;
    color:red;
    cursor:pointer;
    transition:background-color 0.5s ease;
    margin:5px;
    width:140px;
  }
  
  textarea#inputName {
    width:100%;
    height:200px;
  }
  
  button.Add:hover {
    background-color:rgb(249 249 249 / 99%);
  }
  
  .System_line {
    padding:30px;
    font-size:30px;
    font-weight:bold;
    color:#0000ff;
    letter-spacing:normal;
    text-shadow:0 1px #ebf301;
  }
  
  h1#TextGT {
    color:#fedd03;
    text-shadow:0 1px black;
  }
  
  h4#TextGT {
    margin-top:0;
    color:#494949;
  }
  
  p#TextGT {
    margin-top:0;
    color:black;
  }
  
  .ListEvent {
    position:relative;
    overflow:hidden;
    width:90%;
    padding:10px;
  }
  
  .EventDetail {
    border-radius:4px;
    border:1px solid orange;
    padding:10px 10px 10px 10px;
    background-color:black;
    color:orange;
    font-family:'SVN-Gilroy';
    font-size:20px;
  }
  
  .ControllerEvent {
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    position:relative;
  }
  
  .slidebrows {
    display:flex;
    transition:transform 0.3s ease;
    gap:5px;
  }
  
  .modal {
    display:none;
    position:fixed;
    z-index:999999;
    padding-top:50px;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.9);
    text-align:center;
  }
  
  .modal-content {
    max-width:80%;
    max-height:80%;
    border-radius:8px;
  }
  
  .container {
    width:100%;
    padding:100px;
    margin:auto;
    background-image:url(/img/bg.png);
    background-size:cover;
  }
  
  .EventImageThumb img#EventIMG {
    width:100%;
    height:100%;
    object-fit:cover;
    padding:13px;
    border-radius:8px;
    transition:transform 0.3s ease;
    /* <;- Thêm dòng này để hiệu ứng mượt */;
  }
  
  .EventImageThumb img:hover {
    transform:scale(1.05);
    /* Phóng to nhẹ */;
  }
  
  .EventImageThumb {
    width:50%;
    height:100%;
    padding:10px;
  }
  
  .EventImageThumb img {
    width:100%;
    height:100%;
    border-radius:4px;
  }
  
  div#EventContentThumbs {
    font-family:'SVN-Gilroy';
    font-size:14px;
    text-shadow:1px 0 1px #0393dc;
  }
  
  div#EventContentThumbs:hover {
    color:#02A9FD;
  }
  
  #MainTitle {
    color:white;
    text-shadow:1px 1px orange;
  }
  
  .EventItem {
    flex-shrink:0;
    display:flex;
    transition:transform 0.3s ease;
    align-items:center;
    border-radius:4px;
    background-color:black;
    border:1px solid #ffffff;
    -webkit-box-shadow:0 1px 5px 0 rgba(0,132,255,0.747);
  }
  
  #submit {
    padding:15px;
    cursor:pointer;
    font-size:20px;
  }
  
  .bbcode button {
    padding:3px;
    cursor:pointer;
  }
  
  .bbcode button:hover {
    color:red;
  }
  
  .ThreadContent a {
    color:blue;
  }
  
  form.texteditor {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    padding:20px;
    width:100%;
  }
  
  #upload {
    width:100%;
    display:flex;
    flex-direction:column;
    text-align:center;
    align-items:flex-start;
    gap:5px;
  }
  
  input#name {
    width:80%;
    padding:10px;
    text-align:center;
  }
  div#displayCN {
    padding: 5px;
    border-radius: 4px;
    border: 1px solid green;
}
  .GroupHead {
    display: flex
;
    gap: 10px;
    flex-direction: row;
    width: 80%;
    align-items: center;
    border: 1px solid red;
    padding: 10px;
    border-radius: 4px;
    flex-wrap: wrap;
    justify-content: center;
}
  
  textarea#editor {
    width:80%;
    max-width:80%;
    min-width:80%;
    min-height:500px;
    height:500px;
  }
  
  .EditRecuir {
    display:flex;
    gap:15px;
    flex-direction:column;
    align-items:center;
    width:100%;
    padding:25px;
  }
  
  input#submit {
    padding:10px;
    color:blue;
    border:1px solid;
    border-radius:4px;
    cursor:pointer;
  }
  
  .scroll-btn {
    position:absolute;
    top:48%;
    transform:translateY(-50%);
    transform:translateX(12px);
    background:white;
    border:none;
    cursor:pointer;
    z-index:10;
    font-size:24px;
  }
  
  .scroll-btn.left {
    background:url(/img/left.png) center no-repeat !important;
    left:-24px;
    top:0;
    width:64px;
    height:100%;
  }
  
  .scroll-btn.right {
    background:url(/img/right.png) center no-repeat !important;
    right:0;
    top:0;
    width:64px;
    height:100%;
  }
  
  .EventImage {
    width:830px;
    height:830px;
    overflow:hidden;
  }
  
  .EventImage img {
    width:300px;
    height:auto;
  }
  
  .EventInfo {
    flex:1;
    display:flex;
    gap:30px;
    background:url(/img/giaidau-bg.webp);
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }
  
  .ContentTitle {
    font-size:40px;
    text-align:center;
    font-weight:bold;
    font-family:'SVN-Tungsten';
    color:white;
  }
  
  .EventContentThumbTitle {
    font-size:18px;
    text-align:center;
    font-weight:bold;
    font-family:'SVN-Tungsten';
    color:white;
    cursor:pointer;
  }
  
  .EventContentThumbTitle:hover {
    color:#02A9FD;
  }
  
  .ContentEvent {
    background-color:rgb(0 0 0 / 50%);
    padding:15px 8px 15px 8px;
    width:95%;
    color:white;
    font-weight:bold;
    border-radius:4px;
    box-shadow:rgb(0 0 0 / 0%) 0 -23px 25px 0 inset,rgba(0,0,0,0.15) 0 -36px 30px 0 inset,rgb(0 0 0 / 0%) 0 -79px 40px 0 inset,rgba(0,0,0,0.06) 0 2px 1px,rgba(0,0,0,0.09) 0 4px 2px,rgba(0,0,0,0.09) 0 8px 4px,rgba(0,0,0,0.09) 0 16px 8px,rgb(0 0 0 / 1%) 0 32px 16px;
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    align-items:flex-start;
    font-size:13px;
  }
  
  img#EventIMG {
    width:100%;
    height:100%;
  }
  
  .EventContainer {
    display:flex;
    /* gap:20px;
    */
  
      margin-bottom:20px;
  }
  
  .close {
    position:absolute;
    top:10px;
    right:30px;
    color:white;
    font-size:35px;
    font-weight:bold;
    cursor:pointer;
  }
  
  .modal-nav {
    position:absolute;
    width:100%;
    top:50%;
    display:flex;
    justify-content:space-between;
    padding:0 20px;
  }
  
  .modal-nav button {
    background:none;
    color:white;
    font-size:30px;
    border:none;
    cursor:pointer;
  }
  
  .modal-thumbnails {
    position:absolute;
    bottom:20px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:8px;
    flex-wrap:nowrap;
    overflow-x:auto;
    padding:5px 10px;
    max-width:90%;
    background:rgba(0,0,0,0.3);
    border-radius:6px;
  }
  
  div#caption {
    color:white;
  }
  
  .modal-thumbnails img {
    width:120px;
    height:100px;
    object-fit:cover;
    cursor:pointer;
    border:2px solid transparent;
    border-radius:4px;
    transition:transform 0.2s,border-color 0.2s;
  }
  
  .modal-thumbnails img.active {
    border-color:white;
    transform:scale(1.1);
  }
  
  .SystemInfo {
    padding:10px;
    display:flex;
    flex-direction:row;
    scroll-behavior:smooth;
    gap:10px;
    scrollbar-width:none;
    /* Firefox */;
  }
  
  #BtnEdit {
    padding:3px;
    position:absolute;
    top:0;
    right:0;
    border:none;
    background-color:#02A9FD;
    border-radius:3px;
    cursor:pointer;
  }
  
  #BtnDel {
    padding:3px;
    position:absolute;
    top:25px;
    right:0;
    border:none;
    background-color:#02A9FD;
    border-radius:3px;
    cursor:pointer;
  }
  
  .slider-wrapper {
    width:933px;
    margin:10px;
    border-radius:8px;
    height:700px;
    overflow:hidden;
    /* border:2px solid #ccc;
    */
  
      position:relative;
  }
  
  .slider-track {
    display:flex;
    transition:transform 0.5s ease;
  }
  
  .SystemInfo::-webkit-scrollbar {
    height:8px;
  }
  
  .SystemInfo::-webkit-scrollbar-thumb {
    background:#ccc;
    border-radius:4px;
  }
  
  img#ShowImage {
    width:250px;
    height:350px;
    max-height:100%;
    overflow:hidden;
  }
  
  .ModalsImage {
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  
  .TitleModals {
    margin:32px;
    text-align:center;
    font-weight:bold;
    font-size:30px;
    font-family:'SVN-Tungsten';
    color:blue;
    letter-spacing:normal;
  }
  
  .ModalContentGroup {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    margin:20px;
  }
  
  input#imageName {
    padding:5px;
    width:100%;
    margin-bottom:10px;
    border:1px solid blue;
    border-radius:4px;
    /* padding-bottom:10px;
    */;
  }
  
  button#upload {
    padding:10px;
    border:1px solid green;
    border-radius:4px;
    cursor:pointer;
    margin-top:10px;
    color:green;
  }
  
  button#upload:hover {
    color:red;
    border:1px solid red;
  }
  
  input#imageInput {
    padding:5px;
    margin-bottom:10px;
    border:1px solid blue;
    width:100%;
    border-radius:4px;
    cursor:pointer;
  }
  
  select#imageName {
    padding:5px;
    width:100%;
    border:1px solid blue;
    border-radius:4px;
    text-align:center;
    font-weight:bold;
    cursor:pointer;
    color:blue;
    margin-bottom:10px;
  }
  
  .ContentText {
    min-height:100px;
    color:#554949;
    gap:5px;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    width:100%;
    /* padding:10px;
    */
  
      padding-bottom:20px;
  }
  
  @keyframes autoScroll {
    from {
      transform:translate3d(100px,0,0);
    }
    to {
      transform:translate3d(-700px,0,0);
    }
  }
  
  .SystemCard {
    flex:0 0 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    border-radius:4px;
    width:300px;
    min-height:650px;
    border:1px solid #02a9fd;
    margin-right:5px;
    margin-left:5px;
  }
  
  .SystemInfo::-webkit-scrollbar {
    display:none;
    /* Chrome,Safari */;
  }
  
  .NameCard {
    position:relative;
    text-align:center;
    width:100%;
    font-size:38px;
    font-weight:bold;
    letter-spacing:normal;
    line-height:normal;
    font-family:'SVN-Tungsten';
    color:#fedd03;
    text-shadow:0 1px black;
  }
  
  .CardCost {
    color:red;
    font-family:'SVN-Tungsten';
    font-size:39px;
    font-weight:bold;
    line-height:inherit;
    text-shadow:0 1px yellowgreen;
    letter-spacing:normal;
    line-height:normal;
  }
  
  .detail-giochoi {
    text-align:left;
    background:url(/img/line-x.png) no-repeat center bottom;
    margin-bottom:16px;
    padding-bottom:16px;
    font-size:20px;
    display:flex;
    color:#0f0f0f;
    justify-content:space-between;
  }
  
  .CardSystem {
    margin:15px 0 15px 0;
    padding:5px;
    background-color:white;
    font-size:larger;
    font-weight:bold;
    letter-spacing:initial;
    color:blue;
    text-shadow:1px 1px #fdf10942;
    display:flex;
    justify-content:space-between;
    width:90%;
    /* overflow:hidden;
    */
  
      flex-direction:row;
    flex-wrap:wrap;
    background:url(/img/line-x.png) no-repeat center bottom;
  }
  
  img#MainEventIMG {
    width:100%;
    height:100%;
  }
  
  #MainEventContainer {
    opacity:1;
    transition:opacity 0.5s ease;
  }
  
  #MainEventContainer.fade-out {
    opacity:0;
  }
  
  .ShareTime {
    font-size:14px;
    letter-spacing:0.2px;
    font-family:ui-sans-serif;
    /* border:1px solid;
    */
  
      border-radius:4px;
    background-color:#80808061;
    padding:10px;
    margin-top:10px;
    margin-bottom:10px;
  }
  
  .ImageContent {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    /* 4 cột bằng nhau */
  
      gap:10px;
    margin-bottom:10px;
  }
  
  .item {
    height:300px;
    /* Chiều cao cố định */
  
      overflow:hidden;
    border:1px solid #ccc;
    border-radius:6px;
    cursor:pointer;
    position:relative;
  }
  
  #delete {
    position:absolute;
    top:3px;
    left:3px;
    border:1px solid rgba(63,60,60,0.479);
    background-color:rgba(63,60,60,0.479);
    border-radius:3px;
    color:red;
  }
  
  #delete:hover {
    background-color:red;
    color:white;
  }
  
  .AddBtn {
    border:none;
    background-color:green;
    padding:10px 10px 10px 10px;
    width:100px;
    border-radius:4px 0 4px 0;
    margin:5px;
    transition:background-color 0.3s ease;
    cursor:pointer;
  }
  
  .AddBtn:hover {
    background-color:rgba(8,85,8,0.466);
  }
  
  .item img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  
  .item .scale {
    transform:scale(1);
    transition:transform 0.3s ease;
    height:100%;
    width:100%;
  }
  
  .item .scale:hover {
    transform:scale(1.1);
    transition:transform 0.3s ease;
  }
  
  .BodyCyberFull {
    background-color:#f3f3f3;
    width:100%;
    min-height:980px;
    display:flex;
    flex-wrap:nowrap;
    justify-content:center;
    padding-bottom:0;
    flex-direction:column;
    align-items:center;
  }
  
  .BodyCyber {
    width:80%;
    padding-top:50px;
    padding-bottom:50px;
  }
  
  .BodyContact {
    background-image:url(/img/form.png);
    background-repeat:no-repeat;
    background-size:cover;
    background-size:100% 100%;
    width:50%;
    box-shadow:rgba(0,0,0,0.24) 0 3px 8px;
    border-radius:20px;
    margin:20px;
  }
  
  .BodyChiNhanh {
    display:flex;
    flex-direction:row;
    gap:3px;
    width:100%;
  }
  
  .ImageCyber {
    position:relative;
    width:40%;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
  }
  
  .ImageCyber img {
    width:100%;
    height:auto;
    object-fit:contain;
    /* hoặc 'cover' nếu muốn đầy khung */
  
      display:block;
  }
  
  .ImageCyber img {
    width:90%;
    border-radius:8px;
  }
  
  .ListCyber {
    width:70%;
    display:grid;
    gap:10px;
    grid-template-columns:repeat(2,1fr);
    /* 2 cột */;
  }
  
  .ModalMaps {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    background-color:#0000002d;
    display:none;
    opacity:0;
    z-index:9999;
  }
  
  .ModalAdd {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    background-color:#0000002d;
    display:none;
    opacity:0;
    z-index:9999;
  }
  
  input#inputName {
    border:1px solid;
    border-radius:4px;
    padding:5px;
    width:100%;
    margin:5px;
    text-align:center;
  }
  
  .ControllerBtn {
    position:fixed;
    left:0;
    top:0;
    display:flex;
    flex-direction:column;
    height:35px;
    overflow:hidden;
    transition:height 0.2s ease;
    z-index:100000;
  }
  
  .ControllerBtn:hover {
    height:700px;
  }
  
  .MapsApp {
    background-color:transparent;
    position:absolute;
    top:50%;
    left:50%;
    border-radius:8px;
    transform:translate(-50%,-50%);
  }
  
  .ModalContent {
    background-color:transparent;
    position:absolute;
    top:50%;
    left:50%;
    border-radius:8px;
    transform:translate(-50%,-50%);
  }
  
  #closeMap {
    position:absolute;
    right:0;
    padding:6px;
    border-radius:8px;
    border:1px solid #ffffff;
    color:#f5f5f5;
    background-color:rgb(255 0 0);
    cursor:pointer;
  }
  
  .CyberItem {
    width:100%;
    background-color:#ffffff;
    border-radius:8px;
    font-family:SVN-Tungsten;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color:#000000;
    text-align:center;
    padding:5px;
    box-shadow:rgba(0,0,0,0.24) 0 3px 8px;
  }
  
  .CyberItem:hover {
    background-color:#000000;
    color:#ffffff;
  }
  
  .Title {
    padding:15px 0 15px 0;
    margin-bottom:20px;
  }
  
  .CNName {
    font-size:24px;
    line-height:28px;
    text-transform:uppercase;
    font-weight:bold;
    font-family:'SVN-Tungsten';
    text-align:center;
    width:80%;
  }
  
  .CNLocation {
    text-align:left;
    width:80%;
    font-size:16px;
    line-height:24px;
    text-transform:uppercase;
    font-weight:bold;
    font-family:'SVN-Tungsten';
    color:#02A9FD;
  }
  
  .CNPhone {
    text-align:left;
    width:80%;
    font-size:16px;
    line-height:24px;
    text-transform:uppercase;
    font-weight:bold;
    font-family:'SVN-Tungsten';
    color:#02A9FD;
  }
  
  .CNActive {
    text-align:left;
    width:80%;
    font-size:16px;
    line-height:24px;
    text-transform:uppercase;
    font-weight:bold;
    font-family:'SVN-Tungsten';
    color:#02A9FD;
  }
  
  h3#TextGT {
    color:gray;
  }
  
  .CNButton {
    background-color:#02A9FD;
    color:white;
    border:none;
    padding:3px 10px;
    border-radius:3px;
    cursor:pointer;
    font-family:'SVN-Tungsten';
    /* font-size:16px;
    */
  
      font-weight:bold;
    transition:background-color 0.3s ease;
  }
  
  .BtnGroup {
    width:100%;
    display:flex;
    flex-direction:row;
    justify-content:center;
    gap:5px;
  }
  
  .BtnGroup button {
    padding:10px;
    border:none;
    border-radius:4px;
    background-color:var(--color-main,#02A9FD);
    color:white;
    font-weight:bold;
    transition:background-color 0.3s ease;
    cursor:pointer;
    border:1px solid white;
  }
  
  .BtnGroup button:hover {
    background-color:rgb(255,255,255);
    color:blue;
    border:1px solid blue;
  }
  
  .GioiThieu .BtnGroup {
    width:100%;
    display:flex;
    flex-direction:row;
    justify-content:space-evenly;
    gap:5px;
    margin:10px;
    max-height:50px;
    align-items:center;
  }
  
  .GioiThieu p {
    color:black;
  }
  
  .content-info {
    text-align:left;
  }
  
  .FormGroup {
    margin:0 50px 0 50px;
    display:flex;
    flex-direction:column;
    gap:10px;
    width:90%;
    align-items:center;
  }
  
  .FormGroup input {
    border:none;
    height:30px;
    text-align:center;
    border-radius:3px;
    box-shadow:rgba(0,0,0,0.24) 0 3px 8px;
    width:100%;
  }
  
  textarea#noidung {
    border:none;
    height:85px;
    border-radius:4px;
    resize:none;
    box-shadow:rgba(0,0,0,0.24) 0 3px 8px;
    width:100%;
  }
  
  button#btnrequest {
    border:none;
    border-radius:8px;
    background-color:blue;
    width:100px;
    padding:10px;
    color:white;
    font-weight:bold;
    font-size:14px;
    font-family:fangsong;
    cursor:pointer;
    margin-top:20px;
  }
  
  .FormLogin {
    width:100%;
    width:300px;
    display:flex;
    flex-direction:column;
    gap:5px;
    color:#03a9f4;
    letter-spacing:2.2px;
    font-family:SVN-Tungsten;
  }
  
  .FormLogin input {
    height:50px;
    font-size:16px;
    font-weight:bold;
    border-radius:4px;
    color:#02a9fd;
    border:none;
    background-color:#0a60b521;
    text-align:center;
  }
  
  .FormLogin .button {
    background-color:#02A9FD;
    cursor:pointer;
    color:white;
  }
  
  .ultopdf {
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
  }
  
  button#btnrequest:hover {
    background-color:#02A9FD;
    color:white;
    transition:0.3s ease;
  }
  
  .FormContact h2 {
    text-align:center;
    margin:20px;
    color:crimson;
  }
  
  form.FormContact {
    padding:20px;
    display:flex;
    align-items:center;
    flex-direction:column;
    text-align:left;
  }
  
  .GroupHead label {
    color: red;
    font-weight: bold;
    font-size: large;
    /* display: flex
; */
    /* flex-direction: row; */
    /* flex-wrap: wrap; */
    /* justify-content: flex-end; */
}

.CheckBoxCN {
    display: grid
;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 100%;
    justify-items: stretch;
}
  select#CNSelect {
    border:none;
    border-radius:4px;
    height:40px;
    background-color:#f7d80c;
    text-align:center;
    color:#02a9fd;
    font-size:22px;
    font-weight:bold;
    font-family:'SVN-Tungsten';
    width:100%;
  }
  
  .prev,
  .next {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background-color:rgba(0,0,0,0.5);
    color:white;
    border:none;
    padding:10px;
    cursor:pointer;
    font-size:18px;
    z-index:100;
  }
  
  .prev {
    left:10px;
  }
  
  .next {
    right:10px;
  }
  
  .sliderc {
    display:flex;
    transition:transform 0.5s ease;
  }
  
  p#ContentText {
    text-align:left;
    width:70%;
  }
  
  .slidec {
    width:100%;
    height:300px;
    /* hoặc chiều cao bạn muốn */
  
      overflow:hidden;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#000;
    /* màu nền nếu ảnh không phủ hết */
  
      flex:0 0 100%;
    border-radius:8px;
  }
  
  .button-content {
    background-color:#f90000;
    padding:10px;
    border-radius:0 8px 0 8px;
    border:1px solid #fbfbfb;
  }
  
  .button-content:hover {
    background-color:#02A9FD;
    color:white;
    transition:0.3s ease;
  }
  
  .slidec img {
    object-fit:contain;
    /* QUAN TRỌNG:ảnh nằm trọn không bị cắt */
  
      transition:opacity 0.3s ease;
    opacity:1;
  }
  
  .Controller {
    padding-top:3px;
    padding-bottom:3px;
    background-color:red;
    color:white;
    font-size:14px;
    font-weight:bold;
    text-align:center;
    gap:33px;
    width:100%;
    display:flex;
    justify-content:center;
  }
  
  .div {
    /* overflow:hidden;
    */
  
      width:100%;
    display:flex;
    align-items:center;
    flex-direction:row-reverse;
    justify-content:space-around;
  }
  
  /* Food And Drink */
  
  .DichVuContainer {
    display:flex;
    flex-direction:column;
    align-items:center;
    width:90%;
    min-height:700px;
  }
  
  .TitleDichVuTop {
    font-size:40px;
    font-family:'SVN-Tungsten';
    letter-spacing:normal;
    font-weight:bold;
    color:#2261d0;
    padding:30px;
  }
  
  .CyberDichVu {
    position:absolute;
    top:62px;
    left:2px;
    border-radius:4px;
    background-color:#2096f2;
    color:white;
    padding:5px;
  }
  
  .TitleDichVu {
    font-size:20px;
    font-weight:bold;
    color:#0329f1;
    text-align:center;
    position:absolute;
    letter-spacing:2.2px;
    font-family:emoji;
    bottom:10px;
    /* left:25%;
    */
  
      padding:5px;
    width:100%;
    border-radius:8px;
    background-color:rgba(255,255,255,0.61);
    /* text-shadow:0 1px #0d3bf7;
    */;
  }
  
  .ListDichVu {
    width:90%;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    padding:30px;
  }
  
  .DichVuItem {
    display:flex;
    position:relative;
    height:305px;
    background-color:white;
    border-radius:8px;
    color:red;
    overflow:hidden;
  }
  
  .DichVuItem button#BtnDel {
    color:red;
    border:1px solid red;
    top:2px;
    position:absolute;
    background-color:white;
    right:2px;
    transition:transform 0.5s ease;
  }
  
  .DichVuItem button#BtnDel:hover {
    transform:scale(1.1);
  }
  
  .DichVuImage {
    width:100%;
    height:100%;
  }
  
  .DichVuImage img {
    border-radius:8px;
  }
  
  input#SearchName {
    border-radius:4px;
    border:none;
    padding:10px;
    width:100%;
    height:100%;
  }
  
  .SearchGroup {
    display:flex;
    gap:10px;
  }
  
  .SearchTitle {
    width:300px;
  }
  
  .DichVuContent {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    width:50%;
    justify-content:space-evenly;
    margin-left:10px;
  }
  
  .FormDichVu {
    position:absolute;
    padding:5px 15px 5px 15px;
    border-radius:4px;
    background-color:#2096f2;
    color:white;
    /* width:100%;
    */
  
      text-align:center;
    top:2px;
    left:2px;
  }
  
  .CostDichVu {
    /* font-weight:bold;
    */
  
      
  /* font-family:'SVN-Tungsten';
    */
  
      color:#fcfcfc;
    font-size:17px;
    position:absolute;
    background-color:#2096f2;
    top:31px;
    left:2px;
    border-radius:4px;
    padding:5px 15px 5px 15px;
  }
  
  .DichVuPages {
    display:flex;
    gap:10px;
    padding:30px;
  }
  
  select#CyberSearchOption {
    border:none;
    border-radius:4px;
    height:40px;
    background-color:#f7d80c;
    text-align:center;
    color:#02a9fd;
    font-size:22px;
    font-weight:bold;
    font-family:'SVN-Tungsten';
    width:100%;
  }
  
  .BodyTuyenDung {
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    margin-top:20px;
    margin-bottom:20px;
  }
  
  .RName {
    font-size:32px;
  }
  
  .RMota {
    background-color:#03A9F4;
    padding:5px;
    font-size:18px;
    color:white;
    font-weight:bold;
    border-radius:4px;
  }
  
  .RVitri {
    border-radius:8px 0 8px 0;
    border:1px solid red;
    background-color:red;
    color:white;
    padding:5px;
    font-weight:bold;
  }
  
  .ContentForm {
    display:flex;
    flex-direction:column;
    align-items:baseline;
    justify-content:space-evenly;
    gap:10px;
  }
  
  .Error {
    padding:20px;
    width:80%;
    text-align:center;
    font-size:large;
    font-weight:bold;
    border-radius:8px;
    border:1px solid gray;
    margin:50px;
    min-height:400px;
  }
  
  .ImageForm img {
    border-radius:20px 0 20px 0;
  }
  
  .RItem {
    border-radius:8px;
    border:1px solid #03A9F4;
    padding:5px;
  }
  
  .RCyber {
    display:flex;
    gap:10px;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:flex-start;
  }
  
  .RUrl a {
    color:white;
    background-color:#03A9F4;
    padding:5px;
    border-radius:0 8px;
    font-weight:bold;
    font-size:16px;
  }
  
  .ImageForm {
    width:200px;
  }
  
  a#edittuyendung {
    position:absolute;
    top:0;
    right:0;
    color:red;
    border:1px solid;
    padding:5px;
    border-radius:4px;
  }
  
  input#Title {
    padding:5px;
    width:80%;
    font-weight:bold;
    color:red;
  }
  
  a#deltuyendung {
    position:absolute;
    top:32px;
    right:0;
    color:red;
    border:1px solid;
    padding:5px;
    border-radius:4px;
  }
  
  .TuyenDungForm {
    border-radius:8px;
    border:1px solid orange;
    padding:20px;
    display:flex;
    gap:20px;
    position:relative;
  }
  
  div#EventThread {
    width:100%;
    text-align:center;
    font-size:32px;
  }
  
  div#CyberSearch {
    width:300px;
  }
  
  a#delpost {
    color:red;
    border-radius:4px;
    border:1px solid;
    padding:3px;
    position:absolute;
    top:0;
    right:0;
  }
  
  span.paginationspan {
    padding:5px;
    border-radius:4px;
    margin:3px;
  }
  
  /* Food And Drink */
  
  .ThreadList {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    padding-bottom:10px;
  }
  
  .PagesThread {
    width:100%;
    height:200px;
    overflow:hidden;
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    background-color:white;
    position:relative;
    border-radius:6px;
  }
  
  .ThreadCyber {
    position:absolute;
    right:0;
    bottom:0;
    color:gray;
  }
  
  .ThreadDate {
    color:gray;
  }
  
  .BodyThread {
    display:flex;
    flex-direction:column;
    align-items:baseline;
    width:100%;
    margin-top:50px;
    gap:10px;
    margin-bottom:50px;
  }
  
  .ContainerThread {
    width:90%;
  }
  
  .ThreadContent {
    white-space:pre-line;
    font-family:math;
    font-size:18px;
    line-height:2;
    margin-top:50px;
    margin-bottom:50px;
  }
  
  .Thumb {
    width:200px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  
  .Thumb img {
    width:90%;
    height:90%;
    border-radius:8px;
  }
  
  .ThreadTitle {
    font-size:23px;
    font-weight:bold;
    color:#0000ff;
    letter-spacing:normal;
  }
  
  .FeedContainer {
    width:90%;
  }
  
  .TitleFeed {
    padding:15px 0 15px 0;
    margin:10px;
    display:flex;
    flex-direction:column;
    width:calc(100% - 200px);
    justify-content:space-around;
    align-content:center;
    align-items:baseline;
  }
  
  .pagination {
    width: 100%;
    text-align: center;
    font-size: 18px;
    color: blue;
    height: 30px;
}
  
  a#idPages {
    color:blue;
    border-radius:4px;
    border:1px solid;
    padding:5px;
  }
  
  .ThreadCatalog {
    background-color:red;
    border-radius:4px;
    padding:5px;
    color:white;
    box-shadow:rgba(50,50,93,0.25) 0 50px 100px -20px,rgba(0,0,0,0.3) 0 30px 60px -30px,rgba(10,37,64,0.35) 0 -2px 6px 0 inset;
  }
  
  .ThreadPost {
    background-color:rgb(255,187,0);
    border-radius:4px;
    padding:5px;
    color:white;
    box-shadow:rgba(50,50,93,0.25) 0 50px 100px -20px,rgba(0,0,0,0.3) 0 30px 60px -30px,rgba(10,37,64,0.35) 0 -2px 6px 0 inset;
  }
  
  @media (max-width:1350px) {
    .container {
      display:flex;
      gap:20px;
      flex-direction:column;
      align-items:center;
    }
    .ListDichVu {
      grid-template-columns:repeat(3,1fr);
    }
    .EventContainer {
      display:flex;
      flex-direction:column;
      width:100%;
      align-items:center;
    }
    .EventInfo {
      width:90%;
      padding-top:100px;
      padding-bottom:100px;
    }
    .EventImage {
      width:90%;
      height:90%;
    }
    .ImageContent {
      grid-template-columns:repeat(3,1fr);
      /* 2 cột */;
    }
    .BodyChiNhanh {
      display:flex;
      flex-direction:column;
      width:100%;
      align-items:center;
      gap:20px;
    }
    .ImageCyber {
      width:100%;
      max-height:500px;
      overflow:hidden;
    }
    .ImageCyber img {
      width:100%;
    }
    .CyberItem {
      width:100%;
      background-color:#ffffff;
      border-radius:8px;
      font-family:SVN-Tungsten;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      color:#000000;
      text-align:center;
      padding:5px;
    }
    .ListCyber {
      width:100%;
      display:grid;
      gap:10px;
      grid-template-columns:repeat(2,1fr);
    }
    .BodyCyber {
      width:80%;
      padding-top:50px;
      padding-bottom:0;
    }
  }
  
  #social {
    position:fixed;
    z-index:999;
    right:var(--right,inherit);
    bottom:var(--bottom,inherit);
  }
  
  .animated {
    -webkit-animation-duration:1s;
    animation-duration:1s;
    -webkit-animation-fill-mode:both;
    animation-fill-mode:both;
  }
  
  #social img {
    border-radius:50%;
  }
  
  @media (max-width:900px) {
    .SukienList {
      width:90%;
      grid-template-columns:repeat(1,1fr);
    }
    .ListDichVu {
      grid-template-columns:repeat(2,1fr);
    }
    .ImageContent {
      grid-template-columns:repeat(2,1fr);
      /* 2 cột */;
    }
    .footer-layout .wrap-content {
      justify-content:space-evenly;
      gap:20px;
    }
    .BodyChiNhanh {
      display:flex;
      flex-direction:column;
      overflow:hidden;
      width:100%;
      align-items:center;
      gap:20px;
    }
    .ListCyber {
      width:100%;
      display:grid;
      gap:10px;
      grid-template-columns:repeat(1,1fr);
    }
  }
  
  @media (max-width:600px) {
    nav.navbar {
      display:none;
    }
    header navM {
      display:block;
    }
    .ListDichVu {
      grid-template-columns:repeat(1,1fr);
    }
    .ImageContent {
      grid-template-columns:repeat(1,1fr);
      /* 2 cột */;
    }
    .BodyChiNhanh {
      display:flex;
      flex-direction:column;
      overflow:hidden;
      width:100%;
      align-items:center;
      gap:20px;
    }
  }
  
  @import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700');
    @import url('https://fonts.googleapis.com/css?family=Catamaran:400,800');
    .error-container {
    text-align:center;
    font-size:106px;
    font-family:'Catamaran',sans-serif;
    font-weight:800;
    margin:100px 15px;
  }
  
  .error-container > span {
    display:inline-block;
    position:relative;
  }
  
  .error-container > span.four {
    width:136px;
    height:43px;
    border-radius:999px;
    background:linear-gradient(140deg,rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.07) 43%,transparent 44%,transparent 100%),linear-gradient(105deg,transparent 0%,transparent 40%,rgba(0,0,0,0.06) 41%,rgba(0,0,0,0.07) 76%,transparent 77%,transparent 100%),linear-gradient(to right,#d89ca4,#e27b7e);
  }
  
  .error-container > span.four:before,
  .error-container > span.four:after {
    content:'';
    display:block;
    position:absolute;
    border-radius:999px;
  }
  
  .error-container > span.four:before {
    width:43px;
    height:156px;
    left:60px;
    bottom:-43px;
    background:linear-gradient(128deg,rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.07) 40%,transparent 41%,transparent 100%),linear-gradient(116deg,rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.07) 50%,transparent 51%,transparent 100%),linear-gradient(to top,#99749D,#B895AB,#CC9AA6,#D7969E,#E0787F);
  }
  
  .error-container > span.four:after {
    width:137px;
    height:43px;
    transform:rotate(-49.5deg);
    left:-18px;
    bottom:36px;
    background:linear-gradient(to right,#99749D,#B895AB,#CC9AA6,#D7969E,#E0787F);
  }
  
  .error-container > span.zero {
    vertical-align:text-top;
    width:156px;
    height:156px;
    border-radius:999px;
    background:linear-gradient(-45deg,transparent 0%,rgba(0,0,0,0.06) 50%,transparent 51%,transparent 100%),linear-gradient(to top right,#99749D,#99749D,#B895AB,#CC9AA6,#D7969E,#ED8687,#ED8687);
    overflow:hidden;
    animation:bgshadow 5s infinite;
  }
  
  .error-container > span.zero:before {
    content:'';
    display:block;
    position:absolute;
    transform:rotate(45deg);
    width:90px;
    height:90px;
    background-color:transparent;
    left:0;
    bottom:0;
    background:linear-gradient(95deg,transparent 0%,transparent 8%,rgba(0,0,0,0.07) 9%,transparent 50%,transparent 100%),linear-gradient(85deg,transparent 0%,transparent 19%,rgba(0,0,0,0.05) 20%,rgba(0,0,0,0.07) 91%,transparent 92%,transparent 100%);
  }
  
  .error-container > span.zero:after {
    content:'';
    display:block;
    position:absolute;
    border-radius:999px;
    width:70px;
    height:70px;
    left:43px;
    bottom:43px;
    background:#FDFAF5;
    box-shadow:-2px 2px 2px 0 rgba(0,0,0,0.1);
  }
  
  .screen-reader-text {
    position:absolute;
    top:-9999em;
    left:-9999em;
  }
  
  @keyframes bgshadow {
    0% {
      box-shadow:inset -160px 160px 0 5px rgba(0,0,0,0.4);
    }
    45% {
      box-shadow:inset 0 0 0 0 rgba(0,0,0,0.1);
    }
    55% {
      box-shadow:inset 0 0 0 0 rgba(0,0,0,0.1);
    }
    100% {
      box-shadow:inset 160px -160px 0 5px rgba(0,0,0,0.4);
    }
  }
  
  .zoom-area {
    max-width:490px;
    margin:30px auto 30px;
    font-size:19px;
    text-align:center;
  }
  
  .link-container {
    text-align:center;
  }
  
  a.more-link {
    text-transform:uppercase;
    font-size:13px;
    background-color:#de7e85;
    padding:10px 15px;
    border-radius:0;
    color:#fff;
    display:inline-block;
    margin-right:5px;
    margin-bottom:5px;
    line-height:1.5;
    text-decoration:none;
    margin-top:50px;
    letter-spacing:1px;
  }


  .branch {
    display: inline-block;
    margin: 0 20px;
    vertical-align: top;
  }
  .round {
    margin-bottom: 20px;
  }
  .match {
    border: 1px solid #ccc;
    padding: 5px 10px;
    margin: 5px 0;
  }