/* ==========================================================================
   Hội Game VN - Main Stylesheet
   Typography: Helvetica Neue (15px PC / 16px Mobile)
   Max Font-Weight: 600 (Strictly enforced)
   Color Palette: #FAF7F2 (Main BG), #FF7A00 (Primary), #4A0E04 (Dark Accent)
   ========================================================================== */

:root {
  --gh-bg-main: #FAF7F2;
  --gh-primary: #FF7A00;
  --gh-primary-hover: #E06C00;
  --gh-secondary: #4A0E04;
  --gh-card-bg: #FFFFFF;
  --gh-border: #EFE6D8;
  --gh-text: #2D241E;
  --gh-text-muted: #7A6E65;
  --gh-vip-bg: #FFFBF0;
  --gh-vip-border: #FFC107;
  --gh-vip-badge: #D97706;
  --gh-shadow: 0 4px 12px rgba(74, 14, 4, 0.05);
  --gh-font: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body, input, select, textarea, button, p, span, div, a, h1, h2, h3, h4, h5, h6, table, th, td, label {
  font-family: var(--gh-font);
}

/* Ensure FontAwesome 6 Icons inherit exact FontAwesome Font Family */
i[class*="fa-"], span[class*="fa-"], [class^="fa-"], [class*=" fa-"],
i[class*="fa-"]::before, span[class*="fa-"]::before, [class^="fa-"]::before, [class*=" fa-"]::before,
.fa, .fas, .far, .fab, .fal, .fad, .fa-solid, .fa-regular, .fa-brands {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
  font-weight: 900 !important;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
}

.fa-brands, .fab {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
}

.fa-regular, .far {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 400 !important;
}

/* Frontend Layout Container Override (Max-Width 1200px) */
@media (min-width: 1200px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    max-width: 1200px !important;
  }
}

body {
  background-color: var(--gh-bg-main);
  color: var(--gh-text);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  font-weight: 400;
}

@media (max-width: 768px) {
  body {
    font-size: 16px;
  }
}

/* Headings typography (+1px incremental, max font-weight 600) */
h1, .h1 { font-size: 21px; font-weight: 600; color: var(--gh-secondary); margin-bottom: 0.5rem; }
h2, .h2 { font-size: 16px; font-weight: 600; color: var(--gh-secondary); margin-bottom: 0.5rem; line-height:24px;text-align: justify;}
h3, .h3 { font-size: 19px; font-weight: 600; color: var(--gh-secondary); margin-bottom: 0.5rem; }
h4, .h4 { font-size: 18px; font-weight: 600; color: var(--gh-secondary); margin-bottom: 0.5rem; }
h5, .h5 { font-size: 17px; font-weight: 600; color: var(--gh-secondary); margin-bottom: 0.5rem; }
h6, .h6 { font-size: 16px; font-weight: 600; color: var(--gh-secondary); margin-bottom: 0.5rem; }
strong, b, th { font-weight: 600 !important; }

/* Links */
a {
  color: var(--gh-primary);
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}
a:hover {
  color: var(--gh-primary-hover);
}

/* ==========================================================================
   CLASSIC HEADER NAVIGATION STYLING
   Default: Pure clean white text without background
   Hover & Active: Classic style with golden accent
   ========================================================================== */
.gh-header {
  background: linear-gradient(180deg, #FF9500 0%, #E65100 100%);
  border-bottom: 4px solid var(--gh-secondary);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
}

.gh-header .nav-link {
  font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  letter-spacing: 0.1px;
  padding: 6px 10px;
  border-radius: 6px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transition: all 0.2s ease-in-out;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  position: relative;
  white-space: nowrap !important;
}

@media (min-width: 1200px) {
  .gh-header .nav-link {
    font-size: 14px !important;
    padding: 7px 13px;
    gap: 6px;
  }
}

.gh-header .nav-link i {
  font-size: 13.5px;
  color: #FFE082 !important;
  transition: transform 0.2s ease, color 0.2s ease;
}

.gh-header .dropdown-toggle::after {
  margin-left: -4px !important;
  vertical-align: 0.18em !important;
}

/* HOVER STATE (CLASSIC) */
.gh-header .nav-link:hover {
  color: #FFE082 !important;
  background: rgba(0, 0, 0, 0.18) !important;
  border-radius: 6px;
}

.gh-header .nav-link:hover i {
  color: #FFF59D !important;
  transform: translateY(-1px);
}

/* ACTIVE STATE (CLASSIC) */
.gh-header .nav-link.active {
  color: #FFE082 !important;
  background: rgba(0, 0, 0, 0.28) !important;
  font-weight: 700;
  border-radius: 6px;
}

.gh-header .nav-link.active i {
  color: #FFD54F !important;
}

.gh-header .nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 8px;
  right: 8px;
  height: 2.5px;
  background: #FFE082;
  border-radius: 4px;
  box-shadow: 0 0 6px rgba(255, 224, 130, 0.7);
}

/* Mobile Drawer Accordion Styling */
.transition-rotate {
  transition: transform 0.2s ease-in-out;
}
.mobile-game-accordion button:not(.collapsed) .transition-rotate,
.mobile-guide-accordion button:not(.collapsed) .transition-rotate {
  transform: rotate(180deg);
}
.mobile-game-item {
  padding: 8px 10px !important;
  margin-bottom: 2px !important;
  border-radius: 8px !important;
}
.mobile-game-item img,
.mobile-game-item > div:first-child {
  margin-right: -5px !important;
  flex-shrink: 0 !important;
}
.gh-card {
  background: var(--gh-card-bg);
  border: 1px solid var(--gh-border);
  border-radius: 10px;
  box-shadow: var(--gh-shadow);
  margin-bottom: 1.25rem;
  overflow: hidden;
}

.gh-card-header {
  background: #FDFBF7;
  border-bottom: 1px solid var(--gh-border);
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.gh-card-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--gh-secondary);
  margin: 0;
}

.gh-card-body {
  padding: 1.25rem;
}

/* VIP Pinned Item Highlight */
.gh-post-item {
  display: flex;
  align-items: center;
  padding: 0.85rem 1rem;
  border-bottom: 1px dashed var(--gh-border);
  transition: background 0.2s;
}
.gh-post-item:last-child {
  border-bottom: none;
}
.gh-post-item:hover {
  background-color: #FDFBF7;
}

.gh-post-item.gh-vip-pinned {
  background-color: var(--gh-vip-bg);
  border-left: 4px solid var(--gh-vip-border);
  box-shadow: 0 2px 6px rgba(255, 193, 7, 0.15);
}

