/*
 * Site layer for the Thai landing page (navy / orange / gold theme).
 * Loaded after the platform stylesheet and the theme variables, so these
 * rules re-tint the theme variables to the navy palette, add the
 * premium surface treatment, style the article markup in the footer, and
 * add the responsive behaviour the desktop-only platform template lacks.
 *
 * Palette (matched to the money site)
 *   navy-950 #060e1a · navy-900 #081321 · navy-800 #0b1a2e · navy-700 #112237
 *   navy-600 #152a43 · line #1d3350
 *   CTA orange #ff5a24 → #e23a1c · gold #ffc94a / #e9a923
 *   text #ffffff · muted #9fb0c4
 */

/* ---------- Thai typography ---------- */
body,
button,
input,
select,
textarea {
    font-family: 'Poppins', 'Kanit', sans-serif;
}

/* ---------- Theme variables (generated from the platform theme) ---------- */
:root {
    --body-bg: #081321;
    --data-cntr-bg: #081321;
    --topbar-cntr-bg: #0a1626;
    --topbar-color: #ffffff;
    --topbar-item-border-left: #1d3350;
    --topbar-link-hover-color: #ffc94a;
    --language-selector-bg: #152b45;
    --language-selector-link-hover-bg: #204a7e;
    --user-nav-home-btn-bg: #09111b;
    --user-nav-home-btn-active-bg: #204a7e;
    --logout-btn-bg: #204a7e;
    --logout-btn-hover-bg: #183962;
    --user-menu-bg: #09111b;
    --user-menu-link-hover-color: #204a7e;
    --site-header-bg: linear-gradient(180deg,#112540 0%,#0b1a2e 100%);
    --top-menu-home-bg: #ff5a24;
    --top-menu-home-active-bg: #e23a1c;
    --top-menu-link-after-hover-bg: #ffc94a;
    --live-draw-link-bg: #204a7e;
    --site-footer-bg: #060e1a;
    --site-footer-color: #9fb0c4;
    --footer-separator-border: #1a2e47;
    --main-menu-bg: #09111b;
    --main-menu-link-bg: #18304e;
    --main-menu-link-hover-bg: #1f4a7e;
    --modal-header-bg: #1c4271;
    --modal-close-btn-bg: #204a7e;
    --modal-content-bg: #112237;
    --modal-body-bg: #112237;
    --modal-footer-border-top: #1b3555;
    --modal-btn-bg: #1e477a;
    --modal-btn-hover-bg: #193a62;
    --form-cntr-bg: #112237;
    --form-title-before-bg: #ff5a24;
    --form-content-bg: #112237;
    --page-title-border-bottom: #1b3555;
    --reporting-table-header-bg: #193a62;
    --reporting-table-body-color: #92a1b4;
    --reporting-table-border: #1b3555;
    --reporting-table-footer-bg: #172e4a;
    --reporting-btn-bg: #204a7e;
    --form-note-bg: #1c3758;
    --form-note-title: #204a7e;
    --required-color: #204a7e;
    --primary-btn-bg: #ff5a24;
    --primary-btn-hover-bg: #e23a1c;
    --claim-item-activation-btn-bg: #204a7e;
    --claim-item-activation-btn-hover-bg: #193a62;
    --exp-countdown-data-section-color: #90a0b4;
    --exp-countdown-data-value-bg: #0d1927;
    --exp-countdown-data-value-border: #0d1927;
    --copy-input-btn-bg: #09111b;
    --copy-input-btn-color: #6e839c;
    --copy-input-btn-hover-color: #7b8ea5;
    --failed-color: #204a7e;
    --copied-color: #1e477a;
    --tab-menu-link-border: #1b3554;
    --tab-menu-link-hover-bg: #152b45;
    --tab-menu-link-active-bg: #1e477a;
    --otp-btn-bg: #193a62;
    --otp-btn-disabled-bg: #53657b;
    --provider-title-bg: #172e4b;
    --provider-list-bg: #112237;
    --game-info-btn-span-color: #09111b;
    --game-filter-bg: #112237;
    --game-list-bg: #112237;
    --input-bg: #0e1c2d;
    --input-border: #193250;
    --input-readonly-bg: #285080;
    --forgot-password-link-hover-color: #204a7e;
    --login-btn-bg: #1b3350;
    --login-btn-hover-bg: #24456a;
    --register-btn-bg: #ff5a24;
    --register-btn-hover-bg: #e23a1c;
    --captcha-icon-color: #09111b;
    --user-info-balance-after-border-top: #204a7e;
    --vendor-balances-cntr-bg: #18304e;
    --vendor-balances-border: #254975;
    --vendor-balances-header-balance-color: #204a7e;
    --user-info-menu-bg: #112135;
    --user-info-menu-item-bg: linear-gradient(to bottom,#1f3d62,#1c3757);
    --wallet-cntr-bg: #09111b;
    --wallet-cntr-border: #1e3b5e;
    --free-play-bg: #54667c;
    --free-play-hover-bg: #203f64;
    --play-now-bg: #ff5a24;
    --play-now-hover-bg: #e23a1c;
    --provider-page-bg: #112237;
    --provider-info-border: #203f65;
    --hot-match-live-streaming-link-border: #193a62;
    --hot-match-live-streaming-link-color: #193a62;
    --hot-match-live-streaming-link-hover-bg: #204a7e;
    --hot-match-live-streaming-link-hover-border: #204a7e;
    --forgot-password-warning-bg: #23456e;
    --filter-input-bg: #0e1c2d;
    --filter-input-color: #92a1b4;
    --filter-input-border: #193250;
    --game-type-category-filter-border: #1b3555;
    --claim-filter-bg: #18304e;
    --claim-filter-border: #1b3555;
    --claim-note-bg: #1c3758;
    --eligible-no: #204a7e;
    --eligible-maybe: #ffc94a;
    --claim-item-color: #274d7c;
    --claim-item-bg: #142840;
    --claim-item-boder-top: #1d4474;
    --claim-item-type-border: #1c416e;
    --claim-item-type-title-bg: #1c416e;
    --claim-info-cntr-bg: #18304e;
    --claim-info-cntr-border: #18304e;
    --claim-progress-info-bg: #18314f;
    --claim-action-cntr-bg: #18304e;
    --combine-promo-info-warning-color: #e9a923;
    --claim-btn-bg: #1e477a;
    --claim-btn-hover-bg: #193a62;
    --claim-info-btn-bg: #1f3e63;
    --claim-info-btn-hover-bg: #21426a;
    --claim-info-modal-modal-body-info-section-title-border: 1px solid #193251;
    --bonus-slider-modal-activation-btn-bg: #204a7e;
    --bonus-slider-modal-close-btn-bg: #21426a;
    --bonus-slider-modal-close-btn-hover-bg: #516277;
    --bonus-slider-modal-form-bg: #152b45;
    --bonus-control-btn-color: #264b79;
    --bonus-amount-bg: #09111b;
    --bonus-amount-border: #1b3555;
    --bonus-range-bubble-bg: #09111b;
    --bonus-range-bubble-border: #6e839c;
    --bonus-range-bubble-before-border: rgba(233,169,35,0);
    --bonus-range-bubble-before-border-top: #6e839c;
    --bonus-range-bubble-after-border-top: #6e839c;
    --live-chat-cntr-bg: linear-gradient(to bottom,#193352,#142942);
    --live-chat-cntr-border: #1b3555;
    --live-chat-cntr-h6-color: #92a1b4;
    --live-chat-bg: #1e477a;
    --contact-us-list-bg: #152a44;
    --contact-us-list-border: #1b3555;
    --contact-us-list-info-color: #abb7c5;
    --contact-us-list-link-border: #1f3d62;
    --contact-us-list-hover-bg: #1a3352;
    --contact-us-list-link-hover-border: #244873;
    --banner-indicator-active-bg: #ffc94a;
    --home-info-cntr: #09111b;
    --lottery-cntr-bg: #112237;
    --lottery-content-bg: #101f32;
    --lottery-content-border: #193250;
    --lottery-menu-link-active-bg: #ffc94a;
    --lottery-title-link-hover-color: #204a7e;
    --lottery-card: #152a43;
    --lottery-card-header-bg: #1f3e63;
    --lottery-card-history-bg: #264c7b;
    --lottery-card-history-border-top: #18304e;
    --lottery-card-history-border: #18304e;
    --lottery-market-list-bg: #09111b;
    --lottery-market-list-item-bg: #18304e;
    --lottery-market-list-item-header-bg: #142942;
    --lottery-market-list-item-close-time-bg: #152a43;
    --lottery-market-status-close-bg: #1e4676;
    --lottery-result-list-link-color: #09111b;
    --lottery-number-cntr-bg: #112236;
    --lottery-number-bg: #18304e;
    --lottery-history-filter-cntr-bg: #172e4b;
    --lottery-history-filter-cntr-btn-bg: #193a62;
    --lottery-history-filter-cntr-btn-border: #193a62;
    --lottery-history-filter-cntr-btn-hover-bg: #204a7e;
    --lottery-history-filter-cntr-btn-hover-border: #204a7e;
    --dream-interpretation-filter-btn-bg: #53657b;
    --dream-interpretation-table-row-odd-bg: #0e1c2d;
    --dream-interpretation-table-row-even-bg: #13273f;
    --dream-interpretation-search-cntr-bg: #193250;
    --dream-interpretation-search-input-bg: #0e1c2d;
    --dream-interpretation-search-input-border: #18314f;
    --table-pagination-link-bg: #193250;
    --table-pagination-link-border: #193250;
    --table-pagination-link-selected-bg: #1d4575;
    --table-pagination-link-selected-border: #1d4575;
    --side-menu-link-bg: #162c47;
    --side-menu-link-border: #162c47;
    --side-menu-link-hover-bg: #1b3f6a;
    --info-center-bg: #172e4b;
    --info-center-title-bg: #193a62;
    --info-center-content-bg: #09111b;
    --info-center-content-link-color: #204a7e;
    --info-center-content-cntr-bg: #112237;
    --panel-heading-bg: #09111b;
    --panel-heading-border: #1b3555;
    --replied-msg-border-bottom: #1b3555;
    --replied-msg-content-creator-bg: #899aae;
    --msg-item-bg: #122338;
    --msg-item-border: #1b3555;
    --msg-item-unseen-bg: #09111b;
    --mobile-app-note-bg: #1c3758;
    --mobile-app-note-span-color: #204a7e;
    --mobile-app-username-field-color: #09111b;
    --mobile-app-username-field-border: #9caabc;
    --mobile-app-cntr-color: #09111b;
    --mobile-app-select-bg: #152b45;
    --mobile-app-select-border: #9caabc;
    --mobile-app-cntr-select-option-hover-bg: #09111b;
    --mobile-app-link-cntr-border: #9caabc;
    --mobile-app-cntr-download-link-bg: #1e477a;
    --mobile-app-cntr-nav-tab-bg: #18314f;
    --mobile-app-cntr-nav-tab-hover-bg: #1e477a;
    --mobile-app-cntr-tab-pane-link-color: #1e477a;
    --mobile-app-cntr-tab-pane-note-color: #204a7e;
    --mobile-app-cntr-tab-pane-important-color: #ffc94a;
    --content-info-bg: #101f32;
    --content-info-referral-field-bg: #1d385a;
    --content-info-referral-code-cntr-bg: #1c416e;
    --content-block-bg: #13253c;
    --profile-summary-table-warning-bg: #204a7e;
    --banking-details-header-link-bg: #1c416e;
    --bank-info-carousel-bg: #264b79;
    --bank-info-carousel-active-bg: #1c416e;
    --bank-info-block-bg: #162c47;
    --bank-info-block-hr-border-top: #1c3757;
    --last-transaction-header-bg: #1c416e;
    --last-transaction-table-body-bg: #13253c;
    --home-game-list-cntr-title-span-bg: #1c416e;
    --home-game-list-cntr-content-bg: #162c47;
    --change-pass-cntr-input-color: #09111b;
    --change-pass-cntr-form-note-bg: #1c3758;
    --bank-account-list-border: #1b3555;
    --bank-account-item-bg: #162c47;
    --copy-bank-account-btn-bg: #1e477a;
    --promotions-cntr-bg: #09111b;
    --promotions-cntr-side-menu-bg: #112237;
    --promotions-cntr-side-menu-border: #112237;
    --promotions-cntr-side-menu-title-bg: #112237;
    --promotions-cntr-side-menu-title-border: #1b406e;
    --promotions-cntr-side-menu-link-bg: #162c47;
    --promotions-cntr-side-menu-link-border: #162c47;
    --promotions-cntr-side-menu-link-active-bg: #1e477a;
    --promotion-item-bg: #172e49;
    --promotion-item-label-end-date-color: #9ba9bb;
    --promotion-item-more-info-btn-bg: #1e477a;
    --promotion-item-more-info-btn-hover-bg: #193a62;
    --promotion-info-bg: #172e49;
    --promotion-info-close-btn-bg: #1e477a;
    --referral-cntr-bg: #152a43;
    --referral-cntr-border: #1d395b;
    --referral-form-note-bg: #1c3758;
    --register-done-cntr-bg: #13253c;
    --register-done-cntr-change-account-btn-border: #274d7c;
    --register-done-cntr-change-account-btn-hover-border: #204a7e;
    --register-done-cntr-change-account-btn-hover-color: #204a7e;
    --register-done-cntr-deposit-btn-bg: #193a62;
    --register-done-cntr-deposit-btn-border: #193a62;
    --register-done-cntr-deposit-btn-hover-bg: #204a7e;
    --register-done-cntr-deposit-btn-hover-border: #204a7e;
    --register-done-cntr-skip-btn-hover-color: #204a7e;
    --bank-status-list-bg: #13253c;
    --bank-status-offline-bg: #1e4676;
    --bank-info-bg: #1c3757;
    --bank-info-download-qr-code-btn-bg: #1d395b;
    --bank-info-download-qr-code-btn-hover-bg: #4b5a6d;
    --banking-form-note-bg: #214168;
    --banking-total-balance-span-color: #09111b;
    --banking-total-balance-span-border: #5d7189;
    --banking-history-link-bg: #5b6f87;
    --deposit-form-note-link-color: #204a7e;
    --deposit-form-group-bg: #1c3757;
    --deposit-amount-cntr-bg: #1c3757;
    --deposit-amount-cntr-reference-number-input-bg: #56687e;
    --deposit-amount-cntr-reference-number-input-border: #56687e;
    --real-amount-color: #1a3e69;
    --deposit-note-content-bg: #23456e;
    --payment-method-selection-label-color: #09111b;
    --payment-method-selection-checked-label-bg: linear-gradient(to bottom,#1a3e69,#153052);
    --select-bg: #09111b;
    --payment-gateway-cntr-bg: #152a43;
    --payment-gateway-cntr-color: #a7b3c2;
    --lottery-market-info-border-bottom-color: #274d7c;
    --market-close-countdown-bg: #1c3759;
    --lottery-statistic-bg: #61768f;
    --loyalty-calendar-left-bg: #13253c;
    --loyalty-calendar-right-bg: #0f1d2e;
    --loyalty-calendar-caption-bg: #1c3759;
    --mission-container-item-bg: #1d385a;
    --mission-action-container-bg: #152b45;
    --mission-progress-container-bg: #274e7e;
    --double-xp-countdown-container-bg: #193251;
    --loyalty-history-item-border: 1px solid #214169;
    --referral-features-item-bg: #1b3554;
    --reporting-table-status-default: #8697ac;
    --verification-note-title: #204a7e;
    --group-event-bg: #132d4d;
    --deposit-amount-focus-color: #1a3e69;
    --deposit-amount-input-color: #1a3e69;
    --deposit-currency-suffix-color: #1a3e69;
    --deposit-summary-container-border: 1px solid #193352;
    --deposit-summary-header-bg: #244874;
    --deposit-summary-header-amount-color: #1a3e69;
    --deposit-summary-content-body-bg: #193352;
    --deposit-summary-content-footer-border: 1px solid #264c7a;
    --withdawal-amount-focus-color: #1a3e69;
    --withdrawal-amount-input-color: #1a3e69;
    --withdrawal-currency-suffix-color: #1a3e69;
    --va-account-number-bg: #090f16;
    --payment-gateway-download-qr-button-bg: #1f3e63;
    --account-holder-info-color: #a7b3c2;
    --payment-method-container-bg: #152a43;
    --payment-method-container-color: #a7b3c2;
    --market-link-color: #9aa8ba;
    --pending-transaction-item-bg: #0f1d2e;
    --pending-transaction-item-bank-info-bg: #122439;
    --pending-transaction-item-hr-border-color: #1c3757;
    --last-draw-results-expired-color: #1d4576;
    --pending-transaction-details-item-bg: #18314f;
    --pending-transaction-details-item-border: #203f64;
    --pending-transaction-details-item-pending-status: #ffc94a;
    --pending-transaction-details-item-failed-status: #255794;
    --pending-transaction-details-item-hr: #21426a;
    --pending-transaction-details-item-secondary-color: #b1bcc9;
    --provider-slide-bg: #1b406d;
    --otp-popup-bg: #112237;
    --otp-input-bg: #152a43;
    --otp-input-border: #3b444f;
    --bonus-selection-popup-bg: #112237;
    --pending-transaction-remarks-container-qr-border-color: #204a7e;
    --notification-tabs-indicator-bg: #193a63;
    --notification-item-bg: #1b3656;
    --notification-item-border: #1f3e63;
    --notification-item-active-border: #0d1f34;
    --notification-item-label-bg: #1a3e69;
    --notification-content-sub-color: #6e839c;
    --notification-popup-body-bg: #162c47;
    --notification-popup-content-bg: #18304e;
    --unread-announcement-bg: #18304e;
    --unread-announcement-border: #0c1d32;
    --unread-announcement-tab-border-bottom: #1b3453;
    --unread-announcement-footer-bg: linear-gradient(180deg,#1e477a 0%,#183860 100%);
    --unread-announcement-footer-border: #1e477a;
    --loyalty-level-benefits-section-bg: #09111b;
    --loyalty-level-badge-cntr-bg: #13273f;
    --loyalty-level-badge-cntr-selected-bg: #18304e;
    --loyalty-level-benefits-cntr-bg: #13273f;
    --loyalty-level-benefits-list-item-bg: #1f3d61;
    --loyalty-level-benefits-list-item-sub-color: #94a3b6;
    --loyalty-level-progress-point-bg: #193352;
    --loyalty-level-progress-point-reached-border: #09111b;
    --tab-menu-loyalty-bg: #1e477a;
    --tab-menu-loyalty-bg1: #204a7e;
    --tab-menu-loyalty-bg2: #204a7e;
    --loyalty-reward-container-bg: #09111b;
    --loyalty-reward-container-tab-filter-bg: #13263e;
    --loyalty-reward-container-tab-filter-active-bg: #1e477a;
    --loyalty-reward-container-category-title-bef-bg: #1b3f6c;
    --loyalty-reward-container-item-countdown-bg: #112844;
    --loyalty-reward-container-item-countdown-time-container-bg: #13263e;
    --loyalty-reward-button-disabled-color: #7287a0;
    --loyalty-reward-scrollbar-thumb-bg: #285081;
    --loyalty-reward-container-flash-sale-bg: #112338;
    --loyalty-reward-container-lucky-draw-bg: #112338;
    --loyalty-reward-container-other-product-bg: #112338;
    --loyalty-reward-container-item-thumbnail-border: #193352;
    --loyalty-reward-container-item-thumbnail-countdown-bg: #112844;
    --loyalty-reward-container-item-lp-detail-first-border: #e9a923;
    --loyalty-reward-container-item-lp-detail-first-bg: #ffc94a;
    --loyalty-reward-container-item-lp-detail-real-color: #5e728b;
    --loyalty-reward-cntr-item-available-bg: #112844;
    --loyalty-top-bar-bg: #172e4b;
    --loyalty-top-bar-inner-bg: #09111b;
    --loyalty-top-bar-main-text-color: #b0bbc8;
    --loyalty-top-bar-xp-label-bg: #95a4b7;
    --loyalty-top-bar-xp-label-border-color: #6b809a;
    --loyalty-top-bar-exp-progress-bar-bg: #09111b;
    --loyalty-top-bar-exp-message-color: #ffc94a;
    --loyalty-top-bar-information-sign-color: #09111b;
    --referral-code-cntr-bg: #204a7e;
    --referral-page-main-bg: #204a7e;
    --referral-box-bg: #1c3758;
    --referral-box-border: #193251;
    --verification-note-bg: #1c3758;
    --search-container-bg: #0c1826;
    --search-cntr-secondary-color: #576a81;
    --search-input-bg: #101f32;
    --search-input-border-color: #18304d;
    --search-input-placeholder-color: #576a81;
    --search-history-item-bg: #101f32;
    --search-result-section-title-bg: #13253c;
    --search-result-item-border-color: #203f66;
    --daily-reward-detail-description-bg: #1b3453;
    --daily-reward-detail-description-color: #aebac8;
    --promotion-info-turnover-calculation-note: #ffc94a;
    --remark-notification-sub-color: #b2bdca;
    --bank-account-creation-remarks-border-color: #1b3f6b;
    --label-bg: #22436b;
    --floating-action-button-bg: #1e477a;
    --floating-action-button-border: #2b66ad;
    --bonus-sel-cntr-bg: #0c1d32;
    --bonus-sel-cntr-border: #183961;
    --bonus-sel-list-card-bg: #13263e;
    --bonus-sel-list-card-border: #22436b;
    --bonus-sel-list-card-selected-bg: #0c1d32;
    --bonus-sel-list-card-selected-border: #183961;
    --bonus-sel-list-card-footer-bg: #13263e;
    --bonus-sel-list-card-select-footer-bg: #0c1d32;
    --bonus-sel-list-card-false-bg: #1b3555;
    --bonus-sel-list-card-false-border: #22436b;
    --bonus-sel-list-card-footer-end-color: #255692;
    --bonus-selection-card-detail-bg: #1f3d61;
    --bonus-selection-card-disabled-color: #9eabbc;
    --bonus-selection-card-footer-disabled-bg: #1b3555;
    --bonus-selection-card-remarks-cntr-border: #1d4372;
    --bonus-selection-card-remarks-cntr-bg: #0c1d32;
    --bonus-selection-card-highlighted-section-bg: #172e4a;
    --payment-account-list-item-hover-bg: #152a43;
    --scrollbar-thumb-bg: #8496ac;
    --prediction-list-cntr-item-bg: #18314f;
    --bonus-sel-list-card-bonus-btn-bg: #1d385a;
    --bonus-sel-list-card-bonus-btn-border: #4b5b6e;
    --bonus-sel-list-card-selected-bonus-btn-color: #2e6cb7;
    --pending-trans-section-head-a-color: #ffc94a;
    --pending-trans-section-head-a-hover-color: #225089;
    --pending-trans-car-item-bg: #142841;
    --pending-trans-car-item-info-section-details-secondary-color: #b1bcc9;
    --pending-trans-car-item-download-qr-btn-bg: #204a7e;
    --pending-trans-car-item-download-qr-btn-hover-bg: #204a7e;
    --reporting-detail-popup-bg: #162c46;
    --pending-trans-detail-secondary-color: #b1bcc9;
    --pending-trans-detail-card-bg: #162c47;
    --pending-trans-detail-card-border-color: #203f64;
    --pending-trans-detail-card-secondary-section-bg: #18304e;
    --pending-trans-expiration-in-color: #99a7b9;
    --reporting-detail-overlay-bg: #0d1927;
    --resolved-transaction-carousel-navigation-bg: #1f3d61;
    --resolved-transaction-carousel-navigation-border-color: #778ba3;
    --modal-body-resolved-trans-wrapped-body-border-color: #203f64;
    --modal-body-resolved-trans-details-bg: #162c46;
    --modal-body-resolved-trans-details-cntr-bg: #142841;
    --modal-body-resolved-trans-details-secondary-color: #b1bcc9;
    --modal-body-resolved-trans-details-rejected-reason-text-color: #3070be;
    --transactions-table-bg: #122439;
    --transactions-table-border: #193250;
    --transactions-table-head-bg: #122439;
    --transactions-table-head-color: #b1bcc9;
    --transactions-table-head-border: #193250;
    --transactions-table-body-bg: #122439;
    --transactions-table-body-span-reject-color: #2b66ad;
    --transactions-table-body-span-pending-color: #ffc94a;
    --transactions-table-body-tr-odd-bg: #122439;
    --transaction-table-empty-bg: #122439;
    --transaction-table-empty-border: #193250;
    --transaction-table-empty-color: #71869f;
    --complaint-std-form-content-bg: #102033;
    --complaint-remarks-bg: #162c47;
    --complaint-remarks-header-color: #285ea0;
    --complaint-remarks-note-color: #55677d;
    --complaint-section-header-bg: #13273f;
    --complaint-procedure-step-border-color: #1b3554;
    --complaint-form-border-color: #18304d;
    --complaint-form-bg: #101f32;
    --complaint-upload-box-border-color: #1d385a;
    --complaint-upload-box-plus-color: #6f849d;
    --complaint-upload-box-bg: #0e1b2b;
    --complaint-form-link-header-a-border-color: #18304d;
    --complaint-cntr-std-form-link-header-a-true-border-color: #204a7e;
    --complaint-modal-btn-primary-bg: #1a3e69;
    --complaint-modal-btn-secondary-color: #09111b;
    --appeal-form-secondary-text-color: #8f9fb3;
    --upload-video-section-bg: #4b5b6f;
    --uploaded-video-file-display-bg: #0e1b2b;
    --uploaded-video-file-display-border-color: #1d385a;
    --uploaded-video-icon-container-bg: #193352;
    --uploaded-video-file-info-secondary-color: #57697f;
    --upload-drop-zone-bg: #0e1b2b;
    --upload-drop-zone-border-color: #1d385a;
    --upload-drop-zone-para-color: #516277;
    --upload-button-zone-bg: #162c47;
    --complaint-section-container-separator-bg: #13263e;
    --complaint-section-container-separator-border-color: #1d385a;
    --case-number-color: #1a3e69;
    --appeal-btn-color: #214d82;
    --appeal-status-box-bg: #0e1b2c;
    --appeal-status-box-border-color: #1d385a;
    --appeal-status-header-bg: #13273f;
    --appeal-status-timeline-color: #b1bcc9;
    --appeal-timeline-border-color: #1f3d62;
    --appeal-status-timeline-details-bg: #102034;
    --appeal-close-note-border-color: #13273f;
    --attachments-preview-pagination-color: #274d7c;
    --footer-section-secondary-color: #90a0b4;
    --footer-sitemap-icon-bg: #193352;
    --footer-banking-card-bg: #152b45;
    --bank-list-offline-bg: #1e4676;
    --social-login-btn-bg: #13253c;
    --social-login-btn-border-color: #22446d;
    --social-login-header-bg: #09111b;
    --social-login-container-header-separator-bg-color: linear-gradient(to right,#5b648900,#5c7088,#5b648900);
    --link-account-btn-bg: linear-gradient(180deg,#244874,#1c3656);
    --link-account-btn-hover-bg: linear-gradient(180deg,#21426a,#193250);
    --link-account-linked-bg: #122439;
    --link-account-linked-border-color: #1c3758;
    --sbo-live-badge-bg: #1c4372;
}

:root {
    --px-navy-950: #060e1a;
    --px-navy-900: #081321;
    --px-navy-800: #0b1a2e;
    --px-navy-700: #112237;
    --px-navy-600: #152a43;
    --px-line: #1d3350;
    --px-line-gold: rgba(255, 201, 74, .28);
    --px-orange: #ff5a24;
    --px-orange-dk: #e23a1c;
    --px-gold: #ffc94a;
    --px-gold-dk: #e9a923;
    --px-muted: #9fb0c4;
    --px-cta: linear-gradient(180deg, #ff7a3d 0%, #ff5a24 45%, #e23a1c 100%);
    --px-gold-grad: linear-gradient(180deg, #fff1b8 0%, #ffd45c 38%, #e9a923 100%);
    --px-card: linear-gradient(180deg, rgba(21, 42, 67, .92) 0%, rgba(11, 26, 46, .96) 100%);
    --px-shadow: 0 10px 30px rgba(0, 0, 0, .45);
    --px-radius: 16px;
}

/* ---------- Page canvas ---------- */
html,
body {
    background-color: var(--px-navy-900);
}

body {
    background-image:
        radial-gradient(1200px 520px at 50% -120px, rgba(255, 90, 36, .14), transparent 70%),
        radial-gradient(900px 600px at 100% 30%, rgba(255, 201, 74, .06), transparent 70%),
        linear-gradient(180deg, #0b1a2e 0%, #081321 38%, #060e1a 100%);
    background-attachment: fixed;
    color: #ffffff;
}

::selection {
    background: var(--px-orange);
    color: #fff;
}

/* ---------- Top bar ---------- */
.topbar-container {
    background: linear-gradient(180deg, #0d1f35 0%, #0a1626 100%);
    border-bottom: 1px solid var(--px-line-gold);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
}

.topbar-inner-container .logo img {
    filter: drop-shadow(0 4px 14px rgba(255, 201, 74, .25));
}

.topbar-sub-section .topbar-item a {
    color: #e6edf6;
    transition: color .2s ease;
}

.topbar-sub-section .topbar-item a:hover {
    color: var(--px-gold);
}

.topbar-sub-section .telegram-btn {
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(42, 171, 238, .25);
}

.login-panel .login-button,
.login-panel .register-button {
    border-radius: 12px;
    font-weight: 700;
    letter-spacing: .2px;
    transition: transform .15s ease, filter .15s ease, box-shadow .2s ease;
}

.login-panel .login-button {
    background: linear-gradient(180deg, #23405f 0%, #172d47 100%);
    border: 1px solid #2c4c72;
    color: #ffffff;
}

.login-panel .register-button {
    background: var(--px-cta);
    border: 1px solid rgba(255, 170, 120, .55);
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(255, 90, 36, .38);
}

.login-panel .login-button:hover,
.login-panel .register-button:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
}

/* ---------- Main menu ---------- */
.site-header {
    border-top: 1px solid rgba(255, 255, 255, .04);
    border-bottom: 1px solid var(--px-line-gold);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
}

.site-header .top-menu > li > a {
    font-weight: 600;
    letter-spacing: .2px;
}

.site-header .top-menu > li > a:hover {
    color: var(--px-gold);
}

/* ---------- Hero banner ---------- */
.banner-carousel {
    border-radius: var(--px-radius);
}

.banner-carousel .slide-item a {
    display: block;
    overflow: hidden;
    border-radius: var(--px-radius);
    border: 1px solid var(--px-line-gold);
    box-shadow: var(--px-shadow), 0 0 0 1px rgba(255, 255, 255, .03) inset;
}

.banner-carousel .banner-img {
    border-radius: var(--px-radius);
}

/* ---------- Hero slider (3 banners, auto-play) ---------- */
.hero-slider {
    position: relative;
    margin-top: 6px;
    border-radius: var(--px-radius);
    border: 1px solid var(--px-line-gold);
    box-shadow: var(--px-shadow), 0 0 40px rgba(255, 90, 36, .1);
    overflow: hidden;
    background: var(--px-navy-800);
}

.hero-viewport {
    overflow: hidden;
    border-radius: inherit;
}

.hero-track {
    display: flex;
    transition: transform .7s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}

.hero-slide {
    flex: 0 0 100%;
    min-width: 100%;
}

.hero-slide a {
    display: block;
}

.hero-slider .hero-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2172 / 724;
    object-fit: cover;
    border-radius: 0;
}

.hero-nav {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 42px;
    height: 42px;
    margin-top: -21px;
    padding: 0;
    border: 1px solid rgba(255, 201, 74, .45);
    border-radius: 50%;
    background: rgba(6, 14, 26, .55);
    color: #ffffff;
    font-size: 28px;
    line-height: 38px;
    text-align: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity .25s ease, background .2s ease;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.hero-prev { left: 14px; }
.hero-next { right: 14px; }

.hero-slider:hover .hero-nav,
.hero-nav:focus-visible {
    opacity: 1;
}

.hero-nav:hover {
    background: var(--px-orange);
}

.hero-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.hero-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .5);
    cursor: pointer;
    transition: width .3s ease, background .3s ease;
}

.hero-dot.is-active {
    width: 26px;
    background: var(--px-cta);
    box-shadow: 0 0 10px rgba(255, 90, 36, .6);
}

@media (max-width: 767px) {
    .hero-nav { display: none; }
    .hero-dots { bottom: 8px; }
    .hero-slider { border-radius: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-track { transition: none; }
}

/* ---------- Trending slot RTP carousel ---------- */
.rtp-section .standard-lottery-content {
    padding-bottom: 14px;
    overflow: hidden;
}

.rtp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.rtp-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border: 1px solid var(--px-line-gold);
    border-radius: 999px;
    background: rgba(255, 201, 74, .08);
    color: var(--px-gold);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.rtp-live {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22d36b;
    box-shadow: 0 0 8px #22d36b;
}

.rtp-live::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #22d36b;
    animation: rtpPing 1.6s ease-out infinite;
}

@keyframes rtpPing {
    from { transform: scale(1); opacity: .8; }
    to { transform: scale(2.6); opacity: 0; }
}

.rtp-marquee {
    position: relative;
    margin-top: 14px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.rtp-track {
    display: flex;
    gap: 14px;
    width: max-content;
    padding: 6px 0 10px;
    animation: rtpScroll 38s linear infinite;
}

.rtp-marquee:hover .rtp-track,
.rtp-marquee:focus-within .rtp-track {
    animation-play-state: paused;
}

@keyframes rtpScroll {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-50% - 7px)); }
}

.rtp-card {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    width: 300px;
    padding: 10px 14px 10px 10px;
    border: 1px solid var(--px-line);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(27, 53, 84, .9) 0%, rgba(13, 31, 53, .95) 100%);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
    color: #ffffff;
    text-decoration: none;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.rtp-card:hover,
.rtp-card:focus-visible {
    transform: translateY(-3px);
    border-color: var(--px-line-gold);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .45), 0 0 18px rgba(255, 201, 74, .12);
    color: #ffffff;
    text-decoration: none;
}

.rtp-thumb {
    flex: 0 0 84px;
    width: 84px;
    height: 84px;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid rgba(255, 201, 74, .25);
}

.rtp-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rtp-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    flex: 1 1 auto;
}

.rtp-provider {
    color: var(--px-muted);
    font-size: 11px;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.rtp-name {
    overflow: hidden;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rtp-meter {
    display: block;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
}

.rtp-meter-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #22d36b 0%, #ffc94a 70%, #ff7a3d 100%);
    box-shadow: 0 0 10px rgba(255, 201, 74, .35);
}

.rtp-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.rtp-value {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    color: var(--px-gold);
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
}

.rtp-value small {
    color: var(--px-muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .5px;
}

.rtp-vol {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #c9d4e2;
    font-size: 11px;
    white-space: nowrap;
}

.rtp-vol-dots {
    display: inline-flex;
    gap: 2px;
}

.rtp-vol-dots i {
    width: 5px;
    height: 10px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .15);
}

.rtp-vol-dots i.on {
    background: var(--px-orange);
}

.rtp-note {
    margin: 6px 2px 0;
    color: var(--px-muted);
    font-size: 11.5px;
    line-height: 1.6;
}

@media (max-width: 767px) {
    .rtp-card {
        width: 250px;
        padding: 8px 12px 8px 8px;
    }

    .rtp-thumb {
        flex-basis: 68px;
        width: 68px;
        height: 68px;
    }

    .rtp-value {
        font-size: 16px;
    }

    .rtp-track {
        animation-duration: 30s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rtp-track {
        animation: none;
    }

    .rtp-marquee {
        overflow-x: auto;
    }
}

/* ---------- Announcement ticker ---------- */
.announcement-container {
    margin-top: 16px;
    padding: 10px 16px;
    background: var(--px-card);
    border: 1px solid var(--px-line);
    border-left: 3px solid var(--px-orange);
    border-radius: 14px;
    box-shadow: var(--px-shadow);
}

.announcement-container [data-icon="news"] {
    filter: brightness(0) saturate(100%) invert(48%) sepia(87%) saturate(2400%) hue-rotate(347deg) brightness(101%);
}

.announcement-list li {
    color: #e6edf6;
}

/* scrolling ticker (items are cloned once by the inline script) */
.announcement-container [data-section="announcements"] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}

.announcement-list[data-ticker] {
    display: flex;
    width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
    animation: tickerScroll var(--ticker-duration, 40s) linear infinite;
}

.announcement-list[data-ticker]:hover {
    animation-play-state: paused;
}

.announcement-list[data-ticker] li {
    position: relative;
    flex: 0 0 auto;
    padding-right: 56px;
    white-space: nowrap;
    line-height: 1.6;
}

.announcement-list[data-ticker] li::after {
    content: '\2726';
    position: absolute;
    right: 21px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--px-gold);
    font-size: 12px;
}

@keyframes tickerScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ---------- Content panels (lottery results, popular games) ---------- */
.standard-lottery-container {
    margin-top: 22px;
}

.standard-lottery-container .standard-lottery-content,
.standard-lottery-container .lottery-menu {
    border-radius: var(--px-radius);
}

.standard-lottery-content {
    background: var(--px-card);
    border: 1px solid var(--px-line);
    box-shadow: var(--px-shadow);
}

.lottery-menu a[data-active="true"] {
    color: var(--px-gold);
}

.standard-form-title {
    color: #ffffff;
    letter-spacing: .3px;
}

.standard-form-title::before {
    background: var(--px-cta);
    border-radius: 3px;
}

.lottery-result-list .lottery-result-item {
    border-radius: 12px;
    border: 1px solid var(--px-line);
    overflow: hidden;
}

.lottery-number-container .lottery-number {
    background: linear-gradient(180deg, #1b3554 0%, #112237 100%);
    border: 1px solid #27466b;
    border-radius: 8px;
    color: #ffffff;
}

.cta-btn {
    background: var(--px-cta);
    border-radius: 999px;
    color: #fff;
    box-shadow: 0 4px 14px rgba(255, 90, 36, .35);
}

/* popular slot tiles */
.game-list .game-item .wrapper-container {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--px-line);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.game-list .game-item:hover .wrapper-container {
    transform: translateY(-3px);
    border-color: var(--px-line-gold);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .5), 0 0 18px rgba(255, 201, 74, .12);
}

.game-list .play-now {
    background: var(--px-cta);
    border-radius: 999px;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(255, 90, 36, .4);
}

.game-list .game-name {
    color: #e6edf6;
    font-weight: 500;
}

/* Telegram banner */
.telegram-banner-container img {
    border-radius: var(--px-radius);
    border: 1px solid var(--px-line);
    box-shadow: var(--px-shadow);
}

/* lottery rows: history panels were removed, so drop the expand affordance */
.lottery-result-list .lottery-result-item-header {
    cursor: default;
}

.lottery-result-list .lottery-result-item-header::after {
    display: none;
}

.lottery-result-list .lottery-result-item-header > span strong {
    white-space: nowrap;
}

@media (min-width: 768px) {
    .lottery-result-list .lottery-result-item .lottery-result-item-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 84px 168px 150px;
        align-items: center;
        column-gap: 18px;
        padding: 6px 16px 6px 8px;
    }

    .lottery-result-list .lottery-result-item .lottery-result-item-header > span,
    .lottery-result-list .lottery-result-item .lottery-result-item-header > span:nth-child(n) {
        width: auto;
        max-width: none;
        flex-basis: auto;
        min-width: 0;
        padding: 0;
        white-space: nowrap;
    }

    .lottery-result-list .lottery-result-item .lottery-result-item-header > span:not(.lottery-number-container) {
        text-align: left;
        justify-content: flex-start;
    }

    .lottery-result-list .lottery-result-item .lottery-result-item-header > .lottery-number-container {
        display: flex;
        justify-content: flex-end;
        margin-left: 0;
    }

    .lottery-result-list .lottery-result-item .lottery-result-item-header .lottery-name {
        width: auto;
        flex-basis: auto;
        gap: 12px;
        overflow: hidden;
    }

    .lottery-result-list .lottery-result-item .lottery-result-item-header .lottery-name strong {
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .lottery-result-list .lottery-result-item .lottery-result-item-header {
        grid-template-columns: minmax(0, 1fr) 76px 150px 132px;
        column-gap: 12px;
        font-size: 13px;
    }

    .lottery-result-list .lottery-result-item .lottery-result-item-header .lottery-name {
        font-size: 14px;
    }
}

/* local market badges */
.lottery-result-list .lottery-result-item .lottery-result-item-header .lottery-name img.market-logo {
    flex: 0 0 40px;
    width: 40px;
    max-width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
}

@media (max-width: 767px) {
    .lottery-result-list .lottery-result-item .lottery-result-item-header .lottery-name {
        gap: 10px;
    }

    .lottery-result-list .lottery-result-item .lottery-result-item-header .lottery-name img.market-logo {
        flex-basis: 34px;
        width: 34px;
        max-width: 34px;
        height: 34px;
        border-radius: 9px;
    }
}


/* horizontal menu: keep it swipeable but hide the scrollbar track */
.site-header .top-menu {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.site-header .top-menu::-webkit-scrollbar {
    display: none;
}

/* ---------- Footer ---------- */
.site-footer {
    background: linear-gradient(180deg, #081321 0%, #060e1a 100%);
    border-top: 1px solid var(--px-line-gold);
}

.footer-separator {
    border-top-color: var(--px-line);
}

.footer-description-section > .col-md-12:has(> h1) {
    margin-top: 28px;
    padding: 34px 38px 30px;
    background:
        radial-gradient(700px 260px at 0% 0%, rgba(255, 90, 36, .08), transparent 70%),
        var(--px-card);
    border: 1px solid var(--px-line-gold);
    border-radius: 22px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .02) inset;
}

.footer-sitemap-section h4 {
    color: var(--px-gold);
    font-weight: 700;
    letter-spacing: .4px;
}

.footer-sitemap-section .footer-links a {
    color: var(--px-muted);
    transition: color .2s ease;
}

.footer-sitemap-section .footer-links a:hover {
    color: #ffffff;
}

/* ---------- Footer info cards ---------- */
.footer-misc {
    margin: 8px 0 4px;
}

.footer-misc .row.equal {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    margin: 0;
}

.footer-misc .row.equal::before,
.footer-misc .row.equal::after {
    display: none;
}

.footer-misc .row.equal > [class*="col-"] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: auto;
    max-width: none;
    float: none;
    padding: 0;
}

.footer-misc .row.equal > [class*="col-"] > .footer-separator,
.footer-misc .title .footer-separator {
    display: none;
}

.footer-misc .title {
    position: relative;
    padding: 0 0 12px;
    margin-bottom: 2px;
    border-bottom: 1px solid var(--px-line);
}

.footer-misc .title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 56px;
    height: 2px;
    border-radius: 2px;
    background: var(--px-cta);
}

.footer-misc .title span {
    gap: 10px !important;
    font-size: 16px;
    letter-spacing: .3px;
    color: #ffffff !important;
}

.footer-misc .title i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(255, 90, 36, .14);
    border: 1px solid rgba(255, 90, 36, .35);
    color: var(--px-orange) !important;
    font-size: 14px;
}

.footer-misc .box-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    margin: 0 !important;
    padding: 16px 16px 14px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(21, 42, 67, .85) 0%, rgba(11, 26, 46, .92) 100%);
    border: 1px solid var(--px-line);
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.footer-misc .box-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 201, 74, .45), transparent);
}

