/* General Styles for page-hm88-app */.page-hm88-app {font-family: 'Arial', sans-serif;color: #f0f0f0;background-color: #1a1a2e;line-height: 1.6;overflow-x: hidden;padding-top: 10px; /* Adjust for fixed header, not var(--header-offset) */} .page-hm88-app__section-title {font-size: 2.2em;color: #e94560; /* Vibrant accent color */text-align: center;margin-bottom: 40px;padding: 0 15px;font-weight: bold;} .page-hm88-app__btn {display: inline-block;background-color: #e94560;color: #ffffff;padding: 12px 25px;border-radius: 8px;text-decoration: none;font-weight: bold;transition: background-color 0.3s ease, transform 0.2s ease;text-align: center;white-space: nowrap;cursor: pointer;} .page-hm88-app__btn:hover {background-color: #ff6a85;transform: translateY(-2px);}/* HERO Section */.page-hm88-app__hero-section {position: relative;width: 100%;height: 60vh; /* Responsive height */min-height: 450px;display: flex;align-items: center;justify-content: center;text-align: center;overflow: hidden;margin-bottom: 40px;} .page-hm88-app__hero-bg-image {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;z-index: 1;} .page-hm88-app__hero-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.6);z-index: 2;} .page-hm88-app__hero-content {position: relative;z-index: 3;max-width: 900px;padding: 0 20px;} .page-hm88-app__hero-title {font-size: 3.5em;color: #ffffff;margin-bottom: 20px;line-height: 1.2;font-weight: bold;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);} .page-hm88-app__hero-subtitle {font-size: 1.3em;color: #e0e0e0;margin-bottom: 30px;text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);} .page-hm88-app__hero-cta-buttons {display: flex;gap: 20px;justify-content: center;flex-wrap: wrap;} .page-hm88-app__hero-btn {min-width: 180px;padding: 15px 30px;font-size: 1.1em;border-radius: 50px;} .page-hm88-app__hero-btn--primary {background-color: #e94560;} .page-hm88-app__hero-btn--secondary {background-color: #3f0071;} .page-hm88-app__hero-btn--secondary:hover {background-color: #5c00a3;}/* Payment Providers Section */.page-hm88-app__payment-providers {display: flex;flex-wrap: wrap;justify-content: center;align-items: center;gap: 30px;width: 100%;max-width: 100%;box-sizing: border-box;padding: 40px 20px;background-color: #2a2a4a;margin-bottom: 40px;} .page-hm88-app__payment-logos {display: flex;flex-wrap: wrap;justify-content: center;align-items: center;gap: 30px;width: 100%;max-width: 1200px; /* Limit width on larger screens */} .page-hm88-app__payment-logo {flex: 0 0 auto;width: 80px;height: 80px;max-width: 80px;max-height: 80px;box-sizing: border-box;background-color: #ffffff; /* Add background for logos */border-radius: 8px;padding: 5px;display: flex;align-items: center;justify-content: center;filter: grayscale(100%); /* Make logos grayscale */opacity: 0.7;transition: filter 0.3s ease, opacity 0.3s ease;} .page-hm88-app__payment-logo:hover {filter: grayscale(0%);opacity: 1;} .page-hm88-app__payment-logo img {display: block;width: 80px !important;height: 80px !important;max-width: 80px !important;max-height: 80px !important;object-fit: contain;}/* Introduction Section */.page-hm88-app__intro-section {max-width: 1000px;margin: 0 auto 60px auto;padding: 0 20px;text-align: center;} .page-hm88-app__intro-text {font-size: 1.1em;margin-bottom: 20px;color: #cccccc;} .page-hm88-app__btn--more-info {margin-top: 20px;}/* Quick Access Section */.page-hm88-app__quick-access-section {background-color: #2a2a4a;padding: 60px 20px;margin-bottom: 60px;} .page-hm88-app__access-links {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 30px;max-width: 1200px;margin: 0 auto;} .page-hm88-app__access-link {display: flex;flex-direction: column;align-items: center;justify-content: center;background-color: #3f0071;padding: 25px;border-radius: 12px;text-decoration: none;color: #ffffff;transition: background-color 0.3s ease, transform 0.2s ease;text-align: center;box-sizing: border-box;} .page-hm88-app__access-link:hover {background-color: #5c00a3;transform: translateY(-5px);} .page-hm88-app__access-icon {width: 120px;height: 120px;object-fit: contain;margin-bottom: 15px;border-radius: 8px;} .page-hm88-app__access-text {font-size: 1.2em;font-weight: bold;word-wrap: break-word; /* Ensure text wraps */overflow-wrap: break-word;}/* Games Section */.page-hm88-app__games-section {max-width: 1200px;margin: 0 auto 60px auto;padding: 0 20px;} .page-hm88-app__game-categories {display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: 30px;} .page-hm88-app__game-card {background-color: #2a2a4a;border-radius: 12px;overflow: hidden;text-align: center;padding-bottom: 25px;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);display: flex;flex-direction: column;justify-content: space-between;} .page-hm88-app__game-image {width: 100%;height: 200px;object-fit: cover;margin-bottom: 20px;} .page-hm88-app__game-title {font-size: 1.5em;color: #e94560;margin-bottom: 10px;padding: 0 15px;} .page-hm88-app__game-description {font-size: 0.95em;color: #cccccc;margin-bottom: 20px;flex-grow: 1;padding: 0 15px;} .page-hm88-app__btn--play {margin-top: auto; /* Push button to bottom */padding: 10px 20px;font-size: 0.95em;border-radius: 50px;}/* Promotions Section */.page-hm88-app__promotions-section {background-color: #1f1f3a;padding: 60px 20px;margin-bottom: 60px;} .page-hm88-app__promo-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 30px;max-width: 1200px;margin: 0 auto;} .page-hm88-app__promo-card {background-color: #2a2a4a;border-radius: 12px;overflow: hidden;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);text-align: center;padding-bottom: 25px;display: flex;flex-direction: column;justify-content: space-between;} .page-hm88-app__promo-image {width: 100%;height: 220px;object-fit: cover;margin-bottom: 20px;} .page-hm88-app__promo-title {font-size: 1.4em;color: #e94560;margin-bottom: 10px;padding: 0 15px;} .page-hm88-app__promo-description {font-size: 0.95em;color: #cccccc;margin-bottom: 20px;flex-grow: 1;padding: 0 15px;} .page-hm88-app__btn--promo {margin-top: auto;padding: 10px 20px;font-size: 0.95em;border-radius: 50px;}/* Security Section */.page-hm88-app__security-section {max-width: 1200px;margin: 0 auto 60px auto;padding: 0 20px;} .page-hm88-app__security-content {display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: 30px;} .page-hm88-app__security-item {background-color: #2a2a4a;border-radius: 12px;padding: 30px;text-align: center;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);} .page-hm88-app__security-icon {width: 100px;height: 100px;object-fit: contain;margin-bottom: 20px;} .page-hm88-app__security-subtitle {font-size: 1.4em;color: #e94560;margin-bottom: 10px;} .page-hm88-app__security-text {font-size: 1em;color: #cccccc;margin-bottom: 20px;} .page-hm88-app__btn--contact {padding: 10px 20px;font-size: 0.95em;border-radius: 50px;}/* FAQ Section */.page-hm88-app__faq-section {max-width: 1000px;margin: 0 auto 60px auto;padding: 0 20px;} .page-hm88-app__faq-container {background-color: #1f1f3a;border-radius: 12px;padding: 20px;} .page-hm88-app__faq-item {margin-bottom: 15px;border-bottom: 1px solid #3a3a5a;} .page-hm88-app__faq-item:last-child {border-bottom: none;margin-bottom: 0;} .page-hm88-app__faq-question {display: flex;justify-content: space-between;align-items: center;padding: 15px 0;cursor: pointer;user-select: none;color: #ffffff;transition: color 0.3s ease;} .page-hm88-app__faq-question:hover {color: #e94560;} .page-hm88-app__faq-question-text {font-size: 1.2em;margin: 0;font-weight: bold;pointer-events: none; /* Prevent text from blocking click event */} .page-hm88-app__faq-toggle {font-size: 1.8em;font-weight: bold;line-height: 1;width: 30px;height: 30px;display: flex;align-items: center;justify-content: center;color: #e94560;transition: transform 0.3s ease;pointer-events: none; /* Prevent icon from blocking click event */} .page-hm88-app__faq-item.active .page-hm88-app__faq-toggle {transform: rotate(45deg); /* Change + to X or - */} .page-hm88-app__faq-answer {max-height: 0;overflow: hidden;padding: 0 15px;opacity: 0;transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s ease, opacity 0.4s ease;color: #cccccc;} .page-hm88-app__faq-item.active .page-hm88-app__faq-answer {max-height: 2000px !important; /* Sufficiently large */padding: 20px 15px !important;opacity: 1;} .page-hm88-app__faq-answer p {margin: 0;padding-bottom: 10px;}/* Blog Section */.page-hm88-app__blog-section {max-width: 1200px;margin: 0 auto 60px auto;padding: 0 20px;} .page-hm88-app__blog-articles {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 30px;} .page-hm88-app__blog-card {background-color: #2a2a4a;border-radius: 12px;overflow: hidden;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);display: flex;flex-direction: column;} .page-hm88-app__blog-image {width: 100%;height: 200px;object-fit: cover;} .page-hm88-app__blog-content {padding: 20px;flex-grow: 1;display: flex;flex-direction: column;} .page-hm88-app__blog-card-title {font-size: 1.3em;margin-bottom: 10px;line-height: 1.4;flex-grow: 1; /* Allows title to take available space */} .page-hm88-app__blog-card-title a {color: #e94560;text-decoration: none;transition: color 0.3s ease;} .page-hm88-app__blog-card-title a:hover {color: #ff6a85;} .page-hm88-app__blog-excerpt {font-size: 0.9em;color: #cccccc;margin-bottom: 15px;} .page-hm88-app__blog-date {font-size: 0.85em;color: #888888;text-align: right;margin-top: auto; /* Push date to bottom */}/* Responsive Adjustments */@media (max-width: 1024px) {.page-hm88-app__hero-title {font-size: 3em;} .page-hm88-app__hero-subtitle {font-size: 1.2em;} .page-hm88-app__section-title {font-size: 2em;}}@media (max-width: 768px) {.page-hm88-app {padding-top: 5px; /* Smaller top padding for mobile */} .page-hm88-app__hero-section {height: 70vh;min-height: 400px;} .page-hm88-app__hero-title {font-size: 2.5em;margin-bottom: 15px;} .page-hm88-app__hero-subtitle {font-size: 1em;margin-bottom: 25px;} .page-hm88-app__hero-cta-buttons {flex-direction: column;gap: 15px;} .page-hm88-app__hero-btn {width: 80%;max-width: 300px;padding: 12px 20px;font-size: 1em;} .page-hm88-app__section-title {font-size: 1.8em;margin-bottom: 30px;}/* Payment Logos - specific rules from prompt */.page-hm88-app__payment-providers {flex-direction: row;flex-wrap: wrap;justify-content: center;gap: 16px;padding: 30px 15px;}}