.bgheader-card{background: linear-gradient(135deg, #FFCB00 0%, #FFF 100%);}

/* Platform Badges */
.badge-pc { background-color: #0284C7; color: #FFF; font-weight: 500; font-size: 11px; }
.badge-mobile { background-color: #16A34A; color: #FFF; font-weight: 500; font-size: 11px; }
.badge-web { background-color: #9333EA; color: #FFF; font-weight: 500; font-size: 11px; }
.badge-private { background-color: #DC2626; color: #FFF; font-weight: 500; font-size: 11px; }

/* Buttons */
.btn-gh-primary {
  background-color: var(--gh-primary);
  color: #FFFFFF;
  font-weight: 600;
  border: none;
  padding: 0.5rem 1.25rem;
  border-radius: 6px;
  transition: all 0.2s ease-in-out;
}
.btn-gh-primary:hover {
  background-color: var(--gh-primary-hover);
  color: #FFFFFF;
}

.btn-gh-secondary {
  background-color: var(--gh-secondary);
  color: #FFFFFF;
  font-weight: 600;
  border: none;
  padding: 0.5rem 1.25rem;
  border-radius: 6px;
}
.btn-gh-secondary:hover {
  background-color: #380A03;
  color: #FFFFFF;
}

/* Banner Slot Container */
.gh-banner-container {
  display: block;
  margin-bottom: 1rem;
  text-align: center;
}
.gh-banner-img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--gh-border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Floating Zalo Widget */
.gh-zalo-float {
  position: fixed;
  bottom: 25px;
  right: 25px;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}
.gh-zalo-float:hover {
  transform: scale(1.1);
}
.gh-zalo-float img {
  border: 2px solid #FFFFFF;
  box-shadow: 0 4px 15px rgba(0,104,255,0.4);
}

/* Floating Chat Fanpage Widget (Góc Phải Footer) */
.gh-chat-fanpage-float {
  position: fixed;
  bottom: 25px;
  right: 25px;
  z-index: 1050;
  display: flex;
  align-items: center;
}
.btn-chat-fanpage {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: linear-gradient(135deg, #0084FF 0%, #A033FF 55%, #FF5280 100%);
  color: #ffffff !important;
  font-weight: 700;
  font-size: 13.5px;
  padding: 9px 18px 9px 13px;
  border-radius: 50px;
  text-decoration: none !important;
  box-shadow: 0 6px 22px rgba(0, 132, 255, 0.45);
  border: 2px solid rgba(255, 255, 255, 0.9);
  position: relative;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation: chatFanpagePulse 2.2s infinite ease-in-out;
  cursor: pointer;
}
.btn-chat-fanpage:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 28px rgba(0, 132, 255, 0.65);
  color: #ffffff !important;
}
.btn-chat-fanpage .chat-fanpage-icon {
  width: 30px;
  height: 30px;
  background: #ffffff;
  color: #0084FF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.btn-chat-fanpage .chat-fanpage-text {
  letter-spacing: 0.2px;
  white-space: nowrap;
  font-family: inherit;
}
.btn-chat-fanpage .chat-fanpage-badge-online {
  width: 9px;
  height: 9px;
  background-color: #10B981;
  border: 1.5px solid #ffffff;
  border-radius: 50%;
  position: absolute;
  top: 7px;
  left: 33px;
}
@keyframes chatFanpagePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 132, 255, 0.55), 0 6px 22px rgba(0, 132, 255, 0.4);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(0, 132, 255, 0), 0 6px 22px rgba(0, 132, 255, 0.4);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 132, 255, 0), 0 6px 22px rgba(0, 132, 255, 0.4);
  }
}
@media (max-width: 576px) {
  .gh-chat-fanpage-float {
    bottom: 20px;
    right: 15px;
  }
  .btn-chat-fanpage {
    padding: 8px 14px 8px 10px;
    font-size: 12.5px;
  }
  .btn-chat-fanpage .chat-fanpage-icon {
    width: 26px;
    height: 26px;
    font-size: 15px;
  }
  .btn-chat-fanpage .chat-fanpage-badge-online {
    top: 6px;
    left: 27px;
  }
}

/* Custom Toast Styling */
.toast-container {
  z-index: 9999;
}

/* Custom Modal Styling */
.modal-content {
  border-radius: 12px;
  border: 1px solid var(--gh-border);
}
.modal-header {
  background-color: #FDFBF7;
  border-bottom: 1px solid var(--gh-border);
}

/* Mobile Drawer Styling (HoiGameVN Warm Light Theme) */
.gh-mobile-drawer {
  background-color: var(--gh-bg-main);
  color: var(--gh-text);
  border-right: 1px solid var(--gh-border);
}
.gh-mobile-drawer .offcanvas-header {
  background: linear-gradient(180deg, #FF9500 0%, #E65100 100%);
  border-bottom: 2px solid var(--gh-secondary) !important;
}
.gh-mobile-drawer .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}
.gh-mobile-drawer .list-group-item {
  background-color: transparent;
  color: var(--gh-text);
  border-color: var(--gh-border);
  font-size: 15px;
  transition: all 0.2s ease;
}
.gh-mobile-drawer .list-group-item:hover,
.gh-mobile-drawer .list-group-item:focus {
  background-color: rgba(255, 122, 0, 0.08);
  color: var(--gh-secondary);
}

/* ==========================================================================
   ZALO PULSE WAVE ANIMATION & AD CONTACT BUTTONS (HOIGAMEVN STYLING)
   ========================================================================== */
@keyframes zaloPulseWave {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 104, 255, 0.65);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(0, 104, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 104, 255, 0);
  }
}

.zalo-pulse-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.zalo-pulse-circle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: zaloPulseWave 1.8s infinite ease-in-out;
  box-shadow: 0 2px 8px rgba(0, 104, 255, 0.25);
  border: 1.5px solid #0068FF;
  flex-shrink: 0;
}

.zalo-pulse-circle img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.zalo-phone-number {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0068FF !important;
  letter-spacing: 0.5px;
}