.footer-misc .box-wrapper:hover {
    transform: translateY(-2px);
    border-color: var(--px-line-gold);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .42), 0 0 18px rgba(255, 201, 74, .08);
}

.footer-misc .subtitle span {
    gap: 10px !important;
    font-size: 14.5px;
    line-height: 1.4;
    color: var(--px-gold) !important;
}

.footer-misc .subtitle i {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--px-cta);
    color: #ffffff !important;
    font-size: 12px;
    box-shadow: 0 4px 12px rgba(255, 90, 36, .35);
}

.footer-misc .box-content {
    margin-top: 10px !important;
    padding-left: 40px;
}

.footer-misc .box-content span {
    display: block;
    font-size: 13.5px;
    line-height: 1.75;
    color: #b9c6d6 !important;
}

.footer-misc .box-content .footer-separator {
    display: none;
}

@media (max-width: 1199px) {
    .footer-misc .row.equal {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .footer-misc .row.equal {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .footer-misc .box-content {
        padding-left: 0;
    }
}

/* ---------- Payment / bank logos ---------- */
.footer-banking-section .bank-list-container {
    padding: 22px 24px 16px;
    background: linear-gradient(180deg, rgba(21, 42, 67, .85) 0%, rgba(11, 26, 46, .92) 100%);
    border: 1px solid var(--px-line);
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}

.footer-banking-section .bank-list-container .bank-list-title {
    margin: 0 0 4px;
    color: var(--px-gold);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .3px;
}

.footer-banking-section .bank-list {
    gap: 12px;
    padding: 12px 0 14px;
}

.footer-banking-section .bank-list > li {
    margin: 0;
    padding: 0;
}

.bank-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 124px;
    height: 58px;
    padding: 9px 12px;
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
    transition: transform .2s ease, box-shadow .2s ease;
}

.bank-chip:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .45), 0 0 0 2px rgba(255, 201, 74, .55);
}

