:root {--primary-red: #D31027;--secondary-red: #EA384D;--shadow-red: rgba(211, 16, 39, 0.2);--primary-color: var(--primary-red);--primary-color-dark: #B40E21;--primary-color-light: #F15B6E;--accent-color: var(--secondary-red);--accent-gradient: linear-gradient(to right, var(--primary-red), var(--secondary-red));--success-color: #27ae60;--success-light: #d4edda;--warning-color: #f39c12;--warning-light: #fff3cd;--info-color: #3498db;--info-light: #d1ecf1;--background-color: #f8f9fc;--card-background: #ffffff;--text-color: #2c3e50;--text-muted: #6c757d;--border-color: #e8ecef;--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);--shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.16);--shadow-glow: 0 10px 30px var(--shadow-red);--transition-fast: 0.15s ease;--transition-normal: 0.25s ease;--transition-slow: 0.4s ease;--transition-bounce: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 20px;--radius-xl: 24px;}*,*::before,*::after {box-sizing: border-box;margin: 0;padding: 0;}body {font-family: "Inter", "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", Arial, sans-serif;background-color: var(--background-color);background-image: radial-gradient(circle at 20% 80%, rgba(255, 107, 53, 0.05) 0%, transparent 50%),radial-gradient(circle at 80% 20%, rgba(231, 76, 60, 0.05) 0%, transparent 50%);color: var(--text-color);line-height: 1.6;padding-top: 80px;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;min-height: 100vh;}html,body {width: 100%;overflow-x: hidden;position: relative;touch-action: manipulation;scroll-behavior: smooth;}::selection {background: var(--accent-color);color: white;}img,svg,video,canvas {max-width: 100%;height: auto;display: block;}.cta-button.topup-btn {background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);box-shadow: 0 4px 15px rgba(255, 215, 0, 0.5);border: 1px solid rgba(255, 255, 255, 0.4);animation: pulse-gold 2s infinite;display: flex !important;align-items: center !important;justify-content: center !important;padding: 0 20px !important;margin: 0 !important; gap: 8px !important;min-width: 44px !important;height: 44px !important;width: auto !important;border-radius: 50px !important;line-height: 1 !important; font-weight: 700 !important;white-space: nowrap !important;}.cta-button.topup-btn i {color: #fff;filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));font-size: 18px;margin: 0 !important;padding: 0 !important;display: inline-block !important; align-items: center;justify-content: center;line-height: 1 !important;width: auto !important; height: auto !important;}.cta-button.topup-btn:hover {transform: translateY(-2px) scale(1.05);box-shadow: 0 6px 20px rgba(255, 215, 0, 0.7);background: linear-gradient(135deg, #FFE44D 0%, #FFB302 100%);}@keyframes pulse-gold {0% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7); }70% { box-shadow: 0 0 0 10px rgba(255, 215, 0, 0); }100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); }}@media (max-width: 768px) {body {padding-top: 160px;}}.container {max-width: 1200px;margin: 0 auto;padding: 0 20px;}.main-header {background: var(--accent-gradient);box-shadow: var(--shadow-lg), 0 4px 30px rgba(231, 76, 60, 0.2);padding: 16px 0;position: fixed;top: 0;left: 0;right: 0;z-index: 1000;backdrop-filter: blur(10px);border-bottom: 1px solid rgba(255, 255, 255, 0.1);animation: headerSlideDown 0.5s ease;}@keyframes headerSlideDown {from {transform: translateY(-100%);opacity: 0;}to {transform: translateY(0);opacity: 1;}}.header-content {display: flex;align-items: center;justify-content: space-between;}.logo a {color: white;text-decoration: none;font-size: 28px;font-weight: 900;text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);transition: all var(--transition-normal);display: inline-flex;align-items: center;gap: 8px;letter-spacing: -0.5px;}.logo a:hover {transform: scale(1.02);text-shadow: 0 4px 20px rgba(255, 255, 255, 0.4);filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));}.main-nav a {color: white;text-decoration: none;margin: 0 15px;font-size: 16px;font-weight: 600;padding: 8px 16px;border-radius: var(--radius-md);transition: all var(--transition-normal);position: relative;}.main-nav a::after {content: "";position: absolute;bottom: 0;left: 50%;width: 0;height: 2px;background: white;transition: all var(--transition-normal);transform: translateX(-50%);}.main-nav a:hover::after,.main-nav a.active::after {width: 80%;}.main-nav a:hover,.main-nav a.active {background-color: rgba(255, 255, 255, 0.15);color: #fff;}.header-actions {display: flex;align-items: center;gap: 12px;justify-content: flex-end;}.header-bell {background: rgba(255, 255, 255, 0.15);border: none;color: white;width: 44px;height: 44px;border-radius: 50%;cursor: pointer;transition: all var(--transition-normal);display: flex;align-items: center;justify-content: center;font-size: 18px;position: relative;}.header-bell:hover {background: rgba(255, 255, 255, 0.25);transform: scale(1.1);}.header-bell:hover i {animation: bellRing 0.5s ease;}@keyframes bellRing {0%,100% {transform: rotate(0);}20% {transform: rotate(15deg);}40% {transform: rotate(-15deg);}60% {transform: rotate(10deg);}80% {transform: rotate(-10deg);}}.hamburger-btn {background: rgba(255, 255, 255, 0.15);border: none;color: white;width: 44px;height: 44px;border-radius: var(--radius-md);cursor: pointer;transition: all var(--transition-normal);display: flex;align-items: center;justify-content: center;font-size: 18px;}.hamburger-btn:hover {background: rgba(255, 255, 255, 0.25);transform: rotate(90deg);}.user-dropdown {position: relative;display: inline-block;cursor: pointer;color: white;padding: 10px 18px;border-radius: var(--radius-xl);background: rgba(255, 255, 255, 0.15);backdrop-filter: blur(10px);font-weight: 600;transition: all var(--transition-normal);border: 1px solid rgba(255, 255, 255, 0.2);}.user-dropdown:hover {background: rgba(255, 255, 255, 0.25);transform: translateY(-2px);box-shadow: var(--shadow-md);}.user-balance {margin: 0 5px;color: #ffd700;font-weight: 700;animation: shimmer 2s ease-in-out infinite;}@keyframes shimmer {0%,100% {opacity: 1;}50% {opacity: 0.7;}}.user-dropdown .dropdown-content {display: none;position: absolute;right: 0;background: var(--card-background);min-width: 200px;box-shadow: var(--shadow-xl);z-index: 1001;border-radius: var(--radius-lg);overflow: hidden;margin-top: 12px;border: 1px solid var(--border-color);animation: dropdownFade 0.2s ease;}@keyframes dropdownFade {from {opacity: 0;transform: translateY(-8px) scale(0.95);}to {opacity: 1;transform: translateY(0) scale(1);}}.user-dropdown .dropdown-content a {color: var(--text-color);padding: 14px 18px;text-decoration: none;display: flex;align-items: center;gap: 10px;font-weight: 500;transition: all var(--transition-fast);border-bottom: 1px solid var(--border-color);}.user-dropdown .dropdown-content a:last-child {border-bottom: none;}.user-dropdown .dropdown-content a:hover {background: linear-gradient(135deg, var(--primary-color-light) 0%, #fff5f3 100%);color: var(--primary-color);padding-left: 22px;}.cta-button {background: linear-gradient(135deg, var(--primary), var(--secondary));color: #fff;padding: 12px 24px;text-decoration: none;border: none;border-radius: 999px;font-weight: 900;font-size: 16px;letter-spacing: 0.3px;line-height: 1;min-height: 44px;cursor: pointer;transition: transform var(--transition-bounce), box-shadow var(--transition-normal), filter var(--transition-normal);box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);position: relative;overflow: hidden;display: inline-flex;align-items: center;gap: 8px;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);}.cta-button::before {content: "";position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);transition: left 0.5s ease;}.cta-button:hover::before {left: 100%;}.cta-button:hover {transform: translateY(-3px) scale(1.02);box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12), 0 8px 24px rgba(var(--primary-rgb), 0.35);filter: saturate(1.05);}.cta-button:active {transform: translateY(0) scale(0.95);filter: brightness(0.98);box-shadow: inset 0 0 12px rgba(var(--primary-rgb), 0.35), 0 8px 20px rgba(var(--primary-rgb), 0.3);}.cta-button:disabled {background: linear-gradient(135deg, #bdc3c7 0%, #95a5a6 100%);color: #fff;cursor: not-allowed;opacity: 0.7;box-shadow: none;transform: none;}.cta-button i {font-size: 16px;}.swal2-popup {border-radius: var(--radius-lg);box-shadow: var(--shadow-glow);}.swal2-toast {border-radius: var(--radius-lg);box-shadow: var(--shadow-glow);}.swal2-title {font-weight: 800;}.swal2-confirm {background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;color: #fff !important;border-radius: var(--radius-lg) !important;border: none !important;font-weight: 800 !important;}.swal2-cancel {background: #fff !important;color: var(--primary) !important;border-radius: var(--radius-lg) !important;border: 2px solid var(--primary) !important;font-weight: 700 !important;}.product-card,.phone-card,.commitment-card,.review-card,.topup-card,.admin-card,.profile-block {border-radius: 20px;box-shadow: 0 10px 30px var(--shadow-red);background: var(--card-background);border: none;padding: 16px;transition: transform var(--transition-normal), box-shadow var(--transition-normal);}.account-page {padding: 24px 0 40px;}.account-page h2 {display: flex;align-items: center;gap: 10px;font-size: 22px;font-weight: 800;color: var(--primary);margin: 10px 0 20px;}.profile-block {margin-top: 20px;padding: 20px;}.profile-block .block-header {display: flex;align-items: center;gap: 10px;margin-bottom: 16px;color: var(--primary);}.profile-block .block-header h4 {font-size: 16px;font-weight: 800;margin: 0;}.profile-block .block-header i {font-size: 20px;}.profile-block form {display: block;}.profile-block .info-row {display: flex;align-items: center;justify-content: space-between;gap: 12px;padding: 10px 12px;border-radius: 12px;background: rgba(248, 249, 250, 0.95);margin-bottom: 8px;}.profile-block .info-row .label {font-size: 13px;font-weight: 700;color: var(--text-muted);text-transform: uppercase;}.profile-block .info-row .value {font-weight: 700;color: var(--text);}.profile-block .info-row.highlight-balance {border: 1px dashed rgba(231, 76, 60, 0.4);background: linear-gradient(135deg, rgba(231, 76, 60, 0.03), rgba(231, 76, 60, 0.06));}.profile-block .info-row.highlight-balance .label {color: var(--primary);}.profile-block .info-row.highlight-balance .value {color: var(--primary);font-size: 16px;}.profile-block .editable-field {display: flex;flex-direction: column;gap: 6px;margin: 10px 0;}.profile-block .editable-field label {font-size: 14px;font-weight: 600;color: var(--text);}.account-page input[type="text"],.account-page input[type="email"],.account-page input[type="tel"],.account-page input[type="password"] {width: 100%;padding: 10px 12px;border-radius: 12px;border: 2px solid #e8ecef;outline: none;background: #fff;font-size: 14px;transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;}.account-page input[type="text"]::placeholder,.account-page input[type="email"]::placeholder,.account-page input[type="tel"]::placeholder,.account-page input[type="password"]::placeholder {color: #a0a7b3;}.account-page input[type="text"]:focus,.account-page input[type="email"]:focus,.account-page input[type="tel"]:focus,.account-page input[type="password"]:focus {border-color: var(--primary);box-shadow: 0 0 0 3px rgba(211, 16, 39, 0.12);background: #fff;}.submit-button {width: 100%;padding: 12px 20px;border-radius: 20px;border: none;font-weight: 800;letter-spacing: 0.3px;font-size: 15px;display: inline-flex;align-items: center;justify-content: center;gap: 8px;cursor: pointer;margin-top: 12px;transition: transform var(--transition-bounce), box-shadow var(--transition-normal), filter var(--transition-normal);}.submit-button.primary-btn,.submit-button.secondary-btn {color: #fff;background: linear-gradient(135deg, var(--primary), var(--secondary));box-shadow: 0 10px 22px rgba(231, 76, 60, 0.4);}.submit-button:hover {transform: translateY(-2px) scale(1.01);box-shadow: 0 12px 26px rgba(231, 76, 60, 0.45);filter: saturate(1.05);}.submit-button:active {transform: translateY(0) scale(0.96);box-shadow: 0 6px 16px rgba(231, 76, 60, 0.35);}.submit-button:disabled {background: linear-gradient(135deg, #bdc3c7 0%, #95a5a6 100%);color: #fff;cursor: not-allowed;opacity: 0.8;box-shadow: none;transform: none;}@media (max-width: 768px) {.login-btn-placeholder {display: none !important;}.account-page {padding: 16px 0 28px;}.account-page h2 {font-size: 20px;justify-content: center;text-align: center;}.profile-block {padding: 16px;}.profile-block .info-row {flex-direction: column;align-items: flex-start;}}.product-card:hover,.phone-card:hover,.commitment-card:hover,.review-card:hover,.topup-card:hover,.admin-card:hover {transform: translateY(-4px);box-shadow: 0 16px 36px rgba(0,0,0,0.10);}.card-title,.product-card h3,.phone-title {background: var(--accent-gradient);color: #fff;padding: 10px 14px;border-radius: 16px;display: inline-block;margin-bottom: 12px;font-weight: 900;}.admin-tabs { display: block !important; }.admin-tabs .tab-menu {display: grid !important;grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));gap: 8px;background: linear-gradient(180deg, #fff7f3 0%, #fff2ea 100%);padding: 10px;border-bottom: 1px solid var(--border-color);border-top-left-radius: 16px;border-top-right-radius: 16px;}.admin-tabs .tab-button {background: var(--accent-gradient);color: #fff;border: none;border-radius: 14px;font-weight: 800;padding: 10px 12px;min-height: 40px;box-shadow: 0 8px 16px rgba(var(--primary-rgb), 0.18);transition: transform var(--transition-bounce), box-shadow var(--transition-normal), filter var(--transition-normal);display: inline-flex;align-items: center;justify-content: center;gap: 8px;}.admin-tabs .tab-button:hover {transform: translateY(-2px) scale(1.02);box-shadow: 0 12px 22px rgba(255, 126, 95, 0.26);}.admin-tabs .tab-button:active {transform: translateY(0) scale(0.95);filter: brightness(0.98);}.admin-tabs .tab-button.active {filter: saturate(1.05);box-shadow: 0 14px 26px rgba(255, 126, 95, 0.30);}.admin-tabs .tab-button .tab-text { display: inline !important; }.tab-content-wrapper {background: var(--card-background);border: 1px solid var(--border-color);border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;box-shadow: 0 10px 30px rgba(0,0,0,0.08);}.login-button {background: var(--card-background);color: var(--primary-color);padding: 10px 20px;border: 2px solid var(--primary-color);border-radius: var(--radius-xl);font-weight: 700;cursor: pointer;transition: all var(--transition-normal);position: relative;overflow: hidden;z-index: 1;}.login-button::before {content: "";position: absolute;top: 0;left: 0;width: 0;height: 100%;background: var(--primary-color);transition: width var(--transition-normal);z-index: -1;}.login-button:hover::before {width: 100%;}.login-button:hover {color: white;transform: translateY(-2px);box-shadow: var(--shadow-md);}.facebook-btn {background: linear-gradient(135deg, #1877f2 0%, #4299e1 100%);color: #fff;border: none;padding: 14px 20px;border-radius: var(--radius-md);font-weight: 700;cursor: pointer;transition: all var(--transition-normal);box-shadow: 0 4px 12px rgba(24, 119, 242, 0.35);display: flex;align-items: center;justify-content: center;gap: 10px;position: relative;overflow: hidden;}.facebook-btn::before {content: "";position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);transition: left 0.5s ease;}.facebook-btn:hover::before {left: 100%;}.facebook-btn:hover {transform: translateY(-2px);box-shadow: 0 6px 20px rgba(24, 119, 242, 0.5);}.facebook-btn:active {transform: scale(0.98);}.facebook-btn i {font-size: 20px;}.google-btn {background: #fff;color: #757575;border: 1px solid #ddd;padding: 14px 20px;border-radius: var(--radius-md);font-weight: 700;cursor: pointer;transition: all var(--transition-normal);box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);display: flex;align-items: center;justify-content: center;gap: 10px;position: relative;overflow: hidden;margin-top: 10px;}.google-btn:hover {background: #f8f9fa;transform: translateY(-2px);box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);color: #333;}.google-btn:active {transform: scale(0.98);}.google-btn i {font-size: 20px;background: linear-gradient(45deg, #4285F4, #EA4335, #FBBC05, #34A853);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}.admin-stats-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));gap: 16px;margin-top: 16px;}.stat-card {background: var(--card-background);border: none;border-radius: 20px;padding: 24px;box-shadow: var(--shadow-sm);transition: all var(--transition-normal);position: relative;overflow: hidden;}.stat-actions select {border: 1px solid var(--border-color);border-radius: var(--radius-md);padding: 6px 10px;background: #fff;color: var(--text-color);}.stat-card::before {content: "";position: absolute;top: 0;left: 0;width: 4px;height: 100%;background: var(--accent-gradient);transition: width var(--transition-normal);}.stat-card:hover::before {width: 6px;}.stat-card::after {content: "";position: absolute;top: -50%;right: -50%;width: 100%;height: 100%;background: radial-gradient(circle, rgba(255, 107, 53, 0.05) 0%, transparent 70%);opacity: 0;transition: opacity var(--transition-normal);}.stat-card:hover::after {opacity: 1;}.stat-card:hover {transform: translateY(-6px);box-shadow: 0 10px 30px var(--shadow-red);}.stat-label {font-weight: 600;color: var(--text-muted);margin-bottom: 8px;font-size: 14px;text-transform: uppercase;letter-spacing: 0.5px;display: flex;align-items: center;gap: 8px;}.stat-label i {color: var(--accent-color);font-size: 16px;}.stat-value {font-size: 32px;font-weight: 800;background: var(--accent-gradient);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;}.live-dot {display: inline-block;width: 10px;height: 10px;border-radius: 50%;background: var(--primary-red);box-shadow: 0 0 0 0 rgba(211, 16, 39, 0.7);margin-right: 8px;animation: pulseLive 1.6s infinite;vertical-align: middle;}@keyframes pulseLive {0% { box-shadow: 0 0 0 0 rgba(211, 16, 39, 0.7); }70% { box-shadow: 0 0 0 8px rgba(211, 16, 39, 0); }100% { box-shadow: 0 0 0 0 rgba(211, 16, 39, 0); }}.flatpickr-calendar {border: 1px solid var(--border-color);box-shadow: var(--shadow-glow);border-radius: var(--radius-lg);}.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange {background: var(--accent-gradient);border-color: transparent;color: #fff;}.flatpickr-day.today {border-color: var(--primary-red);}.flatpickr-months .flatpickr-prev,.flatpickr-months .flatpickr-next {color: var(--primary-red);}.chart-block {margin-top: 20px;background: var(--card-background);border: 1px solid var(--border-color);border-radius: var(--radius-lg);padding: 24px;box-shadow: var(--shadow-sm);transition: all var(--transition-normal);}.chart-block:hover {box-shadow: var(--shadow-md);}.chart-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 16px;padding-bottom: 12px;border-bottom: 1px solid var(--border-color);}.chart-title {font-weight: 700;color: var(--text-color);display: flex;align-items: center;gap: 8px;}.chart-title i {color: var(--accent-color);}.chart-range {padding: 10px 16px;border: 2px solid var(--border-color);border-radius: var(--radius-md);background: var(--background-color);font-weight: 600;transition: all var(--transition-fast);cursor: pointer;}.chart-range:hover {border-color: var(--accent-color);}.chart-range:focus {outline: none;border-color: var(--accent-color);box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.1);}.auth-card .auth-submit-btn,.auth-card .facebook-btn,.auth-card .login-button {width: 100%;min-height: 48px;border-radius: var(--radius-md);font-weight: 700;}.auth-submit-btn {background: var(--accent-gradient);color: white;border: none;padding: 14px 20px;border-radius: var(--radius-md);font-weight: 700;cursor: pointer;transition: all var(--transition-normal);box-shadow: 0 4px 12px rgba(255, 107, 53, 0.35);position: relative;overflow: hidden;}.auth-submit-btn.primary-bg {background: var(--accent-gradient);}.auth-submit-btn.secondary-bg {background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);box-shadow: 0 4px 12px rgba(39, 174, 96, 0.35);}.auth-submit-btn:hover {transform: translateY(-2px);box-shadow: 0 6px 20px rgba(255, 107, 53, 0.5);}.main-content {padding: 40px 0;}h2 {color: var(--primary-color-dark);text-align: center;margin-bottom: 32px;font-size: 2em;position: relative;display: inline-block;width: 100%;padding-bottom: 16px;}h2::after {content: "";position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);width: 80px;height: 4px;background: var(--accent-gradient);border-radius: 2px;transition: width var(--transition-normal);}h2:hover::after {width: 120px;}h2 i {margin-right: 8px;color: var(--accent-color);animation: iconBounce 2s ease-in-out infinite;}@keyframes iconBounce {0%,100% {transform: translateY(0);}50% {transform: translateY(-4px);}}.products-section {padding: 40px 0;}.product-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));gap: 24px;}.product-card {background: var(--card-background);border: 1px solid var(--border-color);border-radius: var(--radius-lg);padding: 20px;text-align: center;box-shadow: var(--shadow-sm);transition: all var(--transition-normal);position: relative;overflow: hidden;transform-style: preserve-3d;perspective: 1000px;}.product-card::before {content: "";position: absolute;top: 0;left: 0;right: 0;height: 4px;background: var(--accent-gradient);transform: scaleX(0);transition: transform var(--transition-normal);transform-origin: left;}.product-card:hover::before {transform: scaleX(1);}.product-card::after {content: "";position: absolute;inset: 0;background: linear-gradient(135deg, rgba(255, 107, 53, 0.05) 0%, transparent 50%);opacity: 0;transition: opacity var(--transition-normal);pointer-events: none;}.product-card:hover::after {opacity: 1;}.product-card:hover {transform: translateY(-10px) rotateX(2deg);box-shadow: var(--shadow-xl), 0 20px 40px rgba(0, 0, 0, 0.1);}.product-card img {width: 100%;height: 280px;object-fit: contain;background: linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%);border: 1px solid var(--border-color);border-radius: var(--radius-md);margin-bottom: 16px;transition: all var(--transition-normal);}.product-card:hover img {transform: scale(1.05);}.product-card h3 {font-size: 1.2em;color: var(--text-color);margin-bottom: 12px;font-weight: 700;line-height: 1.4;}.product-price {font-size: 1.6em;background: var(--accent-gradient);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;font-weight: 800;margin-bottom: 16px;animation: pricePulse 2s ease-in-out infinite;}@keyframes pricePulse {0%,100% {transform: scale(1);}50% {transform: scale(1.02);}}.product-tag {position: absolute;top: 16px;right: 16px;background: var(--accent-gradient);color: white;padding: 6px 14px;border-radius: var(--radius-xl);font-weight: 700;font-size: 12px;text-transform: uppercase;letter-spacing: 0.5px;z-index: 5;box-shadow: var(--shadow-md);animation: tagFloat 3s ease-in-out infinite;}@keyframes tagFloat {0%,100% {transform: translateY(0);}50% {transform: translateY(-5px);}}.product-card.hot .product-tag {background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);animation: tagPulseHot 1.5s ease-in-out infinite;}@keyframes tagPulseHot {0%,100% {transform: scale(1);box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.4);}50% {transform: scale(1.05);box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.6);}}.product-card.sale .product-tag {background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);}.product-card.new .product-tag {background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);}.modal {display: none;position: fixed;z-index: 2000;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background: rgba(0, 0, 0, 0.6);backdrop-filter: blur(8px);animation: modalFadeIn 0.3s ease;}@keyframes modalFadeIn {from {opacity: 0;backdrop-filter: blur(0);}to {opacity: 1;backdrop-filter: blur(8px);}}.modal-content {background: var(--card-background);margin: 6% auto;padding: 32px;border: none;width: 90%;max-width: 480px;border-radius: var(--radius-lg);position: relative;box-shadow: var(--shadow-xl), 0 25px 50px rgba(0, 0, 0, 0.25);animation: modalSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);}@keyframes modalSlideIn {from {transform: translateY(-50px) scale(0.9);opacity: 0;}to {transform: translateY(0) scale(1);opacity: 1;}}.close-btn {color: var(--text-muted);float: right;font-size: 28px;font-weight: 300;cursor: pointer;transition: all var(--transition-normal);width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;border-radius: 50%;background: transparent;border: none;}.close-btn:hover {color: var(--primary-color);background: var(--primary-color-light);transform: rotate(90deg) scale(1.1);}.modal-content h3 {color: var(--text-color);margin-bottom: 24px;text-align: center;font-weight: 700;}.auth-form label {display: block;margin-top: 16px;margin-bottom: 6px;font-weight: 600;color: var(--text-color);font-size: 14px;}.auth-form input[type="text"],.auth-form input[type="password"],.auth-form input[type="email"],.auth-form input[type="tel"] {width: 100%;padding: 14px 16px;margin-bottom: 12px;border: 2px solid var(--border-color);border-radius: var(--radius-md);font-size: 15px;transition: all var(--transition-fast);}.auth-form input:focus {outline: none;border-color: var(--accent-color);box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.1);}.auth-form button {width: 100%;margin-top: 20px;}#toggle-auth-form {display: block;text-align: center;margin-top: 16px;font-size: 14px;color: var(--accent-color);cursor: pointer;font-weight: 600;transition: all var(--transition-fast);}#toggle-auth-form:hover {color: var(--primary-color);}.deposit-page {padding: 24px 0;}.deposit-grid {display: grid;grid-template-columns: 1fr 1fr;gap: 28px;}@media (max-width: 900px) {.deposit-grid {grid-template-columns: 1fr;}}.deposit-info-container,.deposit-form-container {background: var(--card-background);padding: 28px;border-radius: var(--radius-lg);box-shadow: var(--shadow-md);border: 1px solid var(--border-color);transition: all var(--transition-normal);}.deposit-info-container:hover,.deposit-form-container:hover {box-shadow: var(--shadow-lg);}.deposit-methods .info-grid {display: grid;grid-template-columns: 1fr 1fr;gap: 16px;}.deposit-methods .info-item {display: flex;align-items: center;justify-content: space-between;background: var(--background-color);border: 1px solid var(--border-color);border-radius: var(--radius-md);padding: 14px 16px;transition: all var(--transition-fast);}.deposit-methods .info-item:hover {border-color: var(--accent-color);}.deposit-methods .info-item .highlight {font-weight: 700;color: var(--text-color);}.deposit-methods .copy-btn {margin-left: 12px;padding: 10px 16px;border-radius: var(--radius-md);border: none;background: var(--info-color);color: #fff;cursor: pointer;font-weight: 700;transition: all var(--transition-fast);}.deposit-methods .copy-btn:hover {background: #2980b9;transform: translateY(-2px);}.card-deposit-form select,.card-deposit-form input[type="text"] {width: 100%;padding: 14px 16px;border: 2px solid var(--border-color);border-radius: var(--radius-md);margin-bottom: 12px;font-size: 15px;transition: all var(--transition-fast);}.card-deposit-form select:focus,.card-deposit-form input:focus {outline: none;border-color: var(--accent-color);box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.1);}.card-deposit-form button {width: 100%;}.deposit-info-container h3,.deposit-form-container h3 {margin-bottom: 20px;display: flex;align-items: center;gap: 10px;font-size: 1.2em;}.deposit-info-container h3 {color: var(--success-color);}.bank-info {margin-bottom: 20px;padding: 20px;background: linear-gradient(135deg, var(--primary-color-light) 0%, #fff5f3 100%);border: 2px dashed var(--primary-color);border-radius: var(--radius-md);}.bank-info p {margin: 6px 0;font-size: 15px;}.bank-info strong {color: var(--primary-color-dark);}.deposit-form-container h3 {color: var(--info-color);}.deposit-form-container input[type="number"],.deposit-form-container input[type="text"] {width: 100%;padding: 14px 16px;margin-bottom: 14px;border: 2px solid var(--border-color);border-radius: var(--radius-md);font-size: 15px;transition: all var(--transition-fast);}.deposit-form-container input:focus {outline: none;border-color: var(--accent-color);box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.1);}.form-row {display: flex;justify-content: space-between;align-items: center;gap: 14px;margin-bottom: 16px;}.form-row label {flex-basis: 30%;min-width: 140px;font-weight: 600;color: var(--text-color);}.form-row input,.form-row select,.form-row textarea {flex: 1;padding: 12px 14px;border: 2px solid var(--border-color);border-radius: var(--radius-md);transition: all var(--transition-fast);}.form-row input:focus,.form-row select:focus,.form-row textarea:focus {outline: none;border-color: var(--accent-color);box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.1);}.form-row .hint {font-size: 13px;color: var(--text-muted);}.deposit-page .deposit-methods .qr-card {box-sizing: border-box;display: flex;flex-direction: column;align-items: center;text-align: center;padding: 24px;border-radius: var(--radius-lg);background: linear-gradient(135deg, var(--primary-red) 0%, var(--secondary-red) 12%, #fff9f8 100%);border: 2px solid var(--primary-red);}.deposit-page .deposit-methods .qr-card img {display: block;width: 100%;max-width: 280px;height: auto;margin: 8px auto 0;border: 2px solid rgba(211, 16, 39, 0.4);border-radius: var(--radius-lg);box-shadow: 0 10px 30px var(--shadow-red);}.deposit-page .deposit-methods .bank-card {box-sizing: border-box;padding: 20px;border-radius: var(--radius-lg);background: linear-gradient(135deg, #f8fbff 0%, #e3f2fd 100%);border: 2px solid var(--info-color);}.deposit-page .deposit-form-container {box-sizing: border-box;}.ticker-bar {background: linear-gradient(90deg, #fff7f7 0%, #fff5f3 50%, #fff7f7 100%);border-top: 1px solid rgba(231, 76, 60, 0.15);border-bottom: 1px solid rgba(231, 76, 60, 0.15);overflow: hidden;position: relative;}.ticker-bar::before {content: "";position: absolute;left: 0;top: 0;bottom: 0;width: 60px;background: linear-gradient(90deg, #fff7f7 0%, transparent 100%);z-index: 2;pointer-events: none;}.ticker-bar::after {content: "";position: absolute;right: 0;top: 0;bottom: 0;width: 60px;background: linear-gradient(90deg, transparent 0%, #fff7f7 100%);z-index: 2;pointer-events: none;}.ticker-bar .container {display: flex;align-items: center;gap: 12px;overflow: hidden;height: 44px;padding: 0;}.ticker-track {white-space: nowrap;display: inline-block;will-change: transform;animation: ticker-scroll 200s linear infinite;}@keyframes ticker-scroll {from {transform: translateX(0);}to {transform: translateX(-50%);}}.ticker-item {margin-right: 32px;display: inline-flex;align-items: center;gap: 8px;}.ticker-user {background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%);padding: 4px 12px;border-radius: var(--radius-sm);font-weight: 700;box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);}.sale-banner {background: linear-gradient(90deg, var(--secondary) 0%, var(--primary) 50%, var(--secondary) 100%);background-size: 200% 100%;animation: saleBannerShift 3s ease-in-out infinite;color: #fff;padding: 24px 0;position: relative;overflow: hidden;}@keyframes saleBannerShift {0%,100% {background-position: 0% 50%;}50% {background-position: 100% 50%;}}.sale-banner::before {content: "";position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);animation: saleBannerShine 2s ease-in-out infinite;}@keyframes saleBannerShine {from {left: -100%;}to {left: 100%;}}.sale-banner-inner {display: flex;align-items: center;gap: 24px;justify-content: center;flex-wrap: wrap;}.sale-title {font-weight: 800;letter-spacing: 1px;font-size: 20px;text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);}.sale-day {background: #fff;color: var(--primary-color);padding: 12px 24px;border-radius: var(--radius-lg);font-weight: 800;min-width: 120px;text-align: center;box-shadow: var(--shadow-md);animation: saleDayPulse 2s ease-in-out infinite;}@keyframes saleDayPulse {0%,100% {transform: scale(1);}50% {transform: scale(1.05);}}.sale-status {font-weight: 700;opacity: 0.95;display: flex;align-items: center;gap: 8px;}.sale-status::before {content: "";width: 10px;height: 10px;background: #2ecc71;border-radius: 50%;animation: statusPulse 1.5s ease-in-out infinite;box-shadow: 0 0 10px rgba(46, 204, 113, 0.6);}@keyframes statusPulse {0%,100% {opacity: 1;transform: scale(1);box-shadow: 0 0 10px rgba(46, 204, 113, 0.6);}50% {opacity: 0.5;transform: scale(1.3);box-shadow: 0 0 20px rgba(46, 204, 113, 0.8);}}.highlight-carousel {background: transparent;padding: 20px 0;}.carousel-track {display: flex;gap: 16px;overflow-x: auto;scroll-snap-type: x mandatory;padding-bottom: 12px;scroll-behavior: smooth;}.carousel-track::-webkit-scrollbar {height: 6px;}.carousel-track::-webkit-scrollbar-thumb {background: var(--accent-color);border-radius: 999px;}.carousel-track::-webkit-scrollbar-track {background: var(--border-color);border-radius: 999px;}.carousel-card {scroll-snap-align: start;background: var(--card-background);border: 1px solid var(--border-color);border-radius: var(--radius-lg);box-shadow: var(--shadow-sm);width: clamp(220px, 70vw, 280px);flex: 0 0 auto;transition: all var(--transition-normal);overflow: hidden;}.carousel-card:hover {transform: translateY(-8px) scale(1.02);box-shadow: var(--shadow-xl);}.carousel-img {height: 160px;display: flex;align-items: center;justify-content: center;color: #fff;font-size: 52px;position: relative;overflow: hidden;}.carousel-img::after {content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.15) 100%);}.carousel-img i {position: relative;z-index: 1;animation: carouselIconFloat 3s ease-in-out infinite;}@keyframes carouselIconFloat {0%,100% {transform: translateY(0) scale(1);}50% {transform: translateY(-8px) scale(1.1);}}.carousel-title {font-weight: 700;color: var(--text-color);padding: 16px;font-size: 14px;}.carousel-btn {width: calc(100% - 32px);margin: 0 16px 16px;font-size: 13px;}@media (max-width: 768px) {.carousel-card {width: calc(50% - 8px);}}.banner-section {padding: 20px 0;}.banner-container {border: 2px solid rgba(255, 126, 95, 0.35);border-radius: 20px;box-shadow: 0 8px 24px rgba(231, 76, 60, 0.08);background: #fff;overflow: hidden;}.banner-container-swiper {border: 2px solid rgba(255, 126, 95, 0.35);border-radius: 20px;box-shadow: 0 8px 24px rgba(231, 76, 60, 0.08);background: #fff;overflow: hidden;}#homepageSwiper {width: 100%;height: 240px;}@media (min-width: 768px) {#homepageSwiper { height: 300px; }}#homepageSwiper .swiper-slide {display: flex;align-items: stretch;justify-content: center;}#homepageSwiper .swiper-slide img {width: 100%;height: 100%;object-fit: cover;}#homepageSwiper .swiper-pagination-bullet {background: rgba(0,0,0,0.25);opacity: 1;}#homepageSwiper .swiper-pagination-bullet-active {background: var(--accent-color);}.homepage-banner-img {width: 100%;height: 240px;object-fit: cover;border-radius: var(--radius-lg);display: block;border: 1px solid var(--border-color);box-shadow: var(--shadow-lg);transition: all var(--transition-slow);cursor: pointer;}.homepage-banner-img:hover {transform: scale(1.01);box-shadow: var(--shadow-xl), 0 20px 40px rgba(0, 0, 0, 0.15);}@media (min-width: 768px) {.homepage-banner-img {height: 300px;}}.banner-track {display: flex;gap: 16px;overflow-x: auto;scroll-snap-type: x mandatory;padding-top: 12px;padding-bottom: 8px;scroll-behavior: smooth;}.banner-track::-webkit-scrollbar {height: 6px;}.banner-track::-webkit-scrollbar-thumb {background: rgba(0, 0, 0, 0.15);border-radius: 999px;}.banner-track img {scroll-snap-align: start;background: var(--card-background);border: 1px solid var(--border-color);border-radius: var(--radius-lg);box-shadow: var(--shadow-md);width: clamp(220px, 70vw, 480px);height: 200px;flex: 0 0 auto;object-fit: cover;transition: all var(--transition-normal);}.banner-track img:hover {transform: scale(1.02);box-shadow: var(--shadow-lg);}@media (min-width: 768px) {.banner-track img {height: 320px;}}.notice-body table {width: 100%;border-collapse: collapse;}.notice-body tbody tr {border-bottom: 1px solid var(--border-color);}.notice-body th {text-align: left;color: var(--text-muted);width: 140px;padding: 10px 14px;}.notice-body td {font-weight: 700;color: var(--text-color);padding: 10px 14px;}.topup-widget {margin-top: 20px;background: var(--card-background);color: var(--text-color);padding: 16px;border-radius: var(--radius-lg);border: 1px solid var(--border-color);box-shadow: var(--shadow-sm);}.topup-widget h3 {color: var(--primary-color-dark);margin-bottom: 14px;display: flex;align-items: center;gap: 8px;}.topup-tabs-card {background: var(--card-background);border: 1px solid var(--border-color);border-radius: var(--radius-lg);box-shadow: var(--shadow-md);overflow: hidden;transition: all var(--transition-normal);}.topup-tabs-card:hover {box-shadow: var(--shadow-lg);}.topup-tabs-card .tab-menu {display: flex;gap: 0;padding: 0;background: var(--background-color);border-bottom: 1px solid var(--border-color);}.topup-tabs-card .tab-menu button {flex: 1;padding: 18px;border: none;border-bottom: 3px solid transparent;border-radius: 0;background: transparent;color: var(--text-muted);font-weight: 700;cursor: pointer;transition: all var(--transition-fast);display: flex;align-items: center;justify-content: center;gap: 8px;}.topup-tabs-card .tab-menu button:hover {color: var(--accent-color);background: rgba(255, 107, 53, 0.05);}.topup-tabs-card .tab-menu button.active {background: var(--card-background);color: var(--accent-color);border-bottom-color: var(--accent-color);}.topup-tabs-card .tab-content {padding: 24px;}.card-deposit-form label {display: block;font-weight: 600;margin: 10px 0 8px;color: var(--text-color);}.card-deposit-form input,.card-deposit-form select {width: 100%;padding: 14px 16px;border: 2px solid var(--border-color);border-radius: var(--radius-md);margin: 6px 0 12px;font-size: 15px;transition: all var(--transition-fast);}.card-deposit-form input:focus,.card-deposit-form select:focus {outline: none;border-color: var(--accent-color);box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.1);}.card-deposit-form button {width: 100%;}.hamburger-menu {position: fixed;inset: 0;background: rgba(0, 0, 0, 0.5);display: none;z-index: 1001;backdrop-filter: blur(4px);}.hamburger-menu.open {display: block;}.hamburger-menu .hamburger-panel {position: fixed;right: 16px;top: 84px;width: clamp(260px, 75vw, 320px);max-height: 75vh;background: var(--card-background);border: 1px solid var(--border-color);border-radius: var(--radius-lg);box-shadow: var(--shadow-xl);overflow-y: auto;transform: scale(0.95) translateX(20px);opacity: 0;transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);}.hamburger-menu.open .hamburger-panel {transform: scale(1) translateX(0);opacity: 1;}.hamburger-menu .menu-item {display: flex;align-items: center;justify-content: space-between;gap: 12px;padding: 16px 20px;color: var(--text-color);text-decoration: none;transition: all var(--transition-fast);border-bottom: 1px solid var(--border-color);}.hamburger-menu .menu-item:last-child {border-bottom: none;}.hamburger-menu .menu-item:hover {background: linear-gradient(135deg, var(--primary-color-light) 0%, #fff5f3 100%);color: var(--primary-color);padding-left: 24px;}.menu-user {padding: 16px 20px;border-bottom: 1px solid var(--border-color);background: var(--background-color);}.menu-user .label {color: var(--text-muted);font-size: 13px;}.menu-user .balance {color: var(--primary-color);font-weight: 800;font-size: 20px;}.menu-section-title {padding: 14px 20px;font-weight: 800;color: var(--accent-color);text-transform: uppercase;font-size: 12px;letter-spacing: 1px;background: var(--background-color);}.menu-divider {height: 1px;background: var(--border-color);margin: 8px 0;}.menu-item {display: flex;align-items: center;justify-content: space-between;gap: 10px;padding: 14px 18px;color: var(--text-color);text-decoration: none;border-radius: var(--radius-md);transition: all var(--transition-fast);}.menu-item:hover {background: var(--primary-color-light);}.menu-item:visited {color: var(--text-color);}.menu-item i.leading {color: var(--accent-color);margin-right: 10px;width: 20px;text-align: center;}.hamburger-menu .menu-item span {flex: 1;}.menu-item .arrow {color: var(--text-muted);font-size: 12px;}.menu-sep {height: 1px;background: var(--border-color);margin: 8px 0;}.topup-list {display: grid;gap: 12px;}.topup-item {display: flex;align-items: center;justify-content: space-between;background: var(--card-background);border: 1px solid var(--border-color);border-radius: var(--radius-md);padding: 14px 16px;transition: all var(--transition-fast);}.topup-item:hover {border-color: var(--accent-color);box-shadow: var(--shadow-sm);transform: translateX(4px);}.topup-rank {width: 36px;height: 36px;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-weight: 800;color: #fff;font-size: 14px;}.topup-rank.r1 {background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%);box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);animation: rankGold 2s ease-in-out infinite;}@keyframes rankGold {0%,100% {transform: scale(1);}50% {transform: scale(1.1);}}.topup-rank.r2 {background: linear-gradient(135deg, #c0c0c0 0%, #a8a8a8 100%);}.topup-rank.r3 {background: linear-gradient(135deg, #cd7f32 0%, #b87333 100%);}.topup-rank.r4 {background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);}.topup-rank.r5 {background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);}.topup-user {flex: 1;padding-left: 14px;font-weight: 600;}.topup-amount {background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);color: #fff;font-weight: 700;padding: 8px 14px;border-radius: var(--radius-md);font-size: 13px;}@keyframes spin {from {transform: rotate(0deg);}to {transform: rotate(360deg);}}.rotating {animation: spin 2s linear infinite;display: inline-block;}.checkout-page {padding: 24px 0;}h2 {color: var(--primary-color-dark);text-align: center;margin-bottom: 32px;font-size: 2em;position: relative;display: inline-block;width: 100%;padding-bottom: 16px;}h2::after {content: "";position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);width: 80px;height: 4px;background: var(--accent-gradient);border-radius: 2px;transition: width var(--transition-normal);}h2:hover::after {width: 120px;}h2 i {margin-right: 8px;color: var(--accent-color);animation: iconBounce 2s ease-in-out infinite;}@keyframes iconBounce {0%,100% {transform: translateY(0);}50% {transform: translateY(-4px);}}.checkout-grid {display: grid;grid-template-columns: 2fr 3fr;gap: 32px;align-items: flex-start;}@media (max-width: 900px) {.checkout-grid {grid-template-columns: 1fr;}}.checkout-product-info,.checkout-form-container {background: var(--card-background);padding: 28px;border-radius: var(--radius-lg);box-shadow: var(--shadow-md);border: 1px solid var(--border-color);transition: all var(--transition-normal);}.checkout-product-info:hover,.checkout-form-container:hover {box-shadow: var(--shadow-lg);}.checkout-product-info h3 {color: var(--primary-color-dark);margin-bottom: 20px;display: flex;align-items: center;gap: 8px;}.checkout-form-container h3 {color: var(--accent-color);margin-bottom: 20px;display: flex;align-items: center;gap: 8px;}.info-item {display: flex;justify-content: space-between;padding: 12px 0;border-bottom: 1px dashed var(--border-color);font-size: 15px;}.info-item:last-child {border-bottom: none;}.total-row {margin-top: 16px;border-top: 2px solid var(--primary-color-light);padding-top: 16px;}.highlight {font-size: 1.2em;font-weight: 800;}.text-danger {color: var(--primary-color);}.text-success {color: var(--success-color);}.checkout-form-container label {display: block;margin-top: 12px;margin-bottom: 6px;font-weight: 600;}.checkout-form-container input[type="tel"],.checkout-form-container textarea {width: 100%;padding: 14px 16px;margin-bottom: 14px;border: 2px solid var(--border-color);border-radius: var(--radius-md);font-size: 15px;transition: all var(--transition-fast);}.checkout-form-container input:focus,.checkout-form-container textarea:focus {outline: none;border-color: var(--accent-color);box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.1);}.form-input,.form-select {width: 100%;padding: 14px 16px;border: 2px solid var(--border-color);border-radius: var(--radius-md);font-size: 15px;background: #fff;transition: all var(--transition-fast);}.form-input:focus,.form-select:focus {outline: none;border-color: var(--accent-color);box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.12);}.form-select {appearance: none;-webkit-appearance: none;-moz-appearance: none;background-image: linear-gradient(135deg, #fff 0%, #fff 100%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23ff6b35' d='M5.5 7.5l4.5 4.5 4.5-4.5z'/%3E%3C/svg%3E");background-repeat: no-repeat, no-repeat;background-position: right 12px center, right 12px center;background-size: auto, 16px;}.option-group {display: flex;flex-wrap: wrap;gap: 8px;}.option-pill {padding: 10px 14px;border: 2px solid var(--accent-color);color: var(--accent-color);background: #fff;border-radius: 999px;font-weight: 700;cursor: pointer;transition: all var(--transition-fast);}.option-pill:hover {transform: translateY(-1px);box-shadow: 0 4px 10px rgba(255, 107, 53, 0.15);}.option-pill.active {background: var(--accent-color);color: #fff;box-shadow: var(--shadow-sm);}.admin-page-container {padding-top: 24px;padding-bottom: 48px;}.admin-tabs {background: var(--card-background);border-radius: var(--radius-lg);box-shadow: var(--shadow-lg);overflow: hidden;border: 1px solid var(--border-color);}.tab-menu {display: flex;flex-wrap: wrap;border-bottom: 1px solid var(--border-color);background: linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%);padding: 0;}.tab-menu button,.tab-menu .tab-button {flex-grow: 1;background: none;border: none;padding: 18px 16px;font-size: 13px;font-weight: 700;cursor: pointer;color: var(--text-muted);border-bottom: 3px solid transparent;transition: all var(--transition-normal);text-transform: uppercase;letter-spacing: 0.3px;display: flex;align-items: center;justify-content: center;gap: 8px;position: relative;}.tab-menu button::after,.tab-menu .tab-button::after {content: "";position: absolute;bottom: 0;left: 50%;width: 0;height: 3px;background: var(--accent-gradient);transition: all var(--transition-normal);transform: translateX(-50%);}.tab-menu button:hover::after,.tab-menu .tab-button:hover::after {width: 80%;}.tab-menu button i,.tab-menu .tab-button i {font-size: 16px;}.tab-menu button:hover,.tab-menu .tab-button:hover {color: var(--accent-color);background: rgba(255, 107, 53, 0.05);}.tab-menu button.active,.tab-menu .tab-button.active {color: var(--accent-color);border-bottom-color: var(--accent-color);background: var(--card-background);}.tab-menu button.active::after,.tab-menu .tab-button.active::after {width: 100%;}.history-section h2 {display: flex;align-items: center;gap: 10px;font-size: 1.8rem;font-weight: 800;color: var(--primary-red);margin-bottom: 12px;padding-bottom: 10px;border-bottom: 3px solid var(--primary-red);}.history-section h2 i {color: var(--primary-red);}.history-section .tab-menu {display: none; }.history-tabs {display: flex;justify-content: space-around;background: #fff;padding: 10px;border-radius: 15px;margin-bottom: 20px;box-shadow: 0 4px 6px rgba(0,0,0,0.1);list-style: none;}.tab-item {padding: 10px 15px;cursor: pointer;font-weight: bold;color: #666;border-bottom: 3px solid transparent;background: none;border: none;outline: none;font-size: 14px;transition: all 0.3s;}.tab-item.active {color: #e74c3c; border-bottom: 3px solid #e74c3c;}.tab-item:hover {color: #e74c3c;}.code-card {display: flex;align-items: center;background: #fff;border-radius: 15px;padding: 15px;margin-bottom: 15px;box-shadow: 0 2px 10px rgba(0,0,0,0.05);border: 1px solid #f0f0f0;transition: transform 0.2s;}.code-card:hover {transform: translateY(-2px);box-shadow: 0 4px 15px rgba(0,0,0,0.1);}.code-thumb {width: 60px;height: 60px;border-radius: 10px;overflow: hidden;flex-shrink: 0;background: #f9f9f9;display: flex;align-items: center;justify-content: center;border: 1px solid #eee;}.code-thumb img {width: 100%;height: 100%;object-fit: cover;}.code-info {flex-grow: 1;margin-left: 15px;min-width: 0;}.code-name {font-size: 16px;font-weight: bold;color: #333;display: block;margin-bottom: 4px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}.code-meta {font-size: 13px;color: #888;}.code-actions {display: flex;flex-direction: column;align-items: flex-end;gap: 8px;margin-left: 10px;}.code-price {color: #e74c3c;font-weight: bold;font-size: 15px;}.btn-download {background: linear-gradient(to right, #ff416c, #ff4b2b); color: #fff !important;padding: 8px 20px;border-radius: 20px;text-decoration: none;font-size: 13px;font-weight: bold;transition: 0.3s;text-align: center;display: inline-block;line-height: 1.2;border: none;}.btn-download:hover {opacity: 0.9;box-shadow: 0 4px 10px rgba(255, 65, 108, 0.3);color: #fff !important;}.btn-expired {background: #ccc;color: #fff;padding: 8px 20px;border-radius: 20px;font-size: 13px;font-weight: 600;cursor: not-allowed;display: inline-block;}.btn-download-red {background: linear-gradient(to right, #ff416c, #ff4b2b);color: #fff !important;padding: 8px 16px;border-radius: 20px;text-decoration: none;font-weight: 700;font-size: 12.5px;display: inline-block;box-shadow: 0 4px 12px rgba(255, 75, 43, 0.25);}.btn-disabled {background: #ccc;color: #fff;padding: 10px 20px;border-radius: 25px;font-weight: 600;cursor: not-allowed;display: inline-block;border: none;}.expiry-text {color: #ff0000;font-size: 11px;margin-top: 5px;}.code-card-horizontal {display: flex;background: #fff;border-radius: 15px;padding: 15px;margin-bottom: 15px;border: 1px solid #eee;align-items: center;}.code-card-horizontal img {width: 80px;height: 80px;border-radius: 10px;object-fit: cover;margin-right: 15px;}@media (max-width: 600px) {.code-card {flex-direction: column;align-items: flex-start;}.code-thumb {width: 100%;height: 120px;margin-bottom: 10px;}.code-info {margin-left: 0;width: 100%;margin-bottom: 10px;}.code-actions {width: 100%;flex-direction: row;justify-content: space-between;align-items: center;margin-left: 0;}}.tab-content-wrapper {padding: 32px;}.tab-content h3 {color: var(--text-color);margin-bottom: 24px;font-weight: 700;display: flex;align-items: center;gap: 10px;padding-bottom: 14px;border-bottom: 2px solid var(--border-color);font-size: 1.3em;}.tab-content h3 i {color: var(--accent-color);font-size: 1.1em;}.section-box {background: var(--card-background);border: 1px solid var(--border-color);border-radius: var(--radius-lg);padding: 24px;margin-bottom: 24px;box-shadow: var(--shadow-sm);transition: all var(--transition-normal);}.section-box:hover {box-shadow: var(--shadow-md);border-color: rgba(255, 107, 53, 0.2);}.section-header {font-weight: 700;color: var(--text-color);background: linear-gradient(135deg, var(--background-color) 0%, #f5f5f5 100%);border: 1px solid var(--border-color);border-radius: var(--radius-md);padding: 16px 18px;margin-bottom: 18px;display: flex;align-items: center;gap: 10px;}.section-header i {color: var(--accent-color);font-size: 1.1em;}.admin-card-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));gap: 20px;}.admin-card {background: var(--card-background);border: 1px solid var(--border-color);border-radius: var(--radius-lg);padding: 20px;box-shadow: var(--shadow-sm);transition: all var(--transition-normal);position: relative;overflow: hidden;}.admin-card::before {content: "";position: absolute;top: 0;left: 0;width: 4px;height: 100%;background: var(--accent-gradient);opacity: 0;transition: opacity var(--transition-normal);}.admin-card:hover::before {opacity: 1;}.admin-card:hover {transform: translateY(-4px);box-shadow: var(--shadow-lg);border-color: rgba(255, 107, 53, 0.3);}.admin-card-header {display: flex;align-items: center;justify-content: space-between;gap: 12px;font-weight: 700;color: var(--text-color);margin-bottom: 14px;padding-bottom: 12px;border-bottom: 1px solid var(--border-color);}.admin-card-body {display: grid;gap: 10px;font-size: 14px;}.admin-card-actions {display: flex;gap: 12px;margin-top: 16px;padding-top: 14px;border-top: 1px solid var(--border-color);}.admin-inline-select {width: 100%;padding: 10px 12px;border: 2px solid var(--border-color);border-radius: var(--radius-md);transition: all var(--transition-fast);}.admin-inline-select:focus {outline: none;border-color: var(--accent-color);}.tab-content form {max-width: 100%;padding: 24px;border: 1px solid var(--border-color);border-radius: var(--radius-lg);background: var(--background-color);}.tab-content label {display: block;margin-top: 12px;margin-bottom: 6px;font-weight: 600;color: var(--text-color);font-size: 14px;}.tab-content input[type="text"],.tab-content input[type="number"],.tab-content input[type="file"],.tab-content input[type="url"],.tab-content input[type="password"],.tab-content input[type="email"],.tab-content input[type="datetime-local"],.tab-content input[type="date"],.tab-content select,.tab-content textarea {width: 100%;padding: 12px 14px;margin-bottom: 12px;border: 2px solid var(--border-color);border-radius: var(--radius-md);font-size: 14px;transition: all var(--transition-fast);background: var(--card-background);}.tab-content input:focus,.tab-content select:focus,.tab-content textarea:focus {outline: none;border-color: #3498db;box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.15);}table.history-content,.history-content table,.table {width: 100%;border-collapse: collapse;background: var(--card-background);border: 1px solid var(--border-color);border-radius: var(--radius-lg);overflow: hidden;box-shadow: var(--shadow-sm);}table.history-content thead th,.history-content thead th,.table thead th {background: linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%);color: var(--text-color);padding: 16px 18px;text-align: left;font-weight: 700;border-bottom: 2px solid var(--border-color);font-size: 13px;text-transform: uppercase;letter-spacing: 0.5px;}table.history-content tbody td,.history-content tbody td,.table tbody td {padding: 16px 18px;border-bottom: 1px solid var(--border-color);font-size: 14px;transition: all var(--transition-fast);}table.history-content tbody tr:hover,.history-content tbody tr:hover,.table tbody tr:hover {background: linear-gradient(135deg, var(--primary-color-light) 0%, #fff5f3 100%);}table.history-content tbody tr:last-child td,.history-content tbody tr:last-child td,.table tbody tr:last-child td {border-bottom: none;}.status-completed,.status-success {color: var(--success-color);font-weight: 700;text-transform: uppercase;background: var(--success-light);padding: 6px 14px;border-radius: var(--radius-xl);font-size: 12px;display: inline-block;}.status-pending,.status-processing {color: var(--warning-color);font-weight: 700;text-transform: uppercase;background: var(--warning-light);padding: 6px 14px;border-radius: var(--radius-xl);font-size: 12px;display: inline-block;}.status-failed,.status-cancelled {color: var(--primary-color);font-weight: 700;text-transform: uppercase;background: var(--primary-color-light);padding: 6px 14px;border-radius: var(--radius-xl);font-size: 12px;display: inline-block;}.status-shipping {color: #1d4ed8;font-weight: 700;text-transform: uppercase;background: rgba(59, 130, 246, 0.12);padding: 6px 14px;border-radius: var(--radius-xl);font-size: 12px;display: inline-flex;align-items: center;gap: 8px;}.status-out-delivery {color: #c2410c;font-weight: 700;text-transform: uppercase;background: rgba(251, 146, 60, 0.14);padding: 6px 14px;border-radius: var(--radius-xl);font-size: 12px;display: inline-flex;align-items: center;gap: 8px;position: relative;overflow: hidden;}.status-out-delivery i {position: relative;animation: badgeVehicle 1.6s ease-in-out infinite;}.status-out-delivery::before {content: "";position: absolute;left: 8px;right: 8px;bottom: 4px;height: 2px;border-radius: 999px;background: rgba(255, 255, 255, 0.45);}.status-out-delivery::after {content: "...";margin-left: 4px;font-weight: 900;letter-spacing: 1px;animation: dotBlink 1s steps(3, end) infinite;}@keyframes badgeVehicle {0% {transform: translateX(-2px);}50% {transform: translateX(8px);}100% {transform: translateX(-2px);}}@keyframes dotBlink {0% {opacity: 0.2;}50% {opacity: 1;}100% {opacity: 0.2;}}.shipping-overlay {position: fixed;inset: 0;z-index: 2500;display: flex;align-items: flex-end;justify-content: center;pointer-events: none;}.shipping-scene {position: relative;width: 100%;max-width: 480px;margin: 0 auto 40px;padding: 18px 18px 22px;border-radius: 20px;box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);color: #fff;overflow: hidden;pointer-events: auto;}.shipping-truck-scene {background: radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.18), transparent 55%),linear-gradient(135deg, #111827, #1f2937 45%, #0f172a);}.shipping-bike-scene {background: radial-gradient(circle at 10% 0%, rgba(251, 191, 36, 0.28), transparent 55%),linear-gradient(135deg, #7c2d12, #c2410c 45%, #9a3412);}.shipping-road {position: relative;width: 140%;height: 46px;background: linear-gradient(180deg, #111827, #020617);border-radius: 999px;box-shadow: 0 -6px 14px rgba(0, 0, 0, 0.55);margin: 32px -20% 0;overflow: hidden;}.shipping-road::before {content: "";position: absolute;inset: 50% 0 auto;height: 4px;background-image: repeating-linear-gradient(to right,rgba(248, 250, 252, 0.9) 0,rgba(248, 250, 252, 0.9) 32px,transparent 32px,transparent 52px);transform: translateY(-50%);opacity: 0.75;animation: roadScroll 1.6s linear infinite;}@keyframes roadScroll {from {background-position-x: 0;}to {background-position-x: -84px;}}.shipping-vehicle {position: absolute;left: 10%;bottom: 46px;font-size: 42px;color: #f9fafb;text-shadow: 0 8px 18px rgba(0, 0, 0, 0.4);animation: vehicleRun 2.4s ease-in-out infinite;}.shipping-vehicle.truck {font-size: 48px;}.shipping-vehicle.bike {font-size: 38px;}@keyframes vehicleRun {0% {transform: translateX(-8px);}50% {transform: translateX(40px);}100% {transform: translateX(-8px);}}.shipping-cloud {position: absolute;top: 10px;width: 80px;height: 30px;background: rgba(249, 250, 251, 0.9);border-radius: 999px;filter: blur(0.3px);}.shipping-cloud::before,.shipping-cloud::after {content: "";position: absolute;background: inherit;border-radius: inherit;}.shipping-cloud::before {width: 40px;height: 40px;top: -16px;left: 8px;}.shipping-cloud::after {width: 34px;height: 34px;top: -10px;right: 4px;}.shipping-cloud.cloud-1 {left: 6%;animation: cloudDrift1 10s linear infinite;}.shipping-cloud.cloud-2 {left: 40%;top: 4px;opacity: 0.85;animation: cloudDrift2 14s linear infinite;}.shipping-cloud.cloud-3 {left: 72%;top: 18px;opacity: 0.7;animation: cloudDrift3 18s linear infinite;}@keyframes cloudDrift1 {from {transform: translateX(-18px);}to {transform: translateX(26px);}}@keyframes cloudDrift2 {from {transform: translateX(-16px);}to {transform: translateX(20px);}}@keyframes cloudDrift3 {from {transform: translateX(-10px);}to {transform: translateX(16px);}}.shipping-text {margin-top: 18px;font-size: 14px;line-height: 1.6;font-weight: 500;color: #e5e7eb;text-shadow: 0 1px 2px rgba(15, 23, 42, 0.8);}.shipping-bike-scene .shipping-text {color: #fff7ed;}.main-footer {background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);color: #fff;padding: 32px 0;text-align: center;position: relative;overflow: hidden;}.main-footer::before {content: "";position: absolute;top: 0;left: 0;right: 0;height: 3px;background: var(--accent-gradient);}.footer-pre-text {margin-bottom: 12px;opacity: 0.9;font-size: 15px;}.footer-contact-links {margin-top: 16px;display: flex;justify-content: center;gap: 20px;flex-wrap: wrap;}.footer-contact-links a {color: #fff;text-decoration: none;display: flex;align-items: center;gap: 8px;padding: 10px 20px;background: rgba(255, 255, 255, 0.1);border-radius: var(--radius-xl);transition: all var(--transition-normal);}.footer-contact-links a:hover {background: var(--accent-gradient);transform: translateY(-2px);}.footer-contact-links #footer-facebook {color: #4299e1;}.footer-contact-links #footer-zalo {color: #00b5ff;} .iphone-section h2 {font-weight: 900;color: var(--text-color);margin-bottom: 12px;display: flex;align-items: center;gap: 8px;}.iphone-grid {display: grid;grid-template-columns: repeat(2, 1fr);gap: 24px;margin-top: 12px;}.iphone-grid .product-card {text-align: center;display: flex;flex-direction: column;height: auto;overflow: visible;padding: 12px 12px 8px;}.iphone-grid .iphone-meta {position: absolute;inset: 8px 8px auto 8px;display: flex;align-items: center;justify-content: space-between;font-size: 12px;font-weight: 700;z-index: 2;pointer-events: none;}.iphone-grid .iphone-stock,.iphone-grid .iphone-sold {display: inline-flex;align-items: center;gap: 4px;padding: 4px 12px;border-radius: 999px;color: #ffffff;line-height: 1.2;letter-spacing: 0.02em;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);}.iphone-grid .iphone-stock {background: rgba(31, 41, 55, 0.75);}.iphone-grid .iphone-sold {background: rgba(220, 38, 38, 0.9);}.iphone-grid .iphone-price-wrap {margin-top: 6px;display: flex;flex-direction: column;align-items: center;gap: 4px;}.iphone-grid .product-price-original {font-size: 13px;color: #9ca3af;text-decoration: line-through;}.iphone-grid .card-title {margin: 0 auto 8px;color: #1f2937;font-weight: 900;background: none;padding: 0;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;line-height: 1.35;min-height: calc(1.35em * 2);}.iphone-grid .product-hero {flex: 0 0 auto;}.iphone-grid .product-price {margin-bottom: 6px;}.iphone-grid .iphone-price-wrap .product-price {margin-bottom: 0;}.iphone-grid .iphone-card-footer {display: flex;align-items: center;justify-content: space-between;margin-top: 6px;font-size: 12px;color: #4b5563;}.iphone-grid .product-sold {font-weight: 600;}.iphone-grid .qty-label {font-weight: 600;margin-right: 8px;}.iphone-grid .iphone-total {margin-top: 4px;font-size: 13px;font-weight: 700;color: #b91c1c;}.iphone-grid .qty-selector {display: inline-flex;align-items: center;border-radius: 999px;border: 1px solid #e5e7eb;background: #f9fafb;overflow: hidden;}.iphone-grid .qty-btn {width: 28px;height: 28px;border: none;background: transparent;font-weight: 700;color: #4b5563;cursor: pointer;}.iphone-grid .qty-input {width: 40px;border: none;background: transparent;text-align: center;font-size: 13px;color: #111827;}.iphone-grid .qty-input:focus {outline: none;}.iphone-grid .cta-button {width: 100%;margin-top: 4px;margin-bottom: 4px;padding: 12px 24px;font-size: 16px;}.iphone-grid .product-card:hover {transform: translateY(-8px);box-shadow: 0 20px 40px rgba(0,0,0,0.12);}.iphone-grid .product-card:active {transform: scale(0.96);}.iphone-grid .cta-button:hover {transform: translateY(-3px) scale(1.03);box-shadow: 0 18px 36px rgba(255, 126, 95, 0.35);}.product-hero {position: relative;padding: 0;border-radius: 16px;overflow: hidden;}.product-image {width: 100%;height: 300px;object-fit: cover;margin-bottom: 4px;}@media (max-width: 768px) {.iphone-grid {gap: 16px;}.iphone-grid .product-card {padding: 10px 10px 6px;}.iphone-grid .card-title {font-size: 13px;-webkit-line-clamp: 2;min-height: calc(1.35em * 2);}.iphone-grid .iphone-meta {inset: 6px 6px auto 6px;font-size: 12px;}.product-image {height: 220px;object-fit: contain;}.iphone-grid .cta-button {padding: 10px 16px;font-size: 14px;}}.auth-modal-overlay {position: fixed;inset: 0;background: rgba(0, 0, 0, 0.6);backdrop-filter: blur(8px);z-index: 2000;display: flex;align-items: center;justify-content: center;animation: modalFadeIn 0.3s ease;}.auth-modal-content {background: var(--card-background);border-radius: var(--radius-lg);max-width: 480px;width: 90%;max-height: 90vh;overflow-y: auto;box-shadow: var(--shadow-xl);animation: modalSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);position: relative;}.auth-card {padding: 28px;}.input-group {margin-bottom: 16px;}.input-group label {display: block;margin-bottom: 8px;font-weight: 600;color: var(--text-color);font-size: 14px;}.input-group input {width: 100%;padding: 14px 16px;border: 2px solid var(--border-color);border-radius: var(--radius-md);font-size: 15px;transition: all var(--transition-fast);}.input-group input:focus {outline: none;border-color: var(--accent-color);box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.1);}.auth-submit-btn {width: 100%;padding: 14px;border: none;border-radius: var(--radius-md);font-weight: 700;font-size: 15px;cursor: pointer;transition: all var(--transition-normal);}.auth-submit-btn.primary-bg {background: var(--accent-gradient);color: #fff;box-shadow: 0 4px 12px rgba(255, 107, 53, 0.35);}.auth-submit-btn.primary-bg:hover {transform: translateY(-2px);box-shadow: 0 6px 16px rgba(255, 107, 53, 0.45);}.auth-submit-btn.secondary-bg {background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);color: #fff;box-shadow: 0 4px 12px rgba(39, 174, 96, 0.35);}.auth-submit-btn.secondary-bg:hover {transform: translateY(-2px);box-shadow: 0 6px 16px rgba(39, 174, 96, 0.45);}.message {padding: 14px 16px;border-radius: var(--radius-md);margin-bottom: 16px;font-weight: 600;text-align: center;}.message.error {background: linear-gradient(135deg, #ffecec 0%, #fff5f5 100%);color: #c0392b;border: 1px solid #ffd5d5;}.message.success {background: linear-gradient(135deg, #ecfff0 0%, #f0fff4 100%);color: #27ae60;border: 1px solid #d4f8df;}.message.hidden {display: none;}.swal-payment {width: 90%;max-width: 420px;max-height: 85vh;overflow-y: auto;border-radius: var(--radius-lg) !important;}.payment-confirm {width: 100%;}.payment-confirm-btn,.payment-cancel-btn {display: inline-block;min-width: 120px;padding: 10px 16px;border-radius: var(--radius-md);margin-top: 8px;font-weight: 700;}.chatbot-fab {position: fixed;right: 16px;bottom: 16px;z-index: 1900;width: 56px;height: 56px;border-radius: 50%;background: var(--accent-gradient);color: #fff;display: flex;align-items: center;justify-content: center;font-size: 24px;cursor: pointer;box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);border: 3px solid #fff;}.chatbot-panel {position: fixed;right: 16px;bottom: 80px;z-index: 1900;width: clamp(300px, 85vw, 380px);max-height: 75vh;background: var(--card-background);border: 1px solid var(--border-color);border-radius: var(--radius-lg);box-shadow: var(--shadow-xl);display: none;overflow: hidden;}.chatbot-panel.open {display: flex;flex-direction: column;animation: chatbotSlideIn 0.3s ease;}@keyframes chatbotSlideIn {from {transform: translateY(20px);opacity: 0;}to {transform: translateY(0);opacity: 1;}}.chatbot-header {display: flex;align-items: center;justify-content: space-between;padding: 14px 16px;font-weight: 700;color: #fff;background: var(--accent-gradient);}.chatbot-body {display: flex;flex-direction: column;gap: 10px;padding: 14px 16px;overflow-y: auto;flex: 1;}.chatbot-quick {display: flex;flex-wrap: wrap;gap: 10px;padding: 12px 16px;border-top: 1px solid var(--border-color);}.chatbot-quick button {background: var(--card-background);color: var(--accent-color);border: 2px solid var(--accent-color);border-radius: var(--radius-xl);padding: 8px 14px;font-weight: 700;font-size: 13px;cursor: pointer;transition: all var(--transition-fast);}.chatbot-quick button:hover {background: var(--accent-color);color: #fff;}.chatbot-msg {display: flex;gap: 10px;align-items: flex-start;}.chatbot-msg .bubble {max-width: 80%;padding: 12px 14px;border-radius: var(--radius-lg);box-shadow: var(--shadow-sm);font-size: 14px;line-height: 1.5;}.chatbot-msg.user .bubble {background: linear-gradient(135deg, #ffecec 0%, #fff5f5 100%);color: #c0392b;margin-left: auto;}.chatbot-msg.bot .bubble {background: var(--background-color);color: var(--text-color);}.chatbot-msg.typing .bubble {background: var(--card-background);border: 1px dashed var(--accent-color);}.typing-dots {display: inline-flex;gap: 4px;align-items: center;}.typing-dots span {width: 8px;height: 8px;border-radius: 50%;background: var(--accent-color);opacity: 0.5;animation: dotsBlink 0.9s infinite;}.typing-dots span:nth-child(2) {animation-delay: 0.2s;}.typing-dots span:nth-child(3) {animation-delay: 0.4s;}@keyframes dotsBlink {0% {opacity: 0.3;transform: translateY(0);}50% {opacity: 1;transform: translateY(-3px);}100% {opacity: 0.3;transform: translateY(0);}}.chatbot-input {display: flex;gap: 10px;padding: 12px 16px;border-top: 1px solid var(--border-color);background: var(--background-color);}.chatbot-input input {flex: 1;padding: 12px 14px;border: 2px solid var(--border-color);border-radius: var(--radius-md);font-size: 14px;transition: all var(--transition-fast);}.chatbot-input input:focus {outline: none;border-color: var(--accent-color);}.chatbot-input button {background: var(--accent-gradient);color: #fff;border: none;border-radius: var(--radius-md);padding: 12px 16px;font-weight: 700;cursor: pointer;transition: all var(--transition-fast);}.chatbot-input button:hover {transform: scale(1.05);}.video-modal-backdrop {position: fixed;inset: 0;background: rgba(0, 0, 0, 0.85);display: none;z-index: 2100;align-items: center;justify-content: center;padding: 20px;backdrop-filter: blur(4px);}.video-modal-backdrop.open {display: flex;}.video-modal {width: clamp(300px, 50vw, 560px);aspect-ratio: 9 / 16;max-height: 85vh;background: #000;border: 2px solid var(--primary);border-radius: var(--radius-lg);box-shadow: var(--shadow-xl), var(--shadow-glow);position: relative;overflow: hidden;display: flex;align-items: stretch;}.video-modal .video-close {position: absolute;right: 12px;top: 12px;border: none;background: rgba(255, 255, 255, 0.9);color: var(--text-color);border-radius: 50%;width: 36px;height: 36px;box-shadow: var(--shadow-md);cursor: pointer;display: flex;align-items: center;justify-content: center;font-size: 18px;transition: all var(--transition-fast);z-index: 10;}.video-modal .video-close:hover {background: #fff;transform: scale(1.1);}.video-modal video,.video-modal iframe {width: 100%;height: 100%;border: 0;display: block;background: #000;}.support-btn {position: fixed;right: 20px;bottom: 90px;z-index: 1900;background: var(--accent-gradient);color: #fff;font-weight: 700;border: none;border-radius: var(--radius-lg);padding: 12px 18px;cursor: pointer;box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);animation: supportFloat 3s ease-in-out infinite;}@keyframes supportFloat {0%,100% {transform: translateY(0);}50% {transform: translateY(-4px);}}.support-btn::after {content: "";position: absolute;left: 50%;transform: translateX(-50%);bottom: -8px;width: 0;height: 0;border-left: 8px solid transparent;border-right: 8px solid transparent;border-top: 10px solid var(--accent-color);}.bot-icon {position: fixed;right: 16px;bottom: 16px;z-index: 1900;width: 64px;height: 64px;border-radius: 50%;background: var(--card-background);border: 3px solid var(--accent-color);display: flex;align-items: center;justify-content: center;color: var(--accent-color);font-size: 24px;box-shadow: 0 6px 20px rgba(255, 107, 53, 0.3);cursor: pointer;transition: all var(--transition-normal);}.bot-icon:hover {transform: scale(1.05);box-shadow: 0 8px 28px rgba(255, 107, 53, 0.4);}.iphone-price-btn {position: fixed;left: 16px;bottom: 16px;z-index: 1900;background: var(--accent-gradient);color: #fff;font-weight: 700;border: none;border-radius: var(--radius-lg);padding: 12px 18px;cursor: pointer;box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);}.iphone-price-panel {position: fixed;left: 16px;bottom: 80px;z-index: 1900;width: clamp(300px, 85vw, 400px);max-height: 75vh;background: var(--card-background);border: 1px solid var(--border-color);border-radius: var(--radius-lg);box-shadow: var(--shadow-xl);display: none;overflow: hidden;}.iphone-price-panel.open {display: flex;flex-direction: column;}.iphone-price-header {display: flex;align-items: center;justify-content: space-between;background: var(--accent-gradient);color: #fff;padding: 14px 16px;font-weight: 800;}.iphone-price-body {padding: 12px 16px;overflow: auto;display: grid;grid-template-columns: 1.4fr 1fr;gap: 14px;align-items: start;}.activation-panel {text-align: center;padding: 20px;}.activation-icon {width: 64px;height: 64px;margin: 0 auto 16px;background: linear-gradient(135deg, var(--info-color) 0%, #2980b9 100%);border-radius: 50%;display: flex;align-items: center;justify-content: center;color: #fff;font-size: 28px;}.activation-title {font-size: 20px;font-weight: 700;color: var(--text-color);margin-bottom: 12px;}.activation-divider {width: 60px;height: 3px;background: var(--accent-gradient);margin: 0 auto 16px;border-radius: 2px;}.activation-content {color: var(--text-muted);font-size: 14px;line-height: 1.6;margin-bottom: 20px;}.activation-content p {margin-bottom: 10px;}.activation-cta .cta-button {width: 100%;}::-webkit-scrollbar {width: 8px;height: 8px;}::-webkit-scrollbar-track {background: var(--background-color);border-radius: 4px;}::-webkit-scrollbar-thumb {background: linear-gradient(180deg, #ccc 0%, #aaa 100%);border-radius: 4px;}::-webkit-scrollbar-thumb:hover {background: linear-gradient(180deg, #bbb 0%, #999 100%);}.loading-spinner {display: inline-block;width: 40px;height: 40px;border: 4px solid var(--border-color);border-top-color: var(--accent-color);border-radius: 50%;animation: spinner 0.8s linear infinite;}@keyframes spinner {to {transform: rotate(360deg);}}.badge {display: inline-block;padding: 4px 10px;border-radius: var(--radius-xl);font-size: 12px;font-weight: 700;text-transform: uppercase;letter-spacing: 0.3px;}.badge-success {background: var(--success-light);color: var(--success-color);}.badge-warning {background: var(--warning-light);color: var(--warning-color);}.badge-danger {background: var(--primary-color-light);color: var(--primary-color);}.badge-info {background: var(--info-light);color: var(--info-color);}[data-tooltip] {position: relative;cursor: help;}[data-tooltip]::after {content: attr(data-tooltip);position: absolute;bottom: 100%;left: 50%;transform: translateX(-50%);padding: 8px 12px;background: var(--text-color);color: #fff;font-size: 12px;border-radius: var(--radius-sm);white-space: nowrap;opacity: 0;visibility: hidden;transition: all var(--transition-fast);z-index: 1000;}[data-tooltip]:hover::after {opacity: 1;visibility: visible;bottom: calc(100% + 8px);}.products-section {padding: 40px 0;}.products-section h2 {margin-bottom: 32px;}.banner-carousel {position: relative;overflow: hidden;width: 100%;padding: 0;}.carousel-track {display: flex;width: 100%;transition: transform 0.4s ease;}.carousel-slide {flex: 0 0 100%;}.carousel-slide img {width: 100%;height: 240px;object-fit: cover;border-radius: var(--radius-lg);border: 1px solid var(--border-color);box-shadow: var(--shadow-lg);transition: transform 0.4s ease;}.carousel-slide img:hover {transform: scale(1.01);}.carousel-dots {position: absolute;left: 0;right: 0;bottom: 10px;display: flex;justify-content: center;gap: 8px;}.carousel-dot {width: 8px;height: 8px;border-radius: 50%;background: rgba(0,0,0,0.25);transition: background 0.2s ease, transform 0.2s ease;}.carousel-dot.active {background: var(--accent-color);transform: scale(1.25);}@media (min-width: 768px) {.carousel-slide img {height: 300px;}}.fit-cover { object-fit: cover; }.fit-contain { object-fit: contain; background: #fff; }.reviews-section {background: linear-gradient(180deg, var(--background-color) 0%, #fff5f3 100%);padding: 48px 0;position: relative;overflow: hidden;}.reviews-section::before {content: "";position: absolute;top: 0;left: 0;right: 0;height: 1px;background: linear-gradient(90deg, transparent, var(--accent-color), transparent);}.reviews-title {text-align: center;margin-bottom: 32px;color: var(--text-color);}.review-list {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 20px;}.review-card {background: var(--card-background);border: 1px solid var(--border-color);border-radius: var(--radius-lg);padding: 24px;box-shadow: var(--shadow-sm);transition: all var(--transition-normal);position: relative;}.review-card::before {content: '"';position: absolute;top: 12px;left: 16px;font-size: 48px;color: var(--primary-color-light);font-family: serif;line-height: 1;}.review-card:hover {transform: translateY(-4px);box-shadow: var(--shadow-lg);}.review-header {display: flex;align-items: center;gap: 12px;margin-bottom: 12px;}.review-avatar {width: 48px;height: 48px;border-radius: 50%;background: var(--accent-gradient);display: flex;align-items: center;justify-content: center;color: #fff;font-weight: 700;font-size: 18px;}.review-info h4 {margin: 0;font-weight: 700;color: var(--text-color);}.review-stars {color: #ffd700;font-size: 14px;}.review-text {color: var(--text-muted);font-size: 14px;line-height: 1.6;}.commitments-section {background: var(--card-background);padding: 48px 0;border-top: 1px solid var(--border-color);}.commitments-title {text-align: center;margin-bottom: 32px;color: var(--text-color);}.commitment-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));gap: 24px;}.commitment-card {background: var(--background-color);border: 1px solid var(--border-color);border-radius: var(--radius-lg);padding: 28px;text-align: center;transition: all var(--transition-normal);position: relative;overflow: hidden;}.commitment-card::before {content: "";position: absolute;top: 0;left: 0;right: 0;height: 3px;background: var(--accent-gradient);transform: scaleX(0);transition: transform var(--transition-normal);}.commitment-card:hover::before {transform: scaleX(1);}.commitment-card:hover {transform: translateY(-6px);box-shadow: var(--shadow-lg);background: var(--card-background);}.commitment-icon {width: 70px;height: 70px;background: var(--accent-gradient);border-radius: 50%;display: flex;align-items: center;justify-content: center;margin: 0 auto 16px;color: white;font-size: 28px;box-shadow: 0 8px 20px rgba(255, 107, 53, 0.3);transition: all var(--transition-normal);}.commitment-card:hover .commitment-icon {transform: scale(1.1) rotate(5deg);}.commitment-text {color: var(--text-color);font-weight: 600;line-height: 1.5;}.auth-modal-overlay {position: fixed;inset: 0;background: rgba(0, 0, 0, 0.6);backdrop-filter: blur(4px);display: none;z-index: 2000;overflow-y: auto;padding: 20px;}.auth-modal-content {max-width: 480px;margin: 5% auto;background: var(--card-background);border-radius: var(--radius-lg);box-shadow: var(--shadow-xl);animation: modalSlideIn 0.3s ease;}.auth-card {background: var(--card-background);border: 1px solid var(--border-color);border-radius: var(--radius-lg);padding: 24px;margin: 0 auto;}.auth-card h3 {color: var(--text-color);font-weight: 700;margin-bottom: 20px;}.input-group {margin-bottom: 16px;}.input-group label {display: block;margin-bottom: 6px;font-weight: 600;color: var(--text-color);font-size: 14px;}.input-group input {width: 100%;padding: 14px 16px;border: 2px solid var(--border-color);border-radius: var(--radius-md);font-size: 15px;transition: all var(--transition-fast);}.input-group input:focus {outline: none;border-color: var(--accent-color);box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.1);}.auth-submit-btn {width: 100%;padding: 14px;border: none;border-radius: var(--radius-md);font-weight: 700;font-size: 15px;cursor: pointer;transition: all var(--transition-normal);}.auth-submit-btn.primary-bg {background: var(--accent-gradient);color: #fff;box-shadow: 0 4px 12px rgba(255, 107, 53, 0.35);}.auth-submit-btn.primary-bg:hover {transform: translateY(-2px);box-shadow: 0 6px 16px rgba(255, 107, 53, 0.45);}.auth-submit-btn.secondary-bg {background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);color: #fff;box-shadow: 0 4px 12px rgba(39, 174, 96, 0.35);}.auth-submit-btn.secondary-bg:hover {transform: translateY(-2px);box-shadow: 0 6px 16px rgba(39, 174, 96, 0.45);}.message {padding: 14px 16px;border-radius: var(--radius-md);margin-bottom: 16px;font-weight: 600;text-align: center;}.message.error {background: linear-gradient(135deg, #ffecec 0%, #fff5f5 100%);color: #c0392b;border: 1px solid #ffd5d5;}.message.success {background: linear-gradient(135deg, #ecfff0 0%, #f0fff4 100%);color: #27ae60;border: 1px solid #d4f8df;}.message.hidden {display: none;}.notice-modal-content {max-width: 520px;}.notice-header {display: flex;align-items: center;justify-content: space-between;padding: 16px 20px;background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);color: white;border-radius: var(--radius-lg) var(--radius-lg) 0 0;}.notice-title {font-weight: 700;display: flex;align-items: center;gap: 8px;}.notice-title i {color: var(--accent-color);}.auth-notice {display: block;margin: 12px 0;padding: 14px 16px;border-radius: var(--radius-md);background: linear-gradient(135deg, #ffecec 0%, #fff5f5 100%);color: #c0392b;font-weight: 600;border: 1px solid #ffd5d5;}.auth-notice.success {background: linear-gradient(135deg, #ecfff0 0%, #f0fff4 100%);color: #27ae60;border-color: #d4f8df;}.form-notice {display: block;margin: 12px 0;padding: 14px 16px;border-radius: var(--radius-md);background: linear-gradient(135deg, #ffecec 0%, #fff5f5 100%);color: #c0392b;font-weight: 600;border: 1px solid #ffd5d5;}.form-notice.success {background: linear-gradient(135deg, #ecfff0 0%, #f0fff4 100%);color: #27ae60;border-color: #d4f8df;}.notice-body {padding: 24px;padding-bottom: 12px;}.notice-body table {width: 100%;border-collapse: collapse;}.notice-body tbody tr {border-bottom: 1px solid var(--border-color);}.notice-body th {text-align: left;color: var(--text-muted);width: 140px;padding: 10px 14px;}.notice-body td {font-weight: 700;color: var(--text-color);padding: 10px 14px;}.notice-image {width: 100%;height: 300px;object-fit: contain;background: var(--background-color);border: 1px solid var(--border-color);border-radius: var(--radius-md);box-shadow: var(--shadow-sm);}.notice-text {text-align: center;font-style: italic;margin-top: 12px;color: var(--text-muted);}.notice-contact {text-align: center;margin-top: 16px;}.notice-telegram {color: #18a7e0;font-weight: 700;}.notice-actions {padding: 16px 24px;display: flex;gap: 12px;justify-content: flex-end;border-top: 1px solid var(--border-color);}.wheel-fab {position: fixed;bottom: 24px;right: 24px;width: 64px;height: 64px;background: var(--accent-gradient);border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 32px;cursor: pointer;box-shadow: 0 8px 25px rgba(255, 107, 53, 0.4);z-index: 999;transition: all var(--transition-normal);animation: wheelFabPulse 2s ease-in-out infinite;}@keyframes wheelFabPulse {0%,100% {transform: scale(1);box-shadow: 0 8px 25px rgba(255, 107, 53, 0.4);}50% {transform: scale(1.1);box-shadow: 0 12px 35px rgba(255, 107, 53, 0.6);}}.wheel-fab:hover {transform: scale(1.15) rotate(15deg);box-shadow: 0 12px 40px rgba(255, 107, 53, 0.6);}.wheel-modal-content {max-width: 600px;}.wheel-credits {text-align: center;margin-bottom: 14px;font-weight: 700;font-size: 16px;color: var(--accent-color);}.wheel-display {position: relative;width: 320px;height: 320px;margin: 0 auto;}.wheel-canvas {position: relative;width: 100%;height: 100%;border-radius: 50%;background: conic-gradient(#d31027 0deg 45deg,#f1c40f 45deg 90deg,#2ecc71 90deg 135deg,#3498db 135deg 180deg,#9b59b6 180deg 225deg,#e74c3c 225deg 270deg,#1abc9c 270deg 315deg,#d31027 315deg 360deg);transition: transform 4s cubic-bezier(0.17, 0.67, 0.12, 0.99);box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 0 0 8px rgba(255, 255, 255, 0.2);}.wheel-seg-text {position: absolute;left: 50%;top: 50%;transform-origin: 50% 50%;color: #fff;font-weight: 800;font-size: 13px;text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);white-space: nowrap;}.wheel-pointer {position: absolute;top: -20px;left: 50%;transform: translateX(-50%);font-size: 28px;color: var(--primary-color);filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));}.tab-content {overflow-x: auto;}.purchase-popup {position: fixed;left: 16px;bottom: 80px;z-index: 950;display: none;max-width: 90vw;background: linear-gradient(135deg, rgba(236, 255, 240, 0.7) 0%, rgba(240, 255, 244, 0.7) 100%);color: #27ae60;border: 1px solid rgba(212, 248, 223, 0.6);backdrop-filter: blur(3px);border-radius: var(--radius-lg);padding: 14px 18px;box-shadow: var(--shadow-lg);font-weight: 700;display: flex;align-items: center;gap: 10px;}.purchase-popup.show {display: flex;opacity: 0.9;animation: popupSlideIn 0.3s ease;}@keyframes popupSlideIn {from {transform: translateY(20px);opacity: 0;}to {transform: translateY(0);opacity: 0.9;}}.purchase-popup .icon {color: #27ae60;font-size: 20px;}.purchase-popup .text {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 80vw;}.topup-btn {background: linear-gradient(135deg, #ff4db0 0%, #ff6bd5 50%, #ff8fe8 100%);border-radius: var(--radius-xl);padding: 12px 20px;font-weight: 800;box-shadow: 0 6px 20px rgba(255, 77, 176, 0.4);border: none;animation: topupGlow 2s ease-in-out infinite;}@keyframes topupGlow {0%,100% {box-shadow: 0 6px 20px rgba(255, 77, 176, 0.4);}50% {box-shadow: 0 8px 30px rgba(255, 77, 176, 0.6);}}.topup-btn:hover {background: linear-gradient(135deg, #ff3fa6 0%, #ff5fc7 50%, #ff7fdc 100%);transform: translateY(-2px);}.topup-btn:active {transform: scale(0.95);box-shadow: 0 6px 16px rgba(255, 77, 176, 0.35);}.topup-btn i {margin-right: 6px;}.card-deposit-form .cta-button {background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-dark) 100%);}.card-deposit-form .cta-button:hover {background: linear-gradient(135deg, var(--primary-color-dark) 0%, #a93226 100%);}.header-bell {background: rgba(255, 255, 255, 0.15);border: none;color: white;width: 44px;height: 44px;border-radius: 50%;cursor: pointer;transition: all var(--transition-normal);display: flex;align-items: center;justify-content: center;font-size: 18px;position: relative;}.header-bell:hover {background: rgba(255, 255, 255, 0.25);transform: scale(1.1);}.header-bell:hover i {animation: bellRing 0.5s ease;}.hamburger-btn {background: rgba(255, 255, 255, 0.15);border: none;color: white;width: 44px;height: 44px;border-radius: var(--radius-md);cursor: pointer;transition: all var(--transition-normal);display: flex;align-items: center;justify-content: center;font-size: 18px;}.hamburger-btn:hover {background: rgba(255, 255, 255, 0.25);transform: rotate(90deg);}.reviews-section {padding: 40px 0;background: linear-gradient(180deg, var(--background-color) 0%, #fff 100%);}.reviews-title {text-align: center;margin-bottom: 32px;color: var(--text-color);}.review-list {display: grid;grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));gap: 20px;}.review-card {background: var(--card-background);border: 1px solid var(--border-color);border-radius: var(--radius-lg);padding: 20px;box-shadow: var(--shadow-sm);transition: all var(--transition-normal);}.review-card:hover {transform: translateY(-4px);box-shadow: var(--shadow-md);}.review-header {display: flex;align-items: center;gap: 12px;margin-bottom: 12px;}.review-avatar {width: 48px;height: 48px;border-radius: 50%;background: var(--accent-gradient);display: flex;align-items: center;justify-content: center;color: #fff;font-weight: 700;font-size: 18px;}.review-info h4 {margin: 0;font-weight: 700;color: var(--text-color);}.review-stars {color: #ffd700;font-size: 14px;}.review-text {color: var(--text-muted);font-size: 14px;line-height: 1.6;}.commitments-section {padding: 40px 0;background: var(--card-background);}.commitments-title {text-align: center;margin-bottom: 32px;color: var(--text-color);}.commitment-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 20px;}.commitment-card {background: var(--background-color);border: 1px solid var(--border-color);border-radius: var(--radius-lg);padding: 24px;text-align: center;transition: all var(--transition-normal);}.commitment-card:hover {transform: translateY(-4px);box-shadow: var(--shadow-md);border-color: var(--accent-color);}.commitment-icon {width: 60px;height: 60px;margin: 0 auto 16px;background: var(--accent-gradient);border-radius: 50%;display: flex;align-items: center;justify-content: center;color: #fff;font-size: 24px;box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);}.commitment-text {color: var(--text-color);font-weight: 600;font-size: 14px;line-height: 1.5;}.auth-modal-overlay {position: fixed;inset: 0;background: rgba(0, 0, 0, 0.6);backdrop-filter: blur(4px);display: none;z-index: 2000;overflow-y: auto;padding: 20px;}.auth-modal-content {max-width: 480px;margin: 5% auto;background: var(--card-background);border-radius: var(--radius-lg);box-shadow: var(--shadow-xl);animation: modalSlideIn 0.3s ease;}.auth-card {background: var(--card-background);border: 1px solid var(--border-color);border-radius: var(--radius-lg);padding: 24px;margin: 0 auto;}.auth-card h3 {color: var(--text-color);font-weight: 700;margin-bottom: 20px;}.input-group {margin-bottom: 16px;}.input-group label {display: block;margin-bottom: 6px;font-weight: 600;color: var(--text-color);font-size: 14px;}.input-group input {width: 100%;padding: 14px 16px;border: 2px solid var(--border-color);border-radius: var(--radius-md);font-size: 15px;transition: all var(--transition-fast);}.input-group input:focus {outline: none;border-color: var(--accent-color);box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.1);}.auth-submit-btn {width: 100%;padding: 14px;border: none;border-radius: var(--radius-md);font-weight: 700;font-size: 15px;cursor: pointer;transition: all var(--transition-normal);}.auth-submit-btn.primary-bg {background: var(--accent-gradient);color: #fff;box-shadow: 0 4px 12px rgba(255, 107, 53, 0.35);}.auth-submit-btn.primary-bg:hover {transform: translateY(-2px);box-shadow: 0 6px 16px rgba(255, 107, 53, 0.45);}.auth-submit-btn.secondary-bg {background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);color: #fff;box-shadow: 0 4px 12px rgba(39, 174, 96, 0.35);}.auth-submit-btn.secondary-bg:hover {transform: translateY(-2px);box-shadow: 0 6px 16px rgba(39, 174, 96, 0.45);}.message {padding: 14px 16px;border-radius: var(--radius-md);margin-bottom: 16px;font-weight: 600;text-align: center;}.message.error {background: linear-gradient(135deg, #ffecec 0%, #fff5f5 100%);color: #c0392b;border: 1px solid #ffd5d5;}.message.success {background: linear-gradient(135deg, #ecfff0 0%, #f0fff4 100%);color: #27ae60;border: 1px solid #d4f8df;}.message.hidden {display: none;}.swal-payment {width: 90%;max-width: 420px;max-height: 85vh;overflow-y: auto;border-radius: var(--radius-lg) !important;}.payment-confirm {width: 100%;}.payment-confirm-btn,.payment-cancel-btn {display: inline-block;min-width: 120px;padding: 10px 16px;border-radius: var(--radius-md);margin-top: 8px;font-weight: 700;}.chatbot-fab {position: fixed;right: 16px;bottom: 16px;z-index: 1900;width: 56px;height: 56px;border-radius: 50%;background: var(--accent-gradient);color: #fff;display: flex;align-items: center;justify-content: center;font-size: 24px;cursor: pointer;box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);border: 3px solid #fff;}.chatbot-panel {position: fixed;right: 16px;bottom: 80px;z-index: 1900;width: clamp(300px, 85vw, 380px);max-height: 75vh;background: var(--card-background);border: 1px solid var(--border-color);border-radius: var(--radius-lg);box-shadow: var(--shadow-xl);display: none;overflow: hidden;}.chatbot-panel.open {display: flex;flex-direction: column;animation: chatbotSlideIn 0.3s ease;}@keyframes chatbotSlideIn {from {transform: translateY(20px);opacity: 0;}to {transform: translateY(0);opacity: 1;}}.chatbot-header {display: flex;align-items: center;justify-content: space-between;padding: 14px 16px;font-weight: 700;color: #fff;background: var(--accent-gradient);}.chatbot-body {display: flex;flex-direction: column;gap: 10px;padding: 14px 16px;overflow-y: auto;flex: 1;}.chatbot-quick {display: flex;flex-wrap: wrap;gap: 10px;padding: 12px 16px;border-top: 1px solid var(--border-color);}.chatbot-quick button {background: var(--card-background);color: var(--accent-color);border: 2px solid var(--accent-color);border-radius: var(--radius-xl);padding: 8px 14px;font-weight: 700;font-size: 13px;cursor: pointer;transition: all var(--transition-fast);}.chatbot-quick button:hover {background: var(--accent-color);color: #fff;}.chatbot-msg {display: flex;gap: 10px;align-items: flex-start;}.chatbot-msg .bubble {max-width: 80%;padding: 12px 14px;border-radius: var(--radius-lg);box-shadow: var(--shadow-sm);font-size: 14px;line-height: 1.5;}.chatbot-msg.user .bubble {background: linear-gradient(135deg, #ffecec 0%, #fff5f5 100%);color: #c0392b;margin-left: auto;}.chatbot-msg.bot .bubble {background: var(--background-color);color: var(--text-color);}.chatbot-msg.typing .bubble {background: var(--card-background);border: 1px dashed var(--accent-color);}.typing-dots {display: inline-flex;gap: 4px;align-items: center;}.typing-dots span {width: 8px;height: 8px;border-radius: 50%;background: var(--accent-color);opacity: 0.5;animation: dotsBlink 0.9s infinite;}.typing-dots span:nth-child(2) {animation-delay: 0.2s;}.typing-dots span:nth-child(3) {animation-delay: 0.4s;}@keyframes dotsBlink {0% {opacity: 0.3;transform: translateY(0);}50% {opacity: 1;transform: translateY(-3px);}100% {opacity: 0.3;transform: translateY(0);}}.chatbot-input {display: flex;gap: 10px;padding: 12px 16px;border-top: 1px solid var(--border-color);background: var(--background-color);}.chatbot-input input {flex: 1;padding: 12px 14px;border: 2px solid var(--border-color);border-radius: var(--radius-md);font-size: 14px;transition: all var(--transition-fast);}.chatbot-input input:focus {outline: none;border-color: var(--accent-color);}.chatbot-input button {background: var(--accent-gradient);color: #fff;border: none;border-radius: var(--radius-md);padding: 12px 16px;font-weight: 700;cursor: pointer;transition: all var(--transition-fast);}.chatbot-input button:hover {transform: scale(1.05);}.video-modal-backdrop {position: fixed;inset: 0;background: rgba(0, 0, 0, 0.85);display: none;z-index: 2100;align-items: center;justify-content: center;padding: 20px;backdrop-filter: blur(4px);}.video-modal-backdrop.open {display: flex;}.video-modal {width: clamp(300px, 50vw, 560px);aspect-ratio: 9 / 16;max-height: 85vh;background: #000;border: 2px solid var(--primary);border-radius: var(--radius-lg);box-shadow: var(--shadow-xl), var(--shadow-glow);position: relative;overflow: hidden;display: flex;align-items: stretch;}.video-modal .video-close {position: absolute;right: 12px;top: 12px;border: none;background: rgba(255, 255, 255, 0.9);color: var(--text-color);border-radius: 50%;width: 36px;height: 36px;box-shadow: var(--shadow-md);cursor: pointer;display: flex;align-items: center;justify-content: center;font-size: 18px;transition: all var(--transition-fast);z-index: 10;}.video-modal .video-close:hover {background: #fff;transform: scale(1.1);}.video-modal video,.video-modal iframe {width: 100%;height: 100%;border: 0;display: block;background: #000;}.support-btn {position: fixed;right: 20px;bottom: 90px;z-index: 1900;background: var(--accent-gradient);color: #fff;font-weight: 700;border: none;border-radius: var(--radius-lg);padding: 12px 18px;cursor: pointer;box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);animation: supportFloat 3s ease-in-out infinite;}@keyframes supportFloat {0%,100% {transform: translateY(0);}50% {transform: translateY(-4px);}}.support-btn::after {content: "";position: absolute;left: 50%;transform: translateX(-50%);bottom: -8px;width: 0;height: 0;border-left: 8px solid transparent;border-right: 8px solid transparent;border-top: 10px solid var(--accent-color);}.bot-icon {position: fixed;right: 16px;bottom: 16px;z-index: 1900;width: 64px;height: 64px;border-radius: 50%;background: var(--card-background);border: 3px solid var(--accent-color);display: flex;align-items: center;justify-content: center;color: var(--accent-color);font-size: 24px;box-shadow: 0 6px 20px rgba(255, 107, 53, 0.3);cursor: pointer;transition: all var(--transition-normal);}.bot-icon:hover {transform: scale(1.05);box-shadow: 0 8px 28px rgba(255, 107, 53, 0.4);}.iphone-price-btn {position: fixed;left: 16px;bottom: 16px;z-index: 1900;background: var(--accent-gradient);color: #fff;font-weight: 700;border: none;border-radius: var(--radius-lg);padding: 12px 18px;cursor: pointer;box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);}.iphone-price-panel {position: fixed;left: 16px;bottom: 80px;z-index: 1900;width: clamp(300px, 85vw, 400px);max-height: 75vh;background: var(--card-background);border: 1px solid var(--border-color);border-radius: var(--radius-lg);box-shadow: var(--shadow-xl);display: none;overflow: hidden;}.iphone-price-panel.open {display: flex;flex-direction: column;}.iphone-price-header {display: flex;align-items: center;justify-content: space-between;background: var(--accent-gradient);color: #fff;padding: 14px 16px;font-weight: 800;}.iphone-price-body {padding: 12px 16px;overflow: auto;display: grid;grid-template-columns: 1.4fr 1fr;gap: 14px;align-items: start;}.activation-panel {text-align: center;padding: 20px;}.activation-icon {width: 64px;height: 64px;margin: 0 auto 16px;background: linear-gradient(135deg, var(--info-color) 0%, #2980b9 100%);border-radius: 50%;display: flex;align-items: center;justify-content: center;color: #fff;font-size: 28px;}.activation-title {font-size: 20px;font-weight: 700;color: var(--text-color);margin-bottom: 12px;}.activation-divider {width: 60px;height: 3px;background: var(--accent-gradient);margin: 0 auto 16px;border-radius: 2px;}.activation-content {color: var(--text-muted);font-size: 14px;line-height: 1.6;margin-bottom: 20px;}.activation-content p {margin-bottom: 10px;}.activation-cta .cta-button {width: 100%;}::-webkit-scrollbar {width: 8px;height: 8px;}::-webkit-scrollbar-track {background: var(--background-color);border-radius: 4px;}::-webkit-scrollbar-thumb {background: linear-gradient(180deg, #ccc 0%, #aaa 100%);border-radius: 4px;}::-webkit-scrollbar-thumb:hover {background: linear-gradient(180deg, #bbb 0%, #999 100%);}.loading-spinner {display: inline-block;width: 20px;height: 20px;border: 3px solid var(--border-color);border-top-color: var(--accent-color);border-radius: 50%;animation: spin 0.8s linear infinite;}.badge {display: inline-block;padding: 4px 10px;border-radius: var(--radius-xl);font-size: 12px;font-weight: 700;text-transform: uppercase;letter-spacing: 0.3px;}.badge-success {background: var(--success-light);color: var(--success-color);}.badge-warning {background: var(--warning-light);color: var(--warning-color);}.badge-danger {background: var(--primary-color-light);color: var(--primary-color);}.badge-info {background: var(--info-light);color: var(--info-color);}[data-tooltip] {position: relative;cursor: help;}[data-tooltip]::after {content: attr(data-tooltip);position: absolute;bottom: 100%;left: 50%;transform: translateX(-50%);padding: 8px 12px;background: var(--text-color);color: #fff;font-size: 12px;border-radius: var(--radius-sm);white-space: nowrap;opacity: 0;visibility: hidden;transition: all var(--transition-fast);z-index: 1000;}[data-tooltip]:hover::after {opacity: 1;visibility: visible;bottom: calc(100% + 8px);}.products-section {padding: 40px 0;}.products-section h2 {margin-bottom: 32px;}.banner-carousel {display: flex;gap: 12px;overflow-x: auto;padding: 12px 0;scroll-snap-type: x mandatory;scroll-behavior: smooth;}.banner-carousel::-webkit-scrollbar {height: 6px;}.banner-carousel::-webkit-scrollbar-thumb {background: rgba(0, 0, 0, 0.15);border-radius: 999px;}.banner-carousel img {scroll-snap-align: start;border-radius: var(--radius-lg);box-shadow: var(--shadow-sm);transition: all var(--transition-normal);}.banner-carousel img:hover {transform: scale(1.02);box-shadow: var(--shadow-md);}@media (max-width: 768px) {.main-header {padding: 14px 0;}.header-content {flex-direction: column;gap: 12px;text-align: center;}.logo a {font-size: 22px;display: block;margin-bottom: 4px;}.header-actions {display: flex;justify-content: center;align-items: center;width: 100%;flex-wrap: wrap;gap: 10px;}.header-bell,.cta-button.topup-btn,.hamburger-btn {margin: 0;}.main-nav {margin-top: 10px;margin-bottom: 10px;display: none;}h2 {font-size: 1.4rem;text-align: center;line-height: 1.4;}.deposit-page h2 i {display: block;margin-bottom: 6px;font-size: 1.8rem;}.deposit-grid,.checkout-grid {grid-template-columns: 1fr;}.checkout-product-info,.checkout-form-container {order: 1;}.checkout-form-container {order: 2;}.tab-menu {overflow-x: auto;flex-wrap: nowrap;-webkit-overflow-scrolling: touch;}.tab-menu button,.tab-menu .tab-button {padding: 14px 12px;white-space: nowrap;flex-shrink: 0;}.tab-menu .tab-text {display: none;}.tab-content-wrapper {padding: 20px;}.tab-content form {max-width: 100%;padding: 18px;}.admin-card-grid {grid-template-columns: 1fr;}table.history-content,.history-content table {min-width: 720px;}.deposit-methods .info-grid {grid-template-columns: 1fr;}.deposit-methods .info-item {padding: 14px;}.deposit-methods .copy-btn {padding: 10px 14px;}.deposit-info-container h3,.deposit-form-container h3 {font-size: 1em;}.product-grid {grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));gap: 16px;}.product-card {padding: 16px;}.product-card img {height: 200px;}.product-price {font-size: 1.3em;}h2 {font-size: 1.5em;}.cta-button {padding: 10px 18px;font-size: 14px;}}@media (max-width: 480px) {.tab-menu button {flex-basis: 100%;}.admin-card-grid {grid-template-columns: 1fr;}table.history-content,.history-content table {min-width: 580px;}.product-grid {grid-template-columns: 1fr;}}@page {size: 80mm auto;margin: 4mm;}@media print {body {padding-top: 0 !important;background: #ffffff !important;}body > *:not(#print-invoice-root) {display: none !important;}#pageLoader,.main-header,.main-footer,.admin-tabs,#hamburgerMenu,.hamburger-menu,.main-nav,.header-actions,.support-btn,.bot-icon,.iphone-price-btn,.iphone-price-panel,.wheel-fab {display: none !important;}#print-invoice-root {display: block !important;}.ticket-wrap {width: 100%;max-width: 400px;margin: 12px auto;padding: 8px 6px 10px;box-sizing: border-box;}.ticket-head {text-align: left;margin-bottom: 6px;border-bottom: 1px dashed #ddd;padding-bottom: 4px;}.ticket-head-row {display: flex;align-items: flex-start;justify-content: space-between;gap: 8px;}.ticket-head-left {flex: 1;}.ticket-head-right {flex: 0 0 auto;}.ticket-qr {width: 72px;height: 72px;}.shop-name {font-size: 15px;font-weight: 700;letter-spacing: 0.4px;}.shop-sub {font-size: 11px;color: #555;margin-top: 2px;}.code-row {margin-top: 4px;font-size: 11px;}.code-row strong {font-weight: 700;}.ticket-body {margin-top: 6px;font-size: 11px;}.section-title {font-weight: 700;margin-bottom: 4px;text-transform: uppercase;}.sender-block,.recipient-block {margin-bottom: 6px;}.sender-block div,.recipient-block div {margin-bottom: 2px;}.label {min-width: 70px;display: inline-block;color: #444;}.value {font-weight: 600;}.item-row {display: flex;justify-content: space-between;margin-bottom: 4px;}.item-name {flex: 1;padding-right: 6px;}.item-qty {width: 30px;text-align: right;}.item-price {width: 70px;text-align: right;}.total-block {margin-top: 4px;padding-top: 4px;border-top: 1px dashed #ddd;}.total-row {display: flex;justify-content: space-between;font-weight: 700;}.note-paid {font-size: 11px;color: #0f766e;margin-top: 2px;text-align: right;}.footer {margin-top: 8px;border-top: 1px dashed #ddd;padding-top: 4px;text-align: center;font-size: 10px;line-height: 1.5;}.footer strong {font-weight: 700;}}@media screen {#print-invoice-root {display: none !important;}}.notice-modal-content {max-width: 720px;}.notice-header {display: flex;justify-content: space-between;align-items: center;color: var(--text-color);font-weight: 700;margin-bottom: 16px;padding-bottom: 12px;border-bottom: 2px solid var(--border-color);}.notice-title {display: flex;align-items: center;gap: 8px;}.notice-title i {color: var(--accent-color);}.auth-notice {display: block;margin: 12px 0;padding: 14px 16px;border-radius: var(--radius-md);background: linear-gradient(135deg, #ffecec 0%, #fff5f5 100%);color: #c0392b;font-weight: 600;border: 1px solid #ffd5d5;}.auth-notice.success {background: linear-gradient(135deg, #ecfff0 0%, #f0fff4 100%);color: #27ae60;border-color: #d4f8df;}.form-notice {display: block;margin: 12px 0;padding: 14px 16px;border-radius: var(--radius-md);background: linear-gradient(135deg, #ffecec 0%, #fff5f5 100%);color: #c0392b;font-weight: 600;border: 1px solid #ffd5d5;}.form-notice.success {background: linear-gradient(135deg, #ecfff0 0%, #f0fff4 100%);color: #27ae60;border-color: #d4f8df;}.notice-body {padding: 12px 0;}.notice-image {width: 100%;height: 300px;object-fit: contain;background: var(--background-color);border: 1px solid var(--border-color);border-radius: var(--radius-md);box-shadow: var(--shadow-sm);}.notice-text {text-align: center;font-style: italic;margin-top: 12px;color: var(--text-muted);}.notice-contact {text-align: center;margin-top: 16px;}.notice-telegram {color: #18a7e0;font-weight: 700;}.notice-actions {display: flex;gap: 12px;justify-content: center;margin-top: 20px;}.wheel-fab {position: fixed;left: 16px;bottom: 16px;z-index: 1900;width: 56px;height: 56px;border-radius: 50%;background: var(--accent-gradient);color: #fff;display: flex;align-items: center;justify-content: center;font-size: 28px;cursor: pointer;box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);animation: wheelPulse 2s ease-in-out infinite;}@keyframes wheelPulse {0%,100% {transform: scale(1);}50% {transform: scale(1.05);}}.wheel-modal-content {max-width: 600px;}.wheel-credits {text-align: center;margin-bottom: 14px;font-weight: 700;font-size: 16px;color: var(--accent-color);}.wheel-display {position: relative;width: 320px;height: 320px;margin: 0 auto;}.wheel-canvas {position: relative;width: 100%;height: 100%;border-radius: 50%;background: conic-gradient(#d31027 0deg 45deg,#f1c40f 45deg 90deg,#2ecc71 90deg 135deg,#3498db 135deg 180deg,#9b59b6 180deg 225deg,#e74c3c 225deg 270deg,#1abc9c 270deg 315deg,#d31027 315deg 360deg);transition: transform 4s cubic-bezier(0.17, 0.67, 0.12, 0.99);box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 0 0 8px rgba(255, 255, 255, 0.2);}.wheel-seg-text {position: absolute;left: 50%;top: 50%;transform-origin: 50% 50%;color: #fff;font-weight: 800;font-size: 13px;text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);white-space: nowrap;}.wheel-pointer {position: absolute;top: -20px;left: 50%;transform: translateX(-50%);font-size: 28px;color: var(--primary-color);filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));}.text-center {text-align: center;}.text-left {text-align: left;}.text-right {text-align: right;}.mt-1 {margin-top: 8px;}.mt-2 {margin-top: 16px;}.mt-3 {margin-top: 24px;}.mt-4 {margin-top: 32px;}.mb-1 {margin-bottom: 8px;}.mb-2 {margin-bottom: 16px;}.mb-3 {margin-bottom: 24px;}.mb-4 {margin-bottom: 32px;}.flex {display: flex;}.flex-wrap {flex-wrap: wrap;}.items-center {align-items: center;}.justify-center {justify-content: center;}.justify-between {justify-content: space-between;}.gap-1 {gap: 8px;}.gap-2 {gap: 16px;}.gap-3 {gap: 24px;}.hidden {display: none;}.visible {display: block;}.fade-in {animation: fadeIn 0.5s ease forwards;}@keyframes fadeIn {from {opacity: 0;transform: translateY(20px);}to {opacity: 1;transform: translateY(0);}}.slide-in-left {animation: slideInLeft 0.5s ease forwards;}@keyframes slideInLeft {from {opacity: 0;transform: translateX(-30px);}to {opacity: 1;transform: translateX(0);}}.slide-in-right {animation: slideInRight 0.5s ease forwards;}@keyframes slideInRight {from {opacity: 0;transform: translateX(30px);}to {opacity: 1;transform: translateX(0);}}.scale-in {animation: scaleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;}@keyframes scaleIn {from {opacity: 0;transform: scale(0.8);}to {opacity: 1;transform: scale(1);}}.bounce {animation: bounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);}@keyframes bounce {0% {transform: scale(1);}30% {transform: scale(1.15);}50% {transform: scale(0.95);}70% {transform: scale(1.05);}100% {transform: scale(1);}}.pulse-glow {animation: pulseGlow 2s ease-in-out infinite;}@keyframes pulseGlow {0%,100% {box-shadow: 0 0 5px rgba(255, 107, 53, 0.3);}50% {box-shadow: 0 0 20px rgba(255, 107, 53, 0.6), 0 0 40px rgba(255, 107, 53, 0.3);}}.skeleton {background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);background-size: 200% 100%;animation: skeleton 1.5s ease-in-out infinite;}@keyframes skeleton {0% {background-position: 200% 0;}100% {background-position: -200% 0;}}@media screen and (max-width: 768px) {.header-content {padding: 0 10px;gap: 8px;}.logo a {font-size: 20px;gap: 6px;}.logo a i {font-size: 22px;}.logo a span {display: inline-block; }.cta-button.topup-btn {width: auto !important;height: 40px !important;padding: 0 16px !important;border-radius: 50px !important;font-size: 14px !important; font-weight: 700 !important;gap: 8px !important;}.cta-button.topup-btn i {font-size: 16px !important;margin: 0 !important;}.header-bell, .hamburger-btn {width: 40px;height: 40px;font-size: 18px;}.container {padding-left: 12px;padding-right: 12px;}.product-grid {grid-template-columns: repeat(auto-fill, minmax(100%, 1fr)); gap: 16px;}.voucher-grid {display: grid;grid-template-columns: 1fr;gap: 16px;}h1 { font-size: 24px !important; }h2 { font-size: 20px !important; }h3 { font-size: 18px !important; }.checkout-grid {grid-template-columns: 1fr !important;gap: 20px;}.checkout-product-info, .checkout-form-container {padding: 16px;}.history-content table {display: block;width: 100%;overflow-x: auto;white-space: nowrap;}.game-container {padding: 10px;}.game-step {flex-direction: column;align-items: flex-start;}.game-step .status {margin-left: 0;margin-top: 8px;}}@media screen and (max-width: 360px) {.logo a span {font-size: 16px;}.header-content {gap: 4px;}}
/* Random Shop Styles */
.random-section {
    padding: 20px 0;
    background-color: #f8f9fa;
}

.voucher-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.voucher-container h1 {
    text-align: center;
    color: #c0392b;
    margin-bottom: 30px;
    font-size: 2rem;
    font-weight: 800;
    text-transform: uppercase;
}

.random-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.random-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid #eee;
}