.btn-ad-zalo {
  background: linear-gradient(135deg, #0068FF 0%, #0052CC 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 50px !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* ==========================================================================
   AUTH MODALS STYLING (HOIGAMEVN EXACT MATCH)
   ========================================================================== */
.card-header-gh {
  background-color: #FFFFFF !important;
  border-bottom: 1px solid #EFE6D8 !important;
  color: #4A0E04 !important;
  font-weight: 700;
}

.text-maroon {
  color: #4A0E04 !important;
}

.text-orange {
  color: #FF7A00 !important;
}

.btn-orange {
  background: linear-gradient(180deg, #FF9500 0%, #E65100 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(230, 81, 0, 0.25);
  transition: all 0.2s ease;
}

.btn-orange:hover,
.btn-orange:focus {
  background: linear-gradient(180deg, #E66B00 0%, #D84300 100%) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(230, 81, 0, 0.35);
}

.custom-orange-checkbox .form-check-input:checked {
  background-color: #FF7A00 !important;
  border-color: #FF7A00 !important;
}

.auth-modal-fs16 .form-control,
.auth-modal-fs16 .input-group-text,
.auth-modal-fs16 .btn,
.auth-modal-fs16 .form-label,
.auth-modal-fs16 .form-check-label,
.auth-modal-fs16 p,
.auth-modal-fs16 span,
.auth-modal-fs16 a,
.auth-modal-fs16 .alert {
  font-size: 16px !important;
}

.auth-modal-fs16 .form-control::placeholder {
  font-size: 16px !important;
}

/* ==========================================================================
   INPUT GROUP FOCUS & VALIDATION BORDER FIX (SEAMLESS ICON + INPUT BORDER)
   ========================================================================== */
.input-group > .form-control.border-start-0,
.input-group > .form-control {
  padding-left: 10px !important;
}

.input-group {
  border-radius: 0.375rem;
  transition: all 0.2s ease-in-out;
}

.input-group:focus-within {
  border-radius: 0.375rem;
  box-shadow: 0 0 0 0.25rem rgba(255, 122, 0, 0.25) !important;
}

.input-group:focus-within .input-group-text {
  border-color: #FF7A00 !important;
  color: #FF7A00 !important;
  background-color: #FFF8F0 !important;
}

.input-group:focus-within .form-control {
  border-color: #FF7A00 !important;
  box-shadow: none !important;
}

/* Valid (is-valid) border & focus ring */
.input-group:has(.is-valid) .input-group-text {
  border-color: #008800 !important;
  color: #008800 !important;
  background-color: #F8FFF9 !important;
}
.input-group:has(.is-valid) .form-control {
  border-color: #008800 !important;
  box-shadow: none !important;
}
.input-group:has(.is-valid):focus-within {
  box-shadow: 0 0 0 0.25rem rgba(0, 136, 0, 0.25) !important;
}

/* Invalid (is-invalid) border & focus ring */
.input-group:has(.is-invalid) .input-group-text {
  border-color: #ff0000 !important;
  color: #ff0000 !important;
  background-color: #FFF8F8 !important;
}
.input-group:has(.is-invalid) .form-control {
  border-color: #ff0000 !important;
  box-shadow: none !important;
}
.input-group:has(.is-invalid):focus-within {
  box-shadow: 0 0 0 0.25rem rgba(255, 0, 0, 0.25) !important;
}

/* Feedback message text styling (CHÍNH XÁC FONT-SIZE 12PX, KHÔNG BOLD, ĐÚNG MÀU) */
.invalid-feedback-custom,
.auth-modal-fs16 .invalid-feedback-custom {
  font-size: 12px !important;
  font-weight: normal !important;
  line-height: 1.4 !important;
  margin-top: 4px !important;
}

.invalid-feedback-custom.is-invalid-text,
.auth-modal-fs16 .invalid-feedback-custom.is-invalid-text {
  color: #ff0000 !important;
}

.invalid-feedback-custom.is-valid-text,
.auth-modal-fs16 .invalid-feedback-custom.is-valid-text {
  color: #008800 !important;
}

/* Custom styling for login modal options strip (Remember Me & Forgot Link) */
.auth-option-strip {
  font-size: 12px !important;
}

.auth-option-strip .custom-orange-checkbox .form-check-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer;
}

.auth-option-strip .custom-orange-checkbox .form-check-input:checked {
  background-color: #FF7A00 !important;
  border-color: #FF7A00 !important;
}

.auth-option-strip .auth-forgot-link {
  color: #FF7A00 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease;
}

.auth-option-strip .auth-forgot-link:hover {
  color: #E65100 !important;
  text-decoration: underline !important;
}

/* ==========================================================================
   HOMEPAGE & CATEGORY LAYOUT: BOOTSTRAP GRID SYSTEM MATCH
   ========================================================================== */

/* HOMEPAGE CATEGORY CARDS & ENLARGED LOGO ICON STYLING (HOIGAMEVN EXACT MATCH) */
.quick-action-card {
  background: #ffffff;
  border: 1px solid #efe6d8;
  border-radius: 14px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.quick-action-card:hover {
  border-color: #ff7a00;
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(255, 122, 0, 0.16) !important;
}

.home-cat-icon-box {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #FF9500 0%, #E65100 100%);
}

.home-cat-icon-img {
  
  height: 70px !important;
  object-fit: contain !important;
  border-radius: 12px !important;
  padding: 2px;
  background: #ffffff;
}

.home-cat-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #4a0e04 !important;
  transition: color 0.2s ease;
}

.quick-action-card:hover .home-cat-title {
  color: #ff7a00 !important;
}

.home-latest-post-title {
  font-size: 13px;
  color: #6c757d;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: normal !important;
  max-width: 100%;
}

@media (max-width: 575.98px) {
  .home-cat-icon-box,
  .home-cat-icon-img {
    height: 70px !important;
  }
  .home-cat-title {
    font-size: 14px !important;
  }
}

.btn-outline-orange {
  color: #E65100 !important;
  border-color: #FFB74D !important;
  background-color: #FFF8F0 !important;
  transition: all 0.2s ease;
}

.btn-outline-orange:hover {
  color: #ffffff !important;
  background: linear-gradient(135deg, #FF9500 0%, #E65100 100%) !important;
  border-color: #E65100 !important;
  box-shadow: 0 4px 12px rgba(230, 81, 0, 0.2) !important;
}

/* Custom Tag Badges CSS */
.tag-badge-custom {
  background-color: #f6f4f0 !important;
  color: #6c757d !important;
  border: 1px solid #ced4da !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  padding: 3px 8px !important;
}

/* ==========================================================================
   30 DISTINCT LINEAR-GRADIENT CATEGORY TAG BADGE STYLE PRESETS
   ========================================================================== */
.cat-badge-style-1  { background: linear-gradient(135deg, #FF512F 0%, #F09819 100%) !important; color: #ffffff !important; border: none !important; font-weight: 600 !important; font-size: 11px !important; padding: 3.5px 9.5px !important; border-radius: 50rem; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.cat-badge-style-2  { background: linear-gradient(135deg, #1FA2FF 0%, #12D8FA 50%, #A6FFCB 100%) !important; color: #0F172A !important; border: none !important; font-weight: 700 !important; font-size: 11px !important; padding: 3.5px 9.5px !important; border-radius: 50rem; }
.cat-badge-style-3  { background: linear-gradient(135deg, #11998E 0%, #38EF7D 100%) !important; color: #ffffff !important; border: none !important; font-weight: 600 !important; font-size: 11px !important; padding: 3.5px 9.5px !important; border-radius: 50rem; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.cat-badge-style-4  { background: linear-gradient(135deg, #654ea3 0%, #eaafc8 100%) !important; color: #ffffff !important; border: none !important; font-weight: 600 !important; font-size: 11px !important; padding: 3.5px 9.5px !important; border-radius: 50rem; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.cat-badge-style-5  { background: linear-gradient(135deg, #8E2DE2 0%, #4A00E0 100%) !important; color: #ffffff !important; border: none !important; font-weight: 600 !important; font-size: 11px !important; padding: 3.5px 9.5px !important; border-radius: 50rem; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.cat-badge-style-6  { background: linear-gradient(135deg, #FFE000 0%, #799F0C 100%) !important; color: #1E293B !important; border: none !important; font-weight: 700 !important; font-size: 11px !important; padding: 3.5px 9.5px !important; border-radius: 50rem; }
.cat-badge-style-7  { background: linear-gradient(135deg, #FF416C 0%, #FF4B2B 100%) !important; color: #ffffff !important; border: none !important; font-weight: 600 !important; font-size: 11px !important; padding: 3.5px 9.5px !important; border-radius: 50rem; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.cat-badge-style-8  { background: linear-gradient(135deg, #20002c 0%, #cbb4d4 100%) !important; color: #ffffff !important; border: none !important; font-weight: 600 !important; font-size: 11px !important; padding: 3.5px 9.5px !important; border-radius: 50rem; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.cat-badge-style-9  { background: linear-gradient(135deg, #00b09b 0%, #96c93d 100%) !important; color: #ffffff !important; border: none !important; font-weight: 600 !important; font-size: 11px !important; padding: 3.5px 9.5px !important; border-radius: 50rem; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.cat-badge-style-10 { background: linear-gradient(135deg, #ff758c 0%, #ff7eb3 100%) !important; color: #ffffff !important; border: none !important; font-weight: 600 !important; font-size: 11px !important; padding: 3.5px 9.5px !important; border-radius: 50rem; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.cat-badge-style-11 { background: linear-gradient(135deg, #141E30 0%, #243B55 100%) !important; color: #ffffff !important; border: 1px solid #3b82f6 !important; font-weight: 600 !important; font-size: 11px !important; padding: 3.5px 9.5px !important; border-radius: 50rem; }
.cat-badge-style-12 { background: linear-gradient(135deg, #F2994A 0%, #F2C94C 100%) !important; color: #4A0E04 !important; border: none !important; font-weight: 700 !important; font-size: 11px !important; padding: 3.5px 9.5px !important; border-radius: 50rem; }
.cat-badge-style-13 { background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%) !important; color: #ffffff !important; border: none !important; font-weight: 600 !important; font-size: 11px !important; padding: 3.5px 9.5px !important; border-radius: 50rem; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.cat-badge-style-14 { background: linear-gradient(135deg, #D4FC79 0%, #96E6A1 100%) !important; color: #1B4332 !important; border: none !important; font-weight: 700 !important; font-size: 11px !important; padding: 3.5px 9.5px !important; border-radius: 50rem; }
.cat-badge-style-15 { background: linear-gradient(135deg, #870003 0%, #C471ED 100%) !important; color: #ffffff !important; border: none !important; font-weight: 600 !important; font-size: 11px !important; padding: 3.5px 9.5px !important; border-radius: 50rem; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.cat-badge-style-16 { background: linear-gradient(135deg, #FFD194 0%, #D1973C 100%) !important; color: #4A0E04 !important; border: none !important; font-weight: 700 !important; font-size: 11px !important; padding: 3.5px 9.5px !important; border-radius: 50rem; }
.cat-badge-style-17 { background: linear-gradient(135deg, #f857a6 0%, #ff5858 100%) !important; color: #ffffff !important; border: none !important; font-weight: 600 !important; font-size: 11px !important; padding: 3.5px 9.5px !important; border-radius: 50rem; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.cat-badge-style-18 { background: linear-gradient(135deg, #DA22FF 0%, #9733EE 100%) !important; color: #ffffff !important; border: none !important; font-weight: 600 !important; font-size: 11px !important; padding: 3.5px 9.5px !important; border-radius: 50rem; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.cat-badge-style-19 { background: linear-gradient(135deg, #f12711 0%, #f5af19 100%) !important; color: #ffffff !important; border: none !important; font-weight: 600 !important; font-size: 11px !important; padding: 3.5px 9.5px !important; border-radius: 50rem; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.cat-badge-style-20 { background: linear-gradient(135deg, #43cea2 0%, #185a9d 100%) !important; color: #ffffff !important; border: none !important; font-weight: 600 !important; font-size: 11px !important; padding: 3.5px 9.5px !important; border-radius: 50rem; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.cat-badge-style-21 { background: linear-gradient(135deg, #FF8008 0%, #FFC837 100%) !important; color: #ffffff !important; border: none !important; font-weight: 600 !important; font-size: 11px !important; padding: 3.5px 9.5px !important; border-radius: 50rem; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.cat-badge-style-22 { background: linear-gradient(135deg, #232526 0%, #414345 100%) !important; color: #ffffff !important; border: 1px solid #6c757d !important; font-weight: 600 !important; font-size: 11px !important; padding: 3.5px 9.5px !important; border-radius: 50rem; }
.cat-badge-style-23 { background: linear-gradient(135deg, #FF007F 0%, #7B2CBF 100%) !important; color: #ffffff !important; border: none !important; font-weight: 600 !important; font-size: 11px !important; padding: 3.5px 9.5px !important; border-radius: 50rem; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.cat-badge-style-24 { background: linear-gradient(135deg, #E0C3FC 0%, #8EC5FC 100%) !important; color: #0F172A !important; border: none !important; font-weight: 700 !important; font-size: 11px !important; padding: 3.5px 9.5px !important; border-radius: 50rem; }
.cat-badge-style-25 { background: linear-gradient(135deg, #ffe259 0%, #ffa751 100%) !important; color: #4A0E04 !important; border: none !important; font-weight: 700 !important; font-size: 11px !important; padding: 3.5px 9.5px !important; border-radius: 50rem; }
.cat-badge-style-26 { background: linear-gradient(135deg, #021B79 0%, #0575E6 100%) !important; color: #ffffff !important; border: none !important; font-weight: 600 !important; font-size: 11px !important; padding: 3.5px 9.5px !important; border-radius: 50rem; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.cat-badge-style-27 { background: linear-gradient(135deg, #F4C4F3 0%, #FC67FA 100%) !important; color: #5B21B6 !important; border: none !important; font-weight: 700 !important; font-size: 11px !important; padding: 3.5px 9.5px !important; border-radius: 50rem; }
.cat-badge-style-28 { background: linear-gradient(135deg, #61045F 0%, #AA076B 100%) !important; color: #ffffff !important; border: none !important; font-weight: 600 !important; font-size: 11px !important; padding: 3.5px 9.5px !important; border-radius: 50rem; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.cat-badge-style-29 { background: linear-gradient(135deg, #FFB300 0%, #F57C00 100%) !important; color: #ffffff !important; border: none !important; font-weight: 600 !important; font-size: 11px !important; padding: 3.5px 9.5px !important; border-radius: 50rem; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.cat-badge-style-30 { background: linear-gradient(135deg, #059669 0%, #10B981 50%, #34D399 100%) !important; color: #ffffff !important; border: none !important; font-weight: 600 !important; font-size: 11px !important; padding: 3.5px 9.5px !important; border-radius: 50rem; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }

/* ==========================================================================
   HOIGAMEVN EXACT BANNERS MATCH: OUTSIDE CONTAINER STATIC BANNERS
   ========================================================================== */
.banner-center-top-wrapper img {
  width: 1200px !important;
  max-width: 100% !important;
  object-fit: cover !important;
}

/* Static Outer Banners (Positioned 100% Outside Container, Non-Fixed) */
.banner-outer-left {
  position: absolute !important;
  top: 0 !important;
  right: 100% !important;
  margin-right: 15px !important;
  width: 300px !important;
  z-index: 10 !important;
}

.banner-outer-right {
  position: absolute !important;
  top: 0 !important;
  left: 100% !important;
  margin-left: 15px !important;
  width: 300px !important;
  z-index: 10 !important;
}

/* Responsive: Hide outer banners when viewport width is not enough to fit 300px margins */
@media (max-width: 1779.98px) {
  .banner-outer-left,
  .banner-outer-right {
    display: none !important;
  }
}

/* ==========================================================================
   HOIGAMEVN BREADCRUMB COMPONENT MATCH & STYLING
   ========================================================================== */
.breadcrumb {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 9px 18px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  font-size: 13.5px !important;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "\f105" !important;
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  color: #94a3b8 !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}

.breadcrumb-item a {
  color: #475569 !important;
  font-weight: 600 !important;
  transition: color 0.2s ease-in-out;
}

.breadcrumb-item a:hover {
  color: #d97706 !important;
}

.breadcrumb-item.active {
  color: #1e293b !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   HOIGAMEVN CATEGORY ACTION BAR STYLING
   ========================================================================== */
.btn-orange {
  background: linear-gradient(135deg, #FF6B00 0%, #FF8800 100%) !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 10px rgba(255, 107, 0, 0.25) !important;
  transition: all 0.2s ease-in-out !important;
}

.btn-orange:hover {
  background: linear-gradient(135deg, #E66000 0%, #E67A00 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 14px rgba(255, 107, 0, 0.35) !important;
}



/* ==========================================================================
   HOIGAMEVN VIP POST ROW STYLING MATCH (.vip-post-row)
   ========================================================================== */
.vip-post-row {
  background: linear-gradient(90deg, #FFF6E5 0%, #FFFDF9 45%, #FFF2DB 100%) !important;
  border-bottom: 1px solid #FFE4B8 !important;
  position: relative !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.vip-post-row:hover {
  background: linear-gradient(90deg, #FFEED1 0%, #FFF7E6 45%, #FFE9C2 100%) !important;
}

/* ==========================================================================
   HOIGAMEVN CARDS & POST ROWS MATCH
   ========================================================================== */
.card-super-vip {
  background-color: var(--gh-bg-card, #ffffff) !important;
  border: 1px solid var(--gh-border-color, #fde68a) !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 10px rgba(74, 14, 4, 0.04) !important;
}

.card-header-vip {
  background: linear-gradient(135deg, #FF6B00 0%, #FF8800 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 15px !important;
}

.card-normal-posts {
  border-radius: 12px !important;
  border: 1px solid #E2E8F0 !important;
}

.card-header-normal {
  background: linear-gradient(135deg, #4A7C9D 0%, #5B8CAE 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 15px !important;
}

.normal-post-row {
  background-color: #ffffff !important;
  border-bottom: 1px solid #f1f5f9 !important;
  transition: background-color 0.2s ease-in-out !important;
}

.normal-post-row:hover {
  background-color: #f8fafc !important;
}

/* ==========================================
   BADGE VIP SẮC NÉT: VỆT SÁNG QUÉT LIÊN TỤC (SHINE SWEEP 100% VISIBLE)
   ========================================== */
@keyframes vipShineSweep {
    0% {
        left: -100%;
    }
    100% {
        left: 150%;
    }
}

.badge-vip,
.badge-vip-blink,
.gh-vip-badge {
    position: relative !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #FF3D00 0%, #D50000 100%) !important;
    color: #FFFFFF !important;
    font-weight: 900 !important;
    letter-spacing: 1px !important;
    padding: 3px 14px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1.5px solid rgba(255, 255, 255, 0.95) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    text-transform: uppercase !important;
    user-select: none !important;
    transform: none !important;
    background-clip: padding-box !important;
    isolation: isolate !important;
    z-index: 1 !important;
}

.badge-vip::after,
.badge-vip-blink::after,
.gh-vip-badge::after {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    bottom: -50% !important;
    left: -100% !important;
    width: 50% !important;
    height: 200% !important;
    background: linear-gradient(
        90deg, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.95) 50%, 
        rgba(255, 255, 255, 0) 100%
    ) !important;
    transform: skewX(-20deg) !important;
    animation: vipShineSweep 1.8s infinite linear !important;
    pointer-events: none !important;
    z-index: 5 !important;
}

/* ==========================================
   PHÂN TRANG PHONG CÁCH DIỄN ĐÀN (FORUM PAGINATION - HOIGAMEVN EXACT MATCH)
   ========================================== */
.pagination-forum {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.pagination-forum .page-item {
    margin: 0;
}

.pagination-forum .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 34px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 600;
    color: #4A4A4A !important;
    background-color: #FFFFFF !important;
    border: 1px solid #DFE3E8 !important;
    border-radius: 4px !important;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: all 0.15s ease-in-out;
}

/* Hover Nút Phân Trang */
.pagination-forum .page-link:hover {
    color: #D84300 !important;
    background-color: #FFF8F0 !important;
    border-color: #FF9800 !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(216, 67, 0, 0.15);
}

/* Trang Hiện Tại (Active) - Kiểu XenForo/GameVN/Voz Nổi Bật */
.pagination-forum .page-item.active .page-link {
    color: #FFFFFF !important;
    background: linear-gradient(135deg, #FF7A00 0%, #D84300 100%) !important;
    border-color: #D84300 !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 6px rgba(216, 67, 0, 0.35) !important;
    transform: none;
}

/* Vô Hiệu Hóa (Disabled) */
.pagination-forum .page-item.disabled .page-link {
    color: #C4CDD5 !important;
    background-color: #F4F6F8 !important;
    border-color: #E4E7EB !important;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
    opacity: 0.7;
}

/* Biểu tượng mũi tên trong nút */
.pagination-forum .page-link i {
    font-size: 11px;
}

/* Container chứa thông tin trang phong cách Forum */
.pagination-forum-container {
    background-color: #FAF9F6 !important;
    border-top: 1px solid #EFEBE4 !important;
    padding: 12px 18px !important;
}

.pagination-forum-info {
    font-size: 13px;
    color: #637381;
    font-weight: 500;
}

.pagination-forum-info b {
    color: #212B36;
}

/* Fallback cho tất cả thẻ .pagination chuẩn Bootstrap trên toàn website */
.pagination:not(.pagination-forum) {
    gap: 4px;
}
.pagination:not(.pagination-forum) .page-link {
    border-radius: 4px !important;
    color: #4A4A4A;
    border-color: #DFE3E8;
    font-weight: 600;
}
.pagination:not(.pagination-forum) .page-item.active .page-link {
    background: linear-gradient(135deg, #FF7A00 0%, #D84300 100%) !important;
    border-color: #D84300 !important;
    color: #FFFFFF !important;
}
.pagination:not(.pagination-forum) .page-link:hover {
    color: #D84300;
    background-color: #FFF8F0;
    border-color: #FF9800;
}

@media (max-width: 991.98px) {
    .pagination-forum .page-link {
        min-width: 32px;
        height: 32px;
        font-size: 13px;
    }
}

/* Smooth Scroll & Anchor Jump for Pagination */
html {
    scroll-behavior: smooth;
}

#danh-sach-bai-viet {
    scroll-margin-top: 70px;
}

/* Post Item Title Styling */
.post-title-link {
    color: #1678da !important;
    transition: color 0.2s ease-in-out !important;
}

.post-title-link:hover {
    color: #000000 !important;
}

/* Responsive Lightbox Gallery & External Link Departure Modal Styling (PC & Mobile) */
#imageLightboxModal .modal-dialog {
    max-width: 900px;
    margin: 1.75rem auto;
}

@media (max-width: 575.98px) {
    #imageLightboxModal .modal-dialog {
        margin: 0.5rem;
    }
    #imageLightboxModal .modal-body {
        min-height: 240px !important;
        padding: 0.25rem !important;
    }
    #lightboxPrevBtn, #lightboxNextBtn {
        width: 38px !important;
        height: 38px !important;
        background-color: rgba(0, 0, 0, 0.8) !important;
    }
    #lightboxImage {
        max-height: 72vh !important;
    }
    #externalLinkModal .modal-footer {
        flex-direction: column-reverse;
        gap: 0.5rem;
    }
    #externalLinkModal .modal-footer .btn {
        width: 100%;
        margin: 0 !important;
    }
}

/* ==========================================================================
   FOOTER STYLING (HOIGAMEVN EXACT MATCH)
   ========================================================================== */
footer.footer-gh {
    background-color: #483B34 !important;
    border-top: 3px solid #FF7A00 !important;
    color: #F0E6DD !important;
}
footer.footer-gh h5, 
footer.footer-gh h6,
footer.footer-gh .text-maroon {
    color: #FFB042 !important;
}
footer.footer-gh p,
footer.footer-gh .text-muted {
    color: #E2D7CC !important;
}
footer.footer-gh a {
    color: #FFF5EC !important;
    transition: color 0.2s ease;
}
footer.footer-gh a:hover {
    color: #FFB042 !important;
}
footer.footer-gh strong.text-maroon {
    color: #FFFFFF !important;
}
footer.footer-gh .border-top {
    border-color: rgba(255, 255, 255, 0.18) !important;
}

/* ==========================================================================
   USER DROPDOWN & SIDEBAR MENU HOVER & ACTIVE STYLING
   ========================================================================== */
.dropdown-menu .dropdown-item,
.user-menu-list-group .list-group-item {
    transition: all 0.2s ease-in-out !important;
    border-left: 3px solid transparent !important;
}

.dropdown-menu .dropdown-item:hover,
.user-menu-list-group .list-group-item:hover {
    background: linear-gradient(90deg, #FFF8F0 0%, #FFF3E0 100%) !important;
    color: #E65100 !important;
    border-left: 3px solid #FF7A00 !important;
}

.dropdown-menu .dropdown-item:hover i,
.user-menu-list-group .list-group-item:hover i {
    transform: translateX(2px);
    transition: transform 0.2s ease;
}

.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active,
.user-menu-list-group .list-group-item.active,
.user-menu-list-group .list-group-item:active {
    background: linear-gradient(135deg, #FF9500 0%, #E65100 100%) !important;
    color: #FFFFFF !important;
    border-left: 3px solid #D84300 !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 6px rgba(230, 81, 0, 0.2) !important;
}

.dropdown-menu .dropdown-item.active i,
.dropdown-menu .dropdown-item:active i,
.user-menu-list-group .list-group-item.active i,
.user-menu-list-group .list-group-item:active i {
    color: #FFFFFF !important;
}

/* ==========================================================================
   PROFILE HEADER INFO CARD LUXURY STYLING
   ========================================================================== */
.profile-header-info-card {
    background: linear-gradient(135deg, #FFFDF9 0%, #FFF3E0 50%, #FFE9CC 100%) !important;
    border-bottom: 2px solid #FFE0B2 !important;
    position: relative;
}

.profile-header-info-card h5 {
    color: #4A0E04 !important;
    letter-spacing: -0.2px;
}

.profile-balance-box {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid #FFD8A8 !important;
    box-shadow: 0 4px 12px rgba(230, 81, 0, 0.08) !important;
    border-radius: 10px !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.profile-balance-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(230, 81, 0, 0.12) !important;
}

/* ==========================================================================
   MOBILE HTML5 DATE INPUT OPTIMIZATION & TEXT VISIBILITY FIX
   ========================================================================== */
input[type="date"].form-control,
input[type="date"].form-control-sm,
input[type="date"] {
    min-height: 31px;
    font-size: 12px !important;
    padding-left: 6px !important;
    padding-right: 4px !important;
    color: #212529 !important;
    background-color: #ffffff !important;
    -webkit-text-fill-color: #212529 !important;
}

/* Force iOS Safari / Chrome Mobile shadow DOM inner date text fields to dark color */
input[type="date"]::-webkit-date-and-time-value,
input[type="date"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field {
    color: #212529 !important;
    -webkit-text-fill-color: #212529 !important;
    opacity: 1 !important;
    text-align: left !important;
    margin: 0 !important;
    min-height: 1.2em !important;
    line-height: normal !important;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    padding: 0;
    margin: 0;
    cursor: pointer;
    opacity: 0.75;
    filter: invert(0.3);
}

/* ==========================================================================
   PILL SOCIAL SHARE BUTTONS (3.JPG MATCH)
   ========================================================================== */
.btn-pill-share {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 16px !important;
    border-radius: 50px !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    letter-spacing: 0.2px !important;
}
.btn-pill-share:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.2) !important;
    color: #ffffff !important;
    opacity: 0.95 !important;
}
.btn-pill-facebook {
    background: linear-gradient(135deg, #1877F2 0%, #0D62D1 100%) !important;
}
.btn-pill-zalo {
    background: linear-gradient(135deg, #0068FF 0%, #004FCD 100%) !important;
}
.btn-pill-telegram {
    background: linear-gradient(135deg, #0088CC 0%, #006699 100%) !important;
}
.btn-pill-copy {
    background: linear-gradient(135deg, #FF6B00 0%, #E65100 100%) !important;
}

/* RESPONSIVE MOBILE: ICON-ONLY CIRCULAR BUTTONS */
@media (max-width: 575.98px) {
    .btn-pill-share {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        padding: 0 !important;
        border-radius: 50% !important;
    }
    .btn-pill-share span {
        display: none !important;
    }
    .btn-pill-share i,
    .btn-pill-share img {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
}

/* ==========================================================================
   POPUP EVENT HTML MODAL (4.JPG MATCH)
   ========================================================================== */
.popup-html-modal-content {
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35) !important;
    border: none !important;
}
.popup-html-header {
    background: linear-gradient(135deg, #FF7B00 0%, #FF5500 100%) !important;
    padding: 15px 22px !important;
    border-bottom: none !important;
}
.popup-html-header .modal-title {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
}
.popup-html-body {
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: #334155 !important;
}
.popup-html-body img {
    max-width: 100% !important;
    max-height: 460px !important;
    object-fit: contain !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12) !important;
    margin: 8px auto !important;
    display: block !important;
}
.btn-popup-gotit {
    background: linear-gradient(135deg, #FF7700 0%, #EE5500 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 50px !important;
    padding: 6px 22px !important;
    font-size: 13.5px !important;
    border: none !important;
    box-shadow: 0 3px 10px rgba(255, 119, 0, 0.3) !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.btn-popup-gotit i {
    margin-right: 8px !important;
}
.btn-popup-gotit:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 5px 16px rgba(255, 119, 0, 0.45) !important;
    color: #ffffff !important;
}

@media (max-width: 575.98px) {
    .popup-html-header {
        padding: 12px 18px !important;
    }
    .popup-html-header .modal-title {
        font-size: 14px !important;
    }
    .popup-html-body {
        padding: 12px 14px !important;
        font-size: 13px !important;
    }
    .btn-popup-gotit {
        padding: 6px 18px !important;
        font-size: 12.5px !important;
    }
}

/* ==========================================================================
   AD CONTACT BOX BUTTONS (HOIGAMEVN MATCH)
   ========================================================================== */
.btn-ad-zalo {
    background: linear-gradient(135deg, #0068FF 0%, #0052CC 100%) !important;
    color: #ffffff !important;
    border: none !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
.btn-ad-zalo:hover,
.btn-ad-zalo:focus {
    background: linear-gradient(135deg, #007BFF 0%, #0062E6 100%) !important;
    box-shadow: 0 4px 14px rgba(0, 104, 255, 0.45) !important;
    filter: brightness(1.1);
    color: #ffffff !important;
}

.btn-ad-fanpage {
    background: linear-gradient(135deg, #1877F2 0%, #0D5CB6 100%) !important;
    color: #ffffff !important;
    border: none !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
.btn-ad-fanpage:hover,
.btn-ad-fanpage:focus {
    background: linear-gradient(135deg, #2B87FF 0%, #156AD6 100%) !important;
    box-shadow: 0 4px 14px rgba(24, 119, 242, 0.45) !important;
    filter: brightness(1.1);
    color: #ffffff !important;
}

.btn-ad-messenger {
    background: linear-gradient(135deg, #0084FF 0%, #00C6FF 100%) !important;
    color: #ffffff !important;
    border: none !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
.btn-ad-messenger:hover,
.btn-ad-messenger:focus {
    background: linear-gradient(135deg, #0099FF 0%, #1AD1FF 100%) !important;
    box-shadow: 0 4px 14px rgba(0, 132, 255, 0.45) !important;
    filter: brightness(1.1);
    color: #ffffff !important;
}

/* ==========================================================================
   NEWS INDEX PAGE STYLING (ELEGANT REDESIGN)
   ========================================================================== */
.news-hero-card {
    border-radius: 14px !important;
    overflow: hidden !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.news-hero-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12) !important;
}
.news-hero-thumb {
    position: relative;
    overflow: hidden;
    height: 260px;
    background-color: #1e293b;
}
.news-hero-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.news-hero-card:hover .news-hero-thumb img {
    transform: scale(1.05);
}
.news-hero-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.4) 70%, transparent 100%);
    color: #ffffff;
}

.news-item-card {
    padding: 18px 20px;
    border-bottom: 1px solid #f1f5f9;
    transition: background-color 0.2s ease;
}
.news-item-card:last-child {
    border-bottom: none;
}
.news-item-card:hover {
    background-color: #f8fafc;
}
.news-item-thumb {
    width: 150px;
    height: 100px;
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
    background-color: #f1f5f9;
    border: 1px solid #e2e8f0;
    position: relative;
}
.news-item-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.3s ease;
}
.news-item-card:hover .news-item-thumb img {
    transform: scale(1.06);
}
.news-item-title {
    font-size: 15.5px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.4;
    transition: color 0.2s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-item-card:hover .news-item-title {
    color: #ff6b00;
}
.news-item-summary {
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 575.98px) {
    .news-item-card {
        flex-direction: column !important;
        padding: 14px 16px;
    }
    .news-item-thumb {
        width: 100% !important;
        height: 180px !important;
        margin-right: 0 !important;
        margin-bottom: 12px !important;
    }
    .news-hero-thumb {
        height: 200px !important;
    }
}

/* ==========================================================================
   MEGA MENU GAME DROPDOWN STYLING (PREMIUM REDESIGN)
   ========================================================================== */
.position-static {
    position: static !important;
}
.mega-menu-dropdown {
    width: 92vw !important;
    max-width: 1000px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25) !important;
    border: 1px solid #e2e8f0 !important;
}
.mega-game-item {
    padding: 3px !important;
}
.mega-game-link {
    display: flex !important;
    align-items: center !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    height: 100% !important;
    text-decoration: none !important;
}
.mega-game-logo-wrap,
.mega-game-icon-box {
    width: 42px !important;
    height: 42px !important;
    flex-shrink: 0 !important;
    margin-right: 12px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.25s ease !important;
}
.mega-game-logo-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
.mega-game-icon-box {
    background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%) !important;
    color: #ff6b00 !important;
    font-size: 16px !important;
}
.mega-game-name {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.25 !important;
    transition: color 0.2s ease !important;
}
.mega-game-desc {
    font-size: 11.5px !important;
    color: #64748b !important;
    margin-top: 3px !important;
}

/* HOVER LUXURY PREMIUM EFFECT */
.mega-game-link:hover {
    background: linear-gradient(135deg, #FFFBF5 0%, #FFFFFF 100%) !important;
    border-color: #ff9800 !important;
    transform: translateY(-3px) scale(1.01) !important;
    box-shadow: 0 8px 22px rgba(255, 119, 0, 0.18) !important;
}
.mega-game-link:hover .mega-game-name {
    color: #ff6b00 !important;
}
.mega-game-link:hover .mega-game-logo-wrap,
.mega-game-link:hover .mega-game-icon-box {
    transform: scale(1.08) !important;
}

/* ==========================================================================
   CENTER TOP BANNER RESPONSIVE STYLING (PC 1200x110, MOBILE FULL WIDTH IMG AUTO HEIGHT)
   ========================================================================== */
.gh-banner-container {
  display: block;
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.gh-banner-img {
  width: 100% !important;
  max-width: 100% !important;
  height: 110px;
  object-fit: cover;
  display: block;
}

@media (max-width: 767.98px) {
  .gh-banner-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 8px !important;
  }
  .gh-banner-img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: unset !important;
    max-height: none !important;
    object-fit: cover !important;
  }
}

/* =========================================================
   PROJECT INTEGRATED MOTION BORDER AVATAR SYSTEM (MATCH LEVEL.HTML)
   ========================================================= */

@property --border-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes spinBorder {
    0% { --border-angle: 0deg; }
    100% { --border-angle: 360deg; }
}

@keyframes spinRing {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes spinRingReverse {
    from { transform: translate(-50%, -50%) rotate(360deg); }
    to { transform: translate(-50%, -50%) rotate(0deg); }
}

@keyframes pulseGlowAdmin {
    0%, 100% {
        box-shadow: 0 10px 35px rgba(217, 4, 41, 0.50), 0 0 25px rgba(255, 0, 85, 0.35);
    }
    50% {
        box-shadow: 0 12px 55px rgba(255, 0, 85, 0.85), 0 0 45px rgba(255, 215, 0, 0.70);
    }
}

@keyframes pulseGlowSubadmin {
    0%, 100% {
        box-shadow: 0 10px 35px rgba(157, 78, 221, 0.50), 0 0 25px rgba(199, 125, 255, 0.35);
    }
    50% {
        box-shadow: 0 12px 50px rgba(199, 125, 255, 0.80), 0 0 40px rgba(247, 37, 133, 0.65);
    }
}

@keyframes pulseGlowDiamond {
    0%, 100% { box-shadow: 0 8px 35px rgba(70, 95, 220, 0.40), 0 0 30px rgba(70, 190, 255, 0.25); }
    50% { box-shadow: 0 12px 45px rgba(70, 95, 220, 0.70), 0 0 45px rgba(88, 232, 255, 0.60); }
}

@keyframes pulseGlowCtv5 {
    0%, 100% { box-shadow: 0 8px 28px rgba(80, 80, 180, 0.35), 0 0 20px rgba(154, 147, 233, 0.20); }
    50% { box-shadow: 0 10px 38px rgba(80, 80, 180, 0.60), 0 0 32px rgba(154, 147, 233, 0.50); }
}

.avatar-zone-wrap {
    display: inline-block;
    vertical-align: middle;
    width: calc(180px * var(--avatar-scale, 0.4));
    height: calc(180px * var(--avatar-scale, 0.4));
    position: relative;
}

.avatar-zone-wrap .avatar-zone {
    position: relative;
    width: 180px;
    height: 180px;
    transform: scale(var(--avatar-scale, 0.4));
    transform-origin: 0 0;
    pointer-events: auto;
}

.avatar-zone-wrap .avatar {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 118px;
    height: 118px;
    padding: 5px; 
    border-radius: 50%;
    z-index: 10;
}

.avatar-zone-wrap .avatar img,
.avatar-zone-wrap .avatar .avatar-initials-box {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 5px solid transparent;
    background: 
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, #ddd, #eee) border-box;
    box-shadow: 0 4px 18px rgba(0,0,0,.12);
}

.avatar-zone-wrap .ring {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    width: 140px; 
    height: 140px;
}

/* 1. ADMIN (SUPREME CRIMSON BLOOD & RUBY FIRE 3D - BẢN QUẢN TRỊ TỐI CAO) */
.avatar-zone-wrap.admin .avatar {
    background: conic-gradient(from var(--border-angle, 0deg), #4a000b, #d90429, #ff0055, #ffd700, #ffffff, #ff0055, #d90429, #4a000b);
    animation: spinBorder 2.2s linear infinite, pulseGlowAdmin 2s ease-in-out infinite;
}
.avatar-zone-wrap.admin .avatar img,
.avatar-zone-wrap.admin .avatar .avatar-initials-box {
    background: 
        linear-gradient(#fff, #fff) padding-box,
        conic-gradient(from var(--border-angle, 0deg), #ff0055, #ffd700, #ffffff, #ff0055) border-box;
}
.avatar-zone-wrap.admin .ring { 
    border: 3px dashed #ff0055; 
    box-shadow: inset 0 0 0 2px #fff, 0 0 25px rgba(255, 0, 85, 0.80), 0 0 10px rgba(255, 215, 0, 0.50); 
    animation: spinRing 4.5s linear infinite;
}

/* 2. SUBADMIN (IMPERIAL SHADOW CYBER VIOLET 3D - PHÓ QUẢN TRỊ TỐI CAO) */
.avatar-zone-wrap.subadmin .avatar {
    background: conic-gradient(from var(--border-angle, 0deg), #1d0047, #5c0099, #9d4edd, #f72585, #ffffff, #9d4edd, #5c0099, #1d0047);
    animation: spinBorder 2.8s linear infinite, pulseGlowSubadmin 2.2s ease-in-out infinite;
}
.avatar-zone-wrap.subadmin .avatar img,
.avatar-zone-wrap.subadmin .avatar .avatar-initials-box {
    background: 
        linear-gradient(#fff, #fff) padding-box,
        conic-gradient(from var(--border-angle, 0deg), #9d4edd, #f72585, #ffffff, #9d4edd) border-box;
}
.avatar-zone-wrap.subadmin .ring { 
    border: 3px dashed #c77dff; 
    box-shadow: inset 0 0 0 2px #fff, 0 0 22px rgba(199, 125, 255, 0.75), 0 0 10px rgba(247, 37, 133, 0.45); 
    animation: spinRingReverse 5.5s linear infinite;
}

/* 3. MEMBER (BẠC SLATE TITAN TINH KHÔI - SANG TRỌNG CÂN ĐỐI) */
.avatar-zone-wrap.member .avatar {
    background: conic-gradient(#3a404d, #8f99a8, #e2e8f0, #ffffff, #8f99a8, #3a404d);
    box-shadow: 0 6px 20px rgba(58, 64, 77, 0.22);
}
.avatar-zone-wrap.member .ring { 
    border: 2px solid #94a3b8; 
    box-shadow: inset 0 0 0 1px #ffffff, 0 0 8px rgba(148, 163, 184, 0.25);
}

/* 4. AGENTS 1-5 (REDESIGNED MODERN PRESTIGE SYSTEM) */
/* CẤP 1 - EMERALD MINT (BẠC NGỌC BÍCH - CÓ CHUYỂN ĐỘNG VÒNG DẠO) */
.avatar-zone-wrap.agent-copper .avatar {
    background: conic-gradient(from var(--border-angle, 0deg), #0d5c46, #25a17e, #a8edd8, #ffffff, #25a17e, #0d5c46);
    animation: spinBorder 7s linear infinite;
    box-shadow: 0 6px 22px rgba(37, 161, 126, 0.25);
}
.avatar-zone-wrap.agent-copper .ring { 
    border: 2px dashed #25a17e; 
    box-shadow: inset 0 0 0 1px #ffffff, 0 0 12px rgba(37, 161, 126, 0.35); 
    animation: spinRing 12s linear infinite;
}

/* CẤP 2 - IMPERIAL AMBER GOLD (HOÀNG GIA VÀNG KIM - TƯƠNG ỨNG CẤP 2 CÓ CHUYỂN ĐỘNG) */
.avatar-zone-wrap.agent-silver .avatar {
    background: conic-gradient(from var(--border-angle, 0deg), #5c4300, #d4af37, #ffecb3, #ffffff, #ffd54f, #b37d00, #5c4300);
    animation: spinBorder 5.5s linear infinite;
    box-shadow: 0 7px 24px rgba(212, 175, 55, 0.35);
}
.avatar-zone-wrap.agent-silver .ring { 
    border: 2px dashed #ffc107; 
    box-shadow: inset 0 0 0 1px #ffffff, 0 0 12px rgba(255, 193, 7, 0.35); 
    animation: spinRing 12s linear infinite;
}

/* CẤP 3 - AMBER CRIMSON (HỔ PHÁCH HUYẾT CAM - CHUYỂN TỪ CẤP 2 SANG CẤP 3 CÓ CHUYỂN ĐỘNG) */
.avatar-zone-wrap.agent-gold .avatar {
    background: conic-gradient(from var(--border-angle, 0deg), #8a1c00, #e65100, #ffb74d, #ffffff, #f57c00, #8a1c00);
    animation: spinBorder 4.5s linear infinite;
    box-shadow: 0 8px 28px rgba(230, 81, 0, 0.35);
}
.avatar-zone-wrap.agent-gold .ring { 
    border: 2px dashed #ff9800; 
    box-shadow: inset 0 0 0 1px #ffffff, 0 0 14px rgba(255, 152, 0, 0.40); 
    animation: spinRingReverse 10s linear infinite;
}

/* CẤP 4 - NEON VIOLET PRESTIGE (TÍM VIOLET HOÀNG GIA - CHUYỂN TỪ CẤP 3 SANG CẤP 4 CÓ CHUYỂN ĐỘNG) */
.avatar-zone-wrap.agent-platinum .avatar {
    background: conic-gradient(from var(--border-angle, 0deg), #3a0ca3, #7209b7, #f72585, #ffffff, #7209b7, #3a0ca3);
    animation: spinBorder 3.5s linear infinite;
    box-shadow: 0 8px 32px rgba(114, 9, 183, 0.45);
}
.avatar-zone-wrap.agent-platinum .ring { 
    border: 3px dashed #b5179e; 
    box-shadow: 0 0 18px rgba(181, 23, 158, 0.50), inset 0 0 8px rgba(247, 37, 133, 0.35); 
    animation: spinRing 8s linear infinite; 
}

/* CẤP 5 - KIM CƯƠNG VŨ TRỤ 3D */
.avatar-zone-wrap.agent-diamond .avatar {
    background: conic-gradient(from var(--border-angle, 0deg), #3449c9, #58e8ff, #ffffff, #8e70ef, #54dfff, #e2d8ff, #4256d8, #3449c9);
    animation: spinBorder 2.5s linear infinite, pulseGlowDiamond 2.5s ease-in-out infinite;
}
.avatar-zone-wrap.agent-diamond .ring { 
    border: 3px dashed #54dfff; 
    box-shadow: 0 0 20px rgba(84,223,255,0.50); 
    animation: spinRing 6s linear infinite;
}

/* 5. CTV 1-5 (MATCH AGENT COLORS, STATIC & NO ANIMATIONS) */
.avatar-zone-wrap.ctv .avatar,
.avatar-zone-wrap.ctv .avatar img,
.avatar-zone-wrap.ctv .avatar .avatar-initials-box,
.avatar-zone-wrap.ctv .ring { 
    border-radius: 50%; 
}

/* CTV 1 - EMERALD MINT (TĨNH - TƯƠNG ỨNG ĐẠI LÝ 1) */
.avatar-zone-wrap.ctv-1 .avatar { 
    background: conic-gradient(#0d5c46, #25a17e, #a8edd8, #ffffff, #25a17e, #0d5c46);
    box-shadow: 0 6px 22px rgba(37, 161, 126, 0.25);
}
.avatar-zone-wrap.ctv-1 .ring { 
    border: 2px solid #25a17e; 
    box-shadow: inset 0 0 0 1px #ffffff, 0 0 10px rgba(37, 161, 126, 0.20);
}

/* CTV 2 - IMPERIAL AMBER GOLD (TĨNH - TƯƠNG ỨNG ĐẠI LÝ 2) */
.avatar-zone-wrap.ctv-2 .avatar { 
    background: conic-gradient(#5c4300, #d4af37, #ffecb3, #ffffff, #ffd54f, #b37d00, #5c4300);
    box-shadow: 0 7px 24px rgba(212, 175, 55, 0.35);
}
.avatar-zone-wrap.ctv-2 .ring { 
    border: 2px solid #ffc107; 
    box-shadow: inset 0 0 0 1px #ffffff, 0 0 12px rgba(255, 193, 7, 0.25);
}

/* CTV 3 - AMBER CRIMSON (TĨNH - TƯƠNG ỨNG ĐẠI LÝ 3) */
.avatar-zone-wrap.ctv-3 .avatar { 
    background: conic-gradient(#8a1c00, #e65100, #ffb74d, #ffffff, #f57c00, #8a1c00);
    box-shadow: 0 8px 28px rgba(230, 81, 0, 0.35);
}
.avatar-zone-wrap.ctv-3 .ring { 
    border: 2px solid #ff9800; 
    box-shadow: inset 0 0 0 1px #ffffff, 0 0 14px rgba(255, 152, 0, 0.30);
}

/* CTV 4 - NEON VIOLET PRESTIGE (TĨNH - TƯƠNG ỨNG ĐẠI LÝ 4) */
.avatar-zone-wrap.ctv-4 .avatar { 
    background: conic-gradient(#3a0ca3, #7209b7, #f72585, #ffffff, #7209b7, #3a0ca3);
    box-shadow: 0 8px 30px rgba(114, 9, 183, 0.40);
}
.avatar-zone-wrap.ctv-4 .ring { 
    border: 2px solid #b5179e; 
    box-shadow: inset 0 0 0 1px #ffffff, 0 0 15px rgba(181, 23, 158, 0.35);
}

/* CTV 5 - COSMIC DIAMOND CYAN (TĨNH - TƯƠNG ỨNG ĐẠI LÝ 5) */
.avatar-zone-wrap.ctv-5 .avatar { 
    background: conic-gradient(#3449c9, #58e8ff, #ffffff, #8e70ef, #54dfff, #e2d8ff, #4256d8, #3449c9);
    box-shadow: 0 8px 32px rgba(84, 223, 255, 0.45);
}
.avatar-zone-wrap.ctv-5 .ring { 
    border: 3px solid #54dfff; 
    box-shadow: inset 0 0 0 1px #ffffff, 0 0 18px rgba(84, 223, 255, 0.40);
}

/* ==========================================================================
   MOBILE AUTH MODALS POSITIONING (50px FROM TOP ON MOBILE, CENTERED ON PC)
   ========================================================================== */
@media (max-width: 767.98px) {
    .auth-modal-fs16 .modal-dialog.modal-dialog-centered,
    #authLoginModal .modal-dialog.modal-dialog-centered,
    #authRegisterModal .modal-dialog.modal-dialog-centered,
    #authForgotPasswordModal .modal-dialog.modal-dialog-centered,
    #authResetPasswordModal .modal-dialog.modal-dialog-centered {
        align-items: flex-start !important;
        min-height: calc(100vh - 60px) !important;
        margin-top: 50px !important;
        margin-bottom: 20px !important;
    }
}

/* ==========================================================================
   HIDE SWEETALERT2 BUILT-IN ICON (TITLE COLOR + FONTAWESOME ICON SYSTEM)
   ========================================================================== */
.swal2-icon {
    display: none !important;
}

/* ==========================================================================
   MOBILE OFFCANVAS DRAWER ISOLATED SCROLL & SAFE AREA FIX
   ========================================================================== */
.gh-mobile-drawer {
    height: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overscroll-behavior: contain !important;
    overflow: hidden !important;
}
.gh-mobile-drawer .offcanvas-body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    overscroll-behavior-y: contain !important;
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 20px)) !important;
}