.footer-banking-section .bank-chip .bank-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    opacity: 1;
    filter: none;
}

@media (max-width: 575px) {
    .footer-banking-section .bank-list-container {
        padding: 18px 14px 12px;
    }

    .footer-banking-section .bank-list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .bank-chip {
        width: 100%;
        height: 50px;
        padding: 7px 8px;
    }
}

/* ---------- Social icons (inline SVG) ---------- */
.social-media-list a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--px-muted);
    transition: color .2s ease;
}

.social-media-list a:hover {
    color: #ffffff;
}

.social-media-list a > i.social-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #1b3350;
    border: 1px solid #2c4c72;
    color: #ffffff;
    transition: background .2s ease, border-color .2s ease;
}

.social-media-list a > i.social-ico svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

.social-media-list a:hover > i.social-fb {
    background: #1877f2;
    border-color: #1877f2;
}

.social-media-list a:hover > i.social-x {
    background: #000000;
    border-color: #3a3a3a;
}

.bank-list .bank-logo-wrapper,
.bank-list li > img,
.bank-list li > div {
    border-radius: 10px;
}

.footer-copyright-section,
.site-footer .copyright {
    color: var(--px-muted);
}

/* ---------- Article (footer description) ---------- */
.footer-description-section h1 {
    margin: 0 0 6px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--px-gold);
    background: var(--px-gold-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}