.random-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.random-thumb {
    width: 100%;
    padding-top: 100%; /* 1:1 Aspect Ratio */
    position: relative;
    background-color: #f1f1f1;
}

.random-thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.random-title {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    padding: 15px 15px 5px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.random-sub {
    font-size: 14px;
    color: #666;
    padding: 0 15px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.random-price {
    padding: 0 15px;
    font-size: 18px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.random-stars {
    padding: 5px 15px;
    color: #f1c40f;
    font-size: 12px;
}

.random-btn {
    display: block;
    margin: 15px;
    padding: 10px;
    background: linear-gradient(to right, #d31027, #ff4757);
    color: white;
    text-align: center;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: opacity 0.3s;
}

.random-btn:hover {
    opacity: 0.9;
}

.header-bell {
    position: relative;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .random-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .random-title {
        font-size: 14px;
        padding: 10px 10px 5px;
    }
    
    .random-sub {
        font-size: 12px;
        padding: 0 10px 5px;
    }
    
    .random-price {
        padding: 0 10px;
        font-size: 15px;
    }
    
    .random-stars {
        padding: 0 10px;
    }
    
    .random-btn {
        margin: 10px;
        font-size: 13px;
        padding: 8px;
    }
}

/* Random Play Styles */
.backbar { margin-bottom: 15px; }
.back-link { color: #666; text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.back-link:hover { color: #333; }

.random-play-banner {
    display: flex;
    gap: 20px;
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    align-items: center;
    margin-bottom: 20px;
}
.random-play-banner img { width: 100px; height: 100px; object-fit: cover; border-radius: 8px; }
.rp-info { flex: 1; }
.rp-title { font-size: 20px; font-weight: 800; color: #333; margin-bottom: 5px; }
.rp-sub { font-size: 14px; color: #666; margin-bottom: 8px; }
.rp-price { display: flex; align-items: baseline; gap: 8px; }
.rp-compare { color: #c0392b; text-decoration: line-through; opacity: 0.7; font-size: 14px; }
.rp-sale { color: #27ae60; font-weight: 900; font-size: 20px; }
.rp-unit { color: #666; font-size: 14px; }

.random-many-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.rt-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.rt-card:hover { transform: translateY(-3px); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.rt-card.rt-selected { border-color: #e74c3c; box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.3); }

.rt-card img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 8px;
}

.rt-label { font-size: 13px; font-weight: 600; color: #333; }

.rt-buy-btn {
    display: none; /* Only show on hover or selected? Logic seems to rely on modal */
    width: 100%;
    margin-top: 5px;
    padding: 5px;
    background: #e74c3c;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
}

.rt-card:hover .rt-buy-btn { display: block; }

.random-play-actions { display: flex; gap: 10px; justify-content: center; margin-top: 20px; }

@keyframes shuffle {
    0% { transform: scale(1); }
    50% { transform: scale(0.9) rotate(5deg); }
    100% { transform: scale(1); }
}

.rt-shuffle { animation: shuffle 0.3s ease; }

@media (max-width: 600px) {
    .random-play-banner { flex-direction: column; text-align: center; }
    .random-play-banner img { width: 80px; height: 80px; margin: 0 auto; }
    .rp-price { justify-content: center; }
    .random-many-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}

/* Voucher Shop Redesign 2026 */

/* Header Text Update */
.voucher-container h1 {
    text-align: center;
    text-transform: uppercase;
    color: #D31027;
    font-weight: 900;
    font-size: 24px;
    margin-bottom: 25px;
    letter-spacing: 1px;
}

/* Grid Layout */
.voucher-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
    padding-bottom: 100px; /* Space for footer/floating buttons */
}

/* New Card Design */
.voucher-card-new {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    display: flex;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(0,0,0,0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: 100%; /* Uniform height */
}

.voucher-card-new:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.1);
}

/* Left Side (Icon & Type) */
.vc-left {
    width: 90px;
    background: #fdfdfd;
    border-right: 2px dashed #e5e5e5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 5px;
    flex-shrink: 0;
    position: relative;
}

/* Ticket Notch Effect */
.vc-left::before, .vc-left::after {
    content: '';
    position: absolute;
    right: -6px;
    width: 12px;
    height: 12px;
    background: #f8f9fc; /* Match body background */
    border-radius: 50%;
    z-index: 1;
}
.vc-left::before { top: -6px; }
.vc-left::after { bottom: -6px; }

.vc-icon-box {
    width: 45px;
    height: 45px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.vc-icon-box img {
    width: 80%;
    height: 80%;
    object-fit: contain;
}

.vc-icon-box i {
    font-size: 22px;
    color: #d31027;
}

.vc-brand-name {
    font-size: 11px;
    font-weight: 700;
    color: #555;
    text-align: center;
    line-height: 1.2;
}

/* Right Side (Content) */
.vc-right {
    flex: 1;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0; /* Fix flex overflow */
}

.vc-top-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 5px;
}

.vc-title {
    font-size: 22px;
    font-weight: 800;
    color: #D31027; /* Red */
    line-height: 1.1;
    margin-bottom: 4px;
}

.vc-min-order {
    font-size: 13px;
    color: #666;
    margin-bottom: 10px;
    font-weight: 500;
}

/* Progress Bar */
.vc-progress-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.vc-progress-wrap {
    flex: 1;
    height: 6px;
    background: #eee;
    border-radius: 10px;
    overflow: hidden;
}

.vc-progress-bar {
    height: 100%;
    background: linear-gradient(to right, #27ae60, #2ecc71);
    border-radius: 10px;
}

.vc-progress-text {
    font-size: 11px;
    color: #27ae60;
    font-weight: 700;
    white-space: nowrap;
}

/* Meta Info */
.vc-meta {
    font-size: 11px;
    color: #95a5a6;
    margin-bottom: 12px;
    line-height: 1.4;
}

.vc-meta p { margin-bottom: 2px; }
.vc-link { color: #3498db; text-decoration: none; }

/* Bottom Action */
.vc-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid #f5f5f5;
}

.vc-price-info {
    display: flex;
    flex-direction: column;
}

.vc-price-label { font-size: 10px; color: #aaa; text-transform: uppercase; }
.vc-price-val { font-size: 14px; color: #7f8c8d; font-weight: 600; }

.vc-btn {
    background: linear-gradient(90deg, #d31027 0%, #ff4757 100%);
    color: #fff;
    border: none;
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(255, 107, 53, 0.3);
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-family: inherit;
}

.vc-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 15px rgba(255, 107, 53, 0.4);
}

/* Badge Label */
.vc-badge-label {
    position: absolute;
    top: 0;
    right: 0;
    background: #f1c40f;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 4px 10px;
    border-bottom-left-radius: 12px;
    box-shadow: -2px 2px 5px rgba(0,0,0,0.05);
}

.vc-badge-hot { background: #e74c3c; }

/* Mobile Optimization */
@media (max-width: 480px) {
    .voucher-grid {
        grid-template-columns: 1fr;
        padding: 0 10px 100px;
    }
    .vc-left { width: 80px; }
    .vc-title { font-size: 20px; }
    .vc-btn { padding: 8px 15px; font-size: 13px; }
}

/* Fix Header/Footer */
body {
    padding-bottom: 0; /* Remove default if any */
}
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
/* Ensure support buttons are above content but below modals */
.support-buttons {
    z-index: 900;
}

/* Page Loader */
.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
.loader-content { text-align: center; }
.loader-spinner {
    width: 50px; height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px;
}
.loader-text {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 600;
    color: var(--text-color);
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Bell Badge */
.bell-badge {
    position: absolute;
    top: -5px; right: -5px;
    background: #ff4757;
    color: white;
    font-size: 10px; font-weight: bold;
    min-width: 16px; height: 16px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    padding: 0 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    animation: bounce 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes bounce {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Social Proof Ticker Styles */
.ticker-bar {
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 12px 0;
    overflow: hidden;
    position: relative;
    z-index: 90;
    height: 48px;
}

.ticker-bar .container {
    display: flex;
    align-items: center;
    height: 100%;
}

.ticker-track {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.ticker-content {
    display: inline-flex;
    white-space: nowrap;
    animation: ticker-scroll 40s linear infinite;
    align-items: center;
}

.ticker-item {
    display: inline-flex;
    align-items: center;
    padding: 0 24px;
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

.ticker-item i {
    margin-right: 8px;
}

@keyframes ticker-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.ticker-bar:hover .ticker-content {
    animation-play-state: paused;
}

/* Verification Badge Styles */
.verify-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    cursor: pointer;
    margin-left: 8px;
    transition: all 0.2s ease;
    user-select: none;
    white-space: nowrap;
    line-height: normal;
    letter-spacing: normal;
}

/* Fix for product titles and notifications to prevent chipping/sticking */
.card-title, .product-name, .notification-message, .swal2-content, .swal2-title {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    line-height: 1.4 !important;
    letter-spacing: 0.3px !important;
    overflow: visible; 
}

.verify-badge.unverified {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
}

.verify-badge.unverified:hover {
    background-color: #ffe8a1;
}

.verify-badge.verified {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    cursor: default;
}

.verify-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.verify-badge.unverified .verify-dot {
    background-color: #dc3545;
    animation: blink 1.5s infinite;
}

.verify-badge.verified .verify-dot {
    display: none;
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.4; }
    100% { opacity: 1; }
}

/* Modal Styles for 2FA */
.verification-modal-content {
    max-width: 450px !important;
    text-align: center;
}

.verification-icon {
    font-size: 48px;
    color: #ffc107;
    margin-bottom: 16px;
}

.otp-inline-message {
    min-height: 18px;
    font-size: 13px;
    margin-bottom: 4px;
    display: none;
}

.otp-inline-message.is-error {
    color: #e74c3c;
}

.otp-inline-message.is-success {
    color: #27ae60;
}

.otp-inputs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 20px 0;
}

.otp-inputs input {
    width: 40px;
    height: 50px;
    text-align: center;
    font-size: 24px;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-weight: bold;
}

.otp-inputs input:focus {
    border-color: #007bff;
    outline: none;
}

/* Ensure verification modal is on top of everything including notification board */
#verificationModal {
    z-index: 20000 !important;
}

/* Base Modal Style if missing */
/* Base Modal Style if missing */
.modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
}

.reviews-section {
    padding: 40px 0 30px;
    background-color: #f8f9fc;
}

.reviews-section .container {
    max-width: 1100px;
}

.reviews-title {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 18px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
}

.reviews-title i {
    color: #D31027;
}

.review-summary-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 18px 20px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    margin-bottom: 18px;
}

.review-summary-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.review-summary-left {
    min-width: 180px;
}

.review-average {
    font-size: 34px;
    font-weight: 900;
    color: #d31027;
    line-height: 1.1;
}

.review-stars {
    color: #D31027;
    margin-top: 4px;
    font-size: 15px;
}

.review-stars i {
    margin-right: 2px;
}

.review-total {
    margin-top: 6px;
    font-size: 13px;
    color: #7f8c8d;
}

.review-progress-list {
    flex: 1;
    min-width: 240px;
    display: grid;
    gap: 6px;
}

.review-progress-row {
    display: grid;
    grid-template-columns: 52px 1fr 40px;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #555;
}

.review-progress-row .bar {
    height: 6px;
    border-radius: 999px;
    background: #ecf0f1;
    overflow: hidden;
}

.review-progress-row .fill {
    height: 100%;
    width: 0;
    background-image: linear-gradient(90deg,#f39c12,#e74c3c);
    transition: width 0.35s ease;
}

.review-progress-row .percent {
    font-size: 12px;
    text-align: right;
    color: #7f8c8d;
}

.review-list {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.review-card {
    background: transparent;
    border-radius: 0;
    padding: 10px 0 12px;
    box-shadow: none;
    border-bottom: 1px solid #e1e4eb;
}

.review-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.review-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.review-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg,#d31027,#e74c3c);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    overflow: hidden;
}

.review-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.review-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.review-name {
    font-size: 14px;
    font-weight: 700;
    color: #2c3e50;
}

.review-meta-extra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #7f8c8d;
}

.review-meta-extra span {
    display: inline-flex;
    align-items: center;
}

.review-comment {
    font-size: 14px;
    color: #2c3e50;
    margin-top: 2px;
    word-break: break-word;
}

.review-media-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.review-media-thumb {
    border: none;
    padding: 0;
    margin: 0;
    background: transparent;
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    flex: 0 0 80px;
    height: 80px;
    position: relative;
}

.review-media-thumb img,
.review-media-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #000;
}

/* Fix mobile video cover */
.review-media-thumb.is-video video {
    pointer-events: none;
    object-fit: cover;
}

.review-media-thumb.is-video {
    position: relative;
    background: #000;
}

.review-media-thumb.is-video video {
    pointer-events: none;
    object-fit: cover;
    background-color: #000;
}

.review-media-video-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    font-size: 18px;
    z-index: 2;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.review-media-more {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.review-seller-reply {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #f1f2f6;
    border-left: none;
    font-size: 13px;
    color: #4a4a4a;
}

/* Footer redesign */
.main-footer {
    background: linear-gradient(180deg, #edf2f7 0%, #e2e8f0 100%);
    color:#1f2937;
    padding:40px 0;
    font-size:14px;
}
.footer-inner {
    display:flex;
    flex-direction:column;
    gap:24px;
}
.footer-top {
    margin-bottom:8px;
}
.footer-brand-title {
    color:#111827;
    font-weight:800;
    margin-bottom:6px;
    font-size:16px;
    text-transform:uppercase;
}
.footer-brand-subtitle {
    color:#b91c1c;
    font-weight:600;
    font-size:14px;
    margin-bottom:12px;
}
.footer-links {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:8px;
    font-weight:600;
}
.footer-links a {
    color:#1f2937;
    text-decoration:none;
    font-size:13px;
}
.footer-links a i {
    margin-right:4px;
}
.footer-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:24px;
}
.footer-section-title {
    font-size:15px;
    font-weight:700;
    margin-bottom:10px;
    color:#111827;
    text-transform:uppercase;
}
.footer-highlight {
    color:#b91c1c;
    font-weight:700;
    margin-bottom:8px;
}
.footer-text {
    line-height:1.6;
    color:#374151;
    font-size:13px;
}
.footer-text.footer-strong {
    font-weight:600;
}
.footer-bottom {
    border-top:1px solid #cbd5e1;
    margin-top:10px;
    padding-top:16px;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    justify-content:space-between;
    color:#6b7280;
    font-size:13px;
}
.footer-bottom #footer-copyright-brand {
    color:#e74c3c;
    font-weight:700;
}
.footer-bottom-links {
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}
.footer-bottom-links a {
    color:#6b7280;
    text-decoration:none;
    font-size:13px;
}
.footer-bottom-links a i {
    margin-right:4px;
}
@media (max-width: 576px) {
    .footer-brand-title {
        text-align:center;
    }
    .footer-brand-subtitle {
        text-align:center;
    }
    .footer-links {
        justify-content:center;
    }
    .footer-bottom {
        flex-direction:column;
        align-items:flex-start;
    }
}

.review-seller-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 4px;
    color: #2c3e50;
}

.review-seller-label i {
    color: #7f8c8d;
}

.review-seller-text {
    line-height: 1.5;
}

.review-lightbox {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.8);
    z-index: 15000;
}

.review-lightbox-inner {
    max-width: 90%;
    max-height: 90vh;
    padding: 12px;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.review-lightbox-close {
    border: none;
    background: rgba(0,0,0,0.6);
    color: #ffffff;
    font-size: 24px;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.review-lightbox-content {
    max-width: 100%;
    max-height: 100%;
}

.review-lightbox-content img,
.review-lightbox-content video {
    max-width: 100%;
    max-height: 80vh;
    border-radius: 16px;
    display: block;
}

/* Sale banner fix */
.sale-banner {
    padding: 18px 0;
    background: linear-gradient(135deg, #d31027, #ff4757);
    color: #fff;
}
.sale-banner-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}
.sale-title {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    text-shadow: none !important;
    filter: none !important;
}
.sale-title i {
    margin-right: 6px;
}
.sale-day {
    font-size: 14px;
    font-weight: 600;
}
.sale-status {
    font-size: 13px;
    font-weight: 600;
}
@media (max-width: 576px) {
    .sale-title {
        font-size: 16px;
    }
}

/* iPhone section spacing */
.iphone-section.container {
    padding-left: 18px;
    padding-right: 18px;
}

.iphone-section {
    padding: 30px 0;
}

.iphone-section h2 {
    padding-left: 6px;
    padding-right: 6px;
}

.iphone-section .iphone-category-title {
    padding-left: 6px;
    padding-right: 6px;
}

.iphone-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(260px,1fr));
    gap: 18px;
    margin-top: 16px;
}

.product-card {
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    padding: 10px 10px 12px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
    font-family: "Segoe UI", Roboto, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.1);
}

.product-card .product-hero {
    margin-bottom: 10px;
    background: #f5f7fb;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding-top: 28px; /* chừa không gian cho badge Còn lại/Đã bán */
}

.product-card .product-image {
    width: 100%;
    max-height: 190px;
    object-fit: contain;
    border-radius: 14px;
    display: block;
}

.card-title {
    font-size: 16px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 0;
    min-height: 0;
    line-height: 1.4;
    word-break: break-word;
}

.iphone-meta {
    position: absolute;
    top: 8px;
    left: 10px;
    right: 10px;
    display: flex;
    justify-content: space-between;
    gap: 6px;
    pointer-events: none;
}

.iphone-stock,
.iphone-sold {
    background: linear-gradient(135deg, var(--primary, #e74c3c), var(--secondary, #ff7675));
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.14);
}

/* History table - nạp thẻ (napthe.html) */
.topup-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.topup-history-table th,
.topup-history-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #ecf0f1;
    text-align: left;
}
.topup-history-table thead th {
    background: #f5f7fb;
    font-weight: 600;
    color: #34495e;
}
.topup-history-table tbody tr:nth-child(even) {
    background: #fcfcfc;
}
.topup-history-empty {
    text-align: center;
    padding: 10px 0;
    color: #7f8c8d;
    font-size: 13px;
}
.topup-status {
    font-weight: 600;
}
.topup-status-success {
    color: #27ae60;
}
.topup-status-fail {
    color: #e74c3c;
}
.topup-status-pending {
    color: #f39c12;
}
.topup-status-wrong {
    color: #d31027;
}
@media (max-width: 768px) {
    .topup-history-table {
        font-size: 13px;
    }
    .topup-history-table thead {
        display: none;
    }
    .topup-history-table,
    .topup-history-table tbody,
    .topup-history-table tr,
    .topup-history-table td {
        display: block;
        width: 100%;
    }
    .topup-history-table tbody tr {
        background: #ffffff;
        border: 1px solid #ecf0f1;
        border-radius: 10px;
        box-shadow: 0 3px 8px rgba(0,0,0,0.03);
        margin-bottom: 10px;
        padding: 8px 10px;
    }
    .topup-history-table td {
        border-bottom: none;
        padding: 4px 0;
    }
    .topup-history-table td::before {
        content: attr(data-label);
        display: inline-block;
        min-width: 110px;
        font-weight: 600;
        color: #7f8c8d;
        margin-right: 4px;
    }
    .topup-history-table td:last-child {
        margin-top: 4px;
    }
    .topup-history-table td[data-label="Mã thẻ / Serial"] span {
        word-break: break-all;
    }
}

.iphone-price-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 0;
    margin-bottom: 4px;
}

.product-price-original {
    font-size: 13px;
    color: #95a5a6;
    text-decoration: line-through;
}

.iphone-price-wrap .product-price {
    margin-bottom: 0;
}

.iphone-total {
    font-size: 14px;
    font-weight: 700;
    color: #c0392b;
    margin-bottom: 8px;
}

.product-price {
    font-size: 16px;
    font-weight: 800;
    color: #e74c3c;
    margin-bottom: 10px;
}

.product-card .cta-button {
    margin-top: auto;
    width: 100%;
}

@media (max-width: 768px) {
    .reviews-section {
        padding: 32px 0 24px;
    }
    .review-summary-card {
        padding: 14px 14px 16px;
    }
    .review-card {
        padding: 12px 12px 14px;
    }
    .review-header {
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .review-stars {
        margin-top: 6px;
    }
    .iphone-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 12px;
    }
    .product-card {
        padding: 10px 10px 12px;
    }
    .product-card .product-image {
        max-height: 170px;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #f8f9fc;
        --card-background: #ffffff;
        --text-color: #2c3e50;
        --text-muted: #6c757d;
        --border-color: #e8ecef;
    }
}

:root {
    --background-color: #f7f8fb;
    --card-background: #ffffff;
    --text-color: #1f2937;
    --text-muted: #6b7280;
    --border-color: #e5e7eb;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #f7f8fb;
        --card-background: #ffffff;
        --text-color: #1f2937;
        --text-muted: #6b7280;
        --border-color: #e5e7eb;
    }
}

html {
    color-scheme: light;
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
    background-image: none;
}

body, html {
    font-family: "Inter", "Be Vietnam Pro", -apple-system, sans-serif !important;
    font-size: 14px !important;
}

/* Fix SweetAlert z-index */
.swal2-container { z-index: 999999 !important; }

/* Auth toast notification (đăng nhập, đăng ký, nhập sai) */
.swal2-auth-toast {
    font-size: 15px !important;
    font-weight: 600 !important;
    min-width: 260px !important;
    max-width: 92vw !important;
    border-radius: 14px !important;
    padding: 14px 20px !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.22) !important;
}
.swal2-auth-toast .swal2-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
}
.swal2-auth-toast .swal2-icon {
    width: 28px !important;
    height: 28px !important;
    margin: 0 10px 0 0 !important;
    border-color: rgba(255,255,255,0.6) !important;
}
.swal2-auth-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line] {
    background-color: rgba(255,255,255,0.9) !important;
}
.swal2-auth-toast .swal2-icon.swal2-success [class^=swal2-success-line] {
    background-color: rgba(255,255,255,0.9) !important;
}
.swal2-auth-toast .swal2-timer-progress-bar {
    background: rgba(255,255,255,0.4) !important;
}

/* Fix menu font sizes */
.hamburger-menu .menu-item { font-size: 15px !important; font-weight: 500 !important; }
.hamburger-menu .menu-section-title { font-size: 14px !important; font-weight: 700 !important; text-transform: uppercase !important; }
.hamburger-menu .menu-user .label { font-size: 14px !important; }
.hamburger-menu .menu-user .balance { font-size: 16px !important; font-weight: bold !important; }