.avatar {
    width: 30px; /* Kích thước avatar */
    height: 30px; /* Kích thước avatar */
    border-radius: 50%; /* Làm tròn avatar */
    padding-left: 1px !important; /* Giảm khoảng cách giữa avatar và tên người dùng */
    vertical-align: middle; /* Căn giữa avatar với văn bản */
}


/* Hiệu ứng 3D cho các nút */
button, .filter a, .pagination a, .auth-links a, .upload-button {
    padding: 10px 15px;
    background-color: #1e90ff;
    color: white;
    border: none;
    border-radius: 5px;
    box-shadow: 0px 5px 0px #1c7cc9; /* Tạo hiệu ứng bóng cho 3D */
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

/* Chuyển động khi trỏ vào */
button:hover, .filter a:hover, .pagination a:hover, .auth-links a:hover, .upload-button:hover {
    background-color: #4682b4;
    transform: translateY(-3px); /* Tạo chuyển động nổi lên */
    box-shadow: 0px 8px 0px #1c7cc9; /* Tạo hiệu ứng bóng đổ khi nổi lên */
}
.game a {
    padding: 8px 12px;
    background-color: #1e90ff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
    position: relative;
    top: 0;
}

.game a:hover {
    background-color: #4682b4;
    transform: translateY(-2px);
    box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.2);
}



   .game {
    border: 2px solid #1e90ff; /* Màu viền xanh đậm */
    border-radius: 10px; /* Bo góc mềm mại */
    margin: 10px;
    padding: 10px;
    width: calc(25% - 20px);
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s; /* Hiệu ứng khi hover */
    position: relative;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Đổ bóng nhẹ */
    background-color: #fff; /* Màu nền trắng cho khung game */
}

.game:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Đổ bóng mạnh hơn khi hover */
}

.game img {
    max-width: 100%;
    border-radius: 10px; /* Bo góc hình ảnh theo khung game */
}
* {
  box-sizing: border-box;
  font-family: system-ui, "Segoe UI";
}

.btn-disabled {
	opacity: 0.6;
	pointer-events: none
}

button {
  outline: none;
  border: none;
}

.coccoc-line-img {
  height: 20px;
  width: 20px;
  border-radius: 4px;
}
.coccoc-line-img[data-src="CambridgeDict"] {
  background-image: url("../images/cambridge.png");
}
.coccoc-line-img[data-src="OxfordDict"] {
  background-image: url("../images/oxford.png");
}

.coccoc-triangle-top::before {
  display: block;
  content: '';
  position: absolute;
  top: 0;
  left: var(--triangleLeft);
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-bottom-color: var(--triangleColor);
  border-top: 0;
  margin-left: -8px;
  margin-top: -8px;
  z-index: inherit;
}

.coccoc-triangle-bottom::after {
  display: block;
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--triangleLeft);
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-top-color: var(--triangleColor);
  border-bottom: 0;
  margin-left: -8px;
  margin-bottom: -8px;
}

.coccoc-add-currencies {
  height: 45px;
  width: 287px;
  text-align: center;
  align-items: center;
  padding: 0 12.6px;
  font-size: 13px;
}

.coccoc-dark-theme {
  --triangleColor: #424242;
  background-color: #424242;
  color: #fff;
}

.coccoc-light-theme {
  --triangleColor: #fff;
  background-color: #fff;
  color: #424242;
}

.conversion-notification {
  position: absolute;
  z-index: 1000000000;

  width: 352px;
  height: 136px;

  display: flex;
  flex-direction: row;

  background-color: #17171d;
  color: #fff;

  border-radius: 5px;
  padding: 10px;
}

.conversion-notification::after {
  display: block;
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--triangleLeft);
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-top-color: #17171d;
  border-bottom: 0;
  margin-left: -8px;
  margin-bottom: -8px;
}

.noti-logo-ico {
  width: 50px;
  background: center 5px/70% url('../images/conversion_notification_icon.svg') no-repeat;
}

.noti-content {
  width: 251px;
  height: 100%;

  display: flex;
  flex-direction: column;

  margin-left: 10px;
}

.noti-header {
  font-size: 16px;
  font-weight: 600;

  color: #62b35d;
}

.noti-message {
  font-size: 14px;
}

.noti-btn-group {
  display: flex;
  justify-content: flex-end;
  align-items: center;

  padding: 15px 0px 5px 0px;
}

.noti-btn-group .noti-btn {
  height: 36px;

  padding: 0 12px;
  border: none;
  border-radius: 4px;
  margin-left: 12px;

  line-height: 36px;
  text-align: center;
  cursor: pointer;
  outline: none;
}
.noti-btn.already-use {
  background-color: #17171d;
  color: #828282;
}
.noti-btn.noti-btn.already-use:hover {
  color: #fff;
}
.noti-btn.try-now {
  background-color: #62b35d;
  color: #fff;
}
.noti-btn.try-now:hover {
  background-color: #64b961
}

.noti-close-btn {
  width: 14px;
  height: 14px;

  position: absolute;
  top: 15px;
  right: 15px;

  background: center/contain url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBjbGlwLXBhdGg9InVybCgjY2xpcDApIj48cmVjdCB3aWR0aD0iMiIgaGVpZ2h0PSIxOCIgcng9IjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0wLjA3MTA0NDkgMS4zNDMxNCkgcm90YXRlKC00NSkiIGZpbGw9IiNDNEM0QzQiLz48cmVjdCB3aWR0aD0iMiIgaGVpZ2h0PSIxOCIgcng9IjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLjY1NjkgLTAuMDcxMDQ0OSkgcm90YXRlKDQ1KSIgZmlsbD0iI0M0QzRDNCIvPjwvZz48ZGVmcz48Y2xpcFBhdGggaWQ9ImNsaXAwIj48cmVjdCB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIGZpbGw9IndoaXRlIi8+PC9jbGlwUGF0aD48L2RlZnM+PC9zdmc+') no-repeat;
  cursor: pointer;
}

.tooltip-wave-wrapper {
  position: absolute;
  pointer-events: none;
}

.tooltip-wave-wrapper .tooltip-wave {
  position: absolute;

  width: 10px;
  height: 10px;

  pointer-events: none;

  border-radius: 50%;
  background-color: #62b35d;
  animation: wave-focusing 1.5s linear infinite;

  z-index: 100000000;
}

.tooltip-wave-wrapper .tooltip-wave.delay {
  animation-delay: 0.7s;
}

@keyframes wave-focusing {
  0%{transform:scale(1,1);opacity:0.8;}
  50%{transform:scale(2,2);opacity:0.4;}
  100%{transform:scale(5,5);opacity:0}
}

@keyframes expand {
  from {
    width: 0%;
    height: 0%;
  }
  to {
    width: 100%;
    height: 100%;
  }
}

@keyframes collapse {
  from {
    width: 100%;
    height: 100%;
  }
  to {
    width: 0%;
    height: 0%;
  }
}

.hidden {
  display: none;
}