.footer-description-section h1::after {
    content: '';
    display: block;
    width: 84px;
    height: 3px;
    margin-top: 14px;
    border-radius: 3px;
    background: var(--px-cta);
}

.footer-description-section .site-description,
.site-description p,
.site-description li {
    font-size: 15px;
    line-height: 1.9;
    color: #d3dcea;
}

.site-description h2 {
    position: relative;
    margin: 38px 0 10px;
    padding-left: 16px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--px-gold);
}

.site-description h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 4px;
    border-radius: 4px;
    background: var(--px-cta);
}

.site-description h3 {
    margin: 24px 0 6px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    color: #ffffff;
}

.site-description ul,
.site-description ol {
    margin: 10px 0 14px;
    padding: 14px 18px 14px 40px;
    background: rgba(8, 19, 33, .55);
    border: 1px solid var(--px-line);
    border-radius: 14px;
}

.site-description li + li {
    margin-top: 4px;
}

.site-description li::marker {
    color: var(--px-orange);
    font-weight: 700;
}

.site-description p a {
    color: var(--px-gold);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(255, 201, 74, .45);
    text-underline-offset: 3px;
}

.site-description p a:hover {
    color: #ffffff;
    text-decoration-color: var(--px-orange);
}

.article-table-wrapper {
    margin: 18px 0;
    overflow-x: auto;
    border: 1px solid var(--px-line-gold);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}

.article-table {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
    font-size: 14px;
}

.article-table th {
    padding: 12px 16px;
    background: var(--px-cta);
    color: #ffffff;
    font-weight: 700;
    text-align: left;
}

.article-table td {
    padding: 11px 16px;
    border-top: 1px solid var(--px-line);
    color: #e6edf6;
    background: rgba(11, 26, 46, .6);
}

.article-table tbody tr:nth-child(even) td {
    background: rgba(21, 42, 67, .55);
}

.article-table td:first-child {
    color: var(--px-gold);
    font-weight: 600;
}

.faq-section h2 {
    padding-left: 0;
}

.faq-section h2::before {
    display: none;
}

.faq-section h2::after {
    content: '';
    display: block;
    width: 64px;
    height: 3px;
    margin: 12px auto 0;
    border-radius: 3px;
    background: var(--px-cta);
}

/* desktop: keep the CTA labels on one line */
@media (min-width: 768px) {
    .login-panel .login-button,
    .login-panel .register-button {
        width: auto;
        min-width: 112px;
        padding: 8px 18px;
        white-space: nowrap;
    }
}

/* ---------- Header icons on the dark top bar ---------- */
.topbar-sub-section [data-icon]:not([data-icon="telegram"]) {
    filter: brightness(0) invert(1);
    opacity: .85;
}

/* ---------- Images ---------- */
.banner-img,
.telegram-banner-container img,
.topbar-inner-container .logo img {
    max-width: 100%;
    height: auto;
}

.banner-img {
    width: 100%;
    aspect-ratio: 16 / 5;
    object-fit: cover;
    object-position: center;
}

/* ---------- Tablet (the platform template is desktop-only) ---------- */
@media (max-width: 991px) {
    .topbar-inner-container {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .topbar-inner-container .logo {
        flex: 0 0 100%;
        max-width: 260px;
        margin: 0 auto;
    }

    .topbar-inner-container .logo img {
        display: block;
        width: 100%;
    }

    .topbar-inner-group {
        width: 100%;
        align-items: center;
    }

    .topbar-sub-section {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 6px;
    }

    .login-panel {
        justify-content: center;
    }

    .top-menu {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .footer-sitemap-section {
        flex-wrap: wrap;
        padding-right: 0;
        gap: 10px 20px;
    }

    .footer-sitemap-section > div {
        flex: 1 1 40%;
    }

    .footer-sitemap-section div + div {
        margin-left: 0;
    }

    .footer-misc .row.equal {
        display: flex;
        flex-wrap: wrap;
    }

    .footer-copyright-section .col-md-12 {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px 24px;
    }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
    .topbar-sub-section .topbar-item a {
        padding: 5px 6px;
        font-size: 12px;
    }

    .topbar-sub-section .topbar-item + .topbar-item {
        margin-left: 6px;
    }

    .login-panel .login-button,
    .login-panel .register-button {
        width: auto;
        min-width: 120px;
        padding: 6px 14px;
        font-size: 14px;
    }

    .announcement-container {
        font-size: 13px;
        font-weight: 500;
    }

    .lottery-menu a {
        font-size: 14px;
        line-height: 1.4;
    }

    /* lottery cards: market name on its own row, draw info + numbers below */
    .lottery-result-list .lottery-result-item .lottery-result-item-header {
        flex-wrap: wrap;
        row-gap: 4px;
        padding-right: 36px;
    }

    .lottery-result-list .lottery-result-item .lottery-result-item-header .lottery-name {
        width: 100%;
        flex-basis: 100%;
        font-size: 14px;
    }

    .lottery-result-list .lottery-result-item .lottery-result-item-header > span:not(.lottery-name) {
        width: auto;
        flex: 0 0 auto;
        padding-left: 10px;
        font-size: 12px;
        white-space: nowrap;
    }

    .lottery-result-list .lottery-result-item .lottery-number-container {
        padding-right: 0;
    }

    .lottery-result-list .lottery-result-item .lottery-result-item-header > .lottery-number-container {
        margin-left: auto;
        padding-bottom: 8px;
    }

    .lottery-result-list .lottery-result-list .lottery-number-container .lottery-number,
    .lottery-result-list .lottery-number-container .lottery-number {
        width: 28px;
        height: 28px;
        font-size: 16px;
    }

    .lottery-result-list .lottery-result-item .lottery-result-item-details .lottery-result-item-history-section .lottery-result-item-history-section-item {
        height: auto;
        flex-wrap: wrap;
        row-gap: 4px;
        padding: 8px 10px;
    }

    .lottery-result-list .lottery-result-item .lottery-result-item-details .lottery-result-item-history-section .lottery-number-container .lottery-number {
        width: 24px;
        height: 24px;
        font-size: 14px;
    }

    .lottery-result-list .lottery-result-item .lottery-result-item-details .lottery-result-item-history-section .lottery-result-item-history-section-item > span:not(.lottery-number-container):not(.offset) {
        width: auto;
        flex: 0 0 auto;
        padding-right: 10px;
        font-size: 12px;
        white-space: nowrap;
    }

    .lottery-result-list .lottery-result-item .lottery-result-item-details .lottery-result-item-history-section .lottery-result-item-history-section-item > span:first-child,
    .lottery-result-list .lottery-result-item .lottery-result-item-details .lottery-result-item-history-section .lottery-result-item-history-section-item > span.offset {
        display: none;
    }

    .lottery-result-list .lottery-result-item .lottery-result-item-details .lottery-result-item-history-section .lottery-result-item-history-section-item > .lottery-number-container {
        width: auto;
        flex: 0 0 auto;
        margin-left: auto;
    }

    /* popular games: readable thumbnails in the horizontal scroller */
    .popular-game-title-container + .game-list-container .game-list .games-group {
        width: 118px;
    }

    .lottery-result-list .lottery-result-item .lottery-result-item-details .lottery-result-item-footer > span {
        width: 100%;
        flex-basis: 100%;
        flex-wrap: wrap;
        gap: 8px;
    }

    .lottery-result-list .lottery-result-item .lottery-result-item-details .offset,
    .lottery-result-list .lottery-result-item .lottery-result-item-details .lottery-result-item-footer > span:first-child {
        display: none;
    }

    .lottery-result-list .lottery-result-item .lottery-result-item-details .lottery-result-item-footer .info-section {
        padding-right: 0;
        gap: 12px;
    }

    .footer-description-section h1 {
        font-size: 22px;
    }

    .footer-description-section > .col-md-12:has(> h1) {
        margin-top: 18px;
        padding: 24px 16px 20px;
        border-radius: 18px;
    }

    .site-description ul,
    .site-description ol {
        padding: 12px 12px 12px 30px;
    }

    .announcement-container {
        padding: 10px 12px;
    }

    .site-description h2,
    .faq-section h2 {
        font-size: 19px;
    }

    .site-description h3 {
        font-size: 17px;
    }

    .footer-sitemap-section > div {
        flex-basis: 100%;
    }
}