/* style/payment-methods.css */\n\n/* Base Styles for Payment Methods Page */\n.page-payment-methods {\n    font-family: 'Arial', sans-serif;\n    line-height: 1.6;\n    color: #ffffff; /* Light text on dark body background */\n    background-color: #000000; /* Body background from shared.css */\n}\n\n/* Fixed Header Padding (Crucial for fixed header) */\n.page-payment-methods__hero-section {\n    padding-top: 10px;\n    margin-top: 0;\n}\n\n/* General Container */\n.page-payment-methods__container {\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 60px 20px;\n    box-sizing: border-box;\n}\n\n/* Section Titles and Descriptions */\n.page-payment-methods__section-title {\n    font-size: 36px;\n    font-weight: bold;\n    color: #FFD700; /* Gold for main titles */\n    text-align: center;\n    margin-bottom: 20px;\n    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\n}\n\n.page-payment-methods__section-description {\n    font-size: 18px;\n    color: #f0f0f0;\n    text-align: center;\n    max-width: 800px;\n    margin: 0 auto 40px auto;\n}\n\n/* Hero Section */\n.page-payment-methods__hero-section {\n    position: relative;\n    overflow: hidden;\n    padding-bottom: 0;\n    text-align: center;\n    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(139, 0, 0, 0.2)), #000000; /* Subtle gradient over dark bg */\n}\n\n.page-payment-methods__hero-container {\n    position: relative;\n    z-index: 2;\n    max-width: 900px;\n    margin: 0 auto;\n    padding: 80px 20px 40px;\n}\n\n.page-payment-methods__hero-title {\n    font-size: 48px;\n    font-weight: bold;\n    color: #FFD700;\n    margin-bottom: 20px;\n    line-height: 1.2;\n    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);\n}\n\n.page-payment-methods__hero-description {\n    font-size: 20px;\n    color: #ffffff;\n    margin-bottom: 40px;\n    max-width: 700px;\n    margin-left: auto;\n    margin-right: auto;\n}\n\n.page-payment-methods__hero-image-wrapper {\n    position: relative;\n    width: 100%;\n    height: auto;\n    margin-top: -40px; /* Pull image up slightly to overlap text */\n    z-index: 1;\n}\n\n.page-payment-methods__hero-image {\n    width: 100%;\n    height: auto;\n    display: block;\n    object-fit: cover;\n    max-height: 500px; /* Limit height of hero image */\n}\n\n/* Primary Button */\n.page-payment-methods__btn-primary {\n    display: inline-block;\n    background: #FFD700; /* Gold */\n    color: #000000; /* Black text for contrast */\n    padding: 15px 30px;\n    border-radius: 8px;\n    text-decoration: none;\n    font-size: 20px;\n    font-weight: bold;\n    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;\n    border: none;\n    cursor: pointer;\n    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);\n}\n\n.page-payment-methods__btn-primary:hover {\n    background: #e6c200; /* Slightly darker gold */\n    transform: translateY(-3px);\n    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.6);\n}\n\n/* Secondary Button */\n.page-payment-methods__btn-secondary {\n    display: inline-block;\n    background: transparent;\n    color: #FFD700; /* Gold text */\n    padding: 15px 30px;\n    border-radius: 8px;\n    text-decoration: none;\n    font-size: 20px;\n    font-weight: bold;\n    border: 2px solid #FFD700; /* Gold border */\n    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;\n    cursor: pointer;\n}\n\n.page-payment-methods__btn-secondary:hover {\n    background: #FFD700;\n    color: #000000; /* Black text on hover */\n    transform: translateY(-3px);\n    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.3);\n}\n\n/* Feature Grid (Overview Section) */\n.page-payment-methods__feature-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n    gap: 30px;\n    margin-top: 40px;\n}\n\n.page-payment-methods__feature-card {\n    background: rgba(255, 255, 255, 0.08); /* Semi-transparent white */\n    padding: 30px;\n    border-radius: 12px;\n    text-align: center;\n    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);\n    transition: transform 0.3s ease, background-color 0.3s ease;\n    border: 1px solid rgba(255, 215, 0, 0.2);\n}\n\n.page-payment-methods__feature-card:hover {\n    transform: translateY(-8px);\n    background: rgba(255, 255, 255, 0.15);\n}\n\n.page-payment-methods__feature-card-title {\n    font-size: 24px;\n    color: #FFD700;\n    margin-bottom: 15px;\n    font-weight: bold;\n}\n\n.page-payment-methods__feature-card-text {\n    font-size: 16px;\n    color: #e0e0e0;\n}\n\n/* Method Grid (Deposit/Withdrawal Sections) */\n.page-payment-methods__method-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 30px;\n    margin-top: 40px;\n}\n\n.page-payment-methods__method-card {\n    background: rgba(255, 255, 255, 0.08);\n    border-radius: 12px;\n    overflow: hidden;\n    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);\n    transition: transform 0.3s ease, box-shadow 0.3s ease;\n    border: 1px solid rgba(139, 0, 0, 0.3);\n}\n\n.page-payment-methods__method-card:hover {\n    transform: translateY(-8px);\n    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);\n}\n\n.page-payment-methods__method-image {\n    width: 100%;\n    height: 200px;\n    object-fit: cover;\n    display: block;\n}\n\n.page-payment-methods__method-title {\n    font-size: 22px;\n    font-weight: bold;\n    color: #FFD700;\n    padding: 20px 15px 10px;\n}\n\n.page-payment-methods__method-text {\n    font-size: 15px;\n    color: #e0e0e0;\n    padding: 0 15px 20px;\n}\n\n.page-payment-methods__cta-wrapper {\n    text-align: center;\n    margin-top: 50px;\n}\n\n/* Important Notes Section */\n.page-payment-methods__notes-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 30px;\n    margin-top: 40px;\n}\n\n.page-payment-methods__note-card {\n    background: rgba(139, 0, 0, 0.2); /* Dark red transparent */\n    padding: 25px;\n    border-radius: 10px;\n    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);\n    border: 1px solid rgba(255, 215, 0, 0.2);\n}\n\n.page-payment-methods__note-title {\n    font-size: 20px;\n    font-weight: bold;\n    color: #FFD700;\n    margin-bottom: 10px;\n}\n\n.page-payment-methods__note-text {\n    font-size: 16px;\n    color: #e0e0e0;\n}\n\n/* Tips Section */\n.page-payment-methods__tip-list {\n    list-style: none;\n    padding: 0;\n    margin-top: 40px;\n    max-width: 800px;\n    margin-left: auto;\n    margin-right: auto;\n}\n\n.page-payment-methods__tip-item {\n    display: flex;\n    align-items: flex-start;\n    background: rgba(255, 255, 255, 0.05);\n    border-radius: 8px;\n    margin-bottom: 20px;\n    padding: 20px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n    border: 1px solid rgba(255, 215, 0, 0.1);\n}\n\n.page-payment-methods__tip-icon {\n    font-size: 24px;\n    color: #FFD700;\n    margin-right: 15px;\n    flex-shrink: 0;\n    line-height: 1;\n}\n\n.page-payment-methods__tip-text {\n    font-size: 17px;\n    color: #ffffff;\n    margin: 0;\n}\n\n/* FAQ Section */\n.page-payment-methods__faq-list {\n    margin-top: 40px;\n    max-width: 900px;\n    margin-left: auto;\n    margin-right: auto;\n}\n\n/* FAQ容器样式 */\n.page-payment-methods__faq-item {\n  margin-bottom: 15px;\n  border-radius: 8px;\n  overflow: hidden;\n  background: rgba(255, 255, 255, 0.08);\n  border: 1px solid rgba(255, 215, 0, 0.2);\n}\n\n/* FAQ默认状态 - 答案隐藏 */\n.page-payment-methods__faq-answer {\n  max-height: 0;\n  overflow: hidden;\n  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s ease, opacity 0.4s ease;\n  padding: 0 20px;\n  opacity: 0;\n}\n\n/* FAQ展开状态 - \u26A0\uFE0F Sử dụng!important và đủ lớn max-height để đảm bảo có thể mở rộng */\n.page-payment-methods__faq-item.active .page-payment-methods__faq-answer {\n  max-height: 2000px !important;\n  padding: 20px !important;\n  opacity: 1;\n  background: rgba(139, 0, 0, 0.2);\n  border-radius: 0 0 8px 8px;\n  color: #f0f0f0;\n}\n\n/* Vấn đề phong cách */\n.page-payment-methods__faq-question {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 18px 20px;\n  background: rgba(255, 255, 255, 0.12);\n  border-radius: 8px;\n  cursor: pointer;\n  user-select: none;\n  transition: background-color 0.3s ease, border-color 0.3s ease;\n  position: relative;\n  color: #ffffff;\n}\n\n.page-payment-methods__faq-item.active .page-payment-methods__faq-question {\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n    background: rgba(255, 215, 0, 0.15);\n}\n\n.page-payment-methods__faq-question:hover {\n  background: rgba(255, 255, 255, 0.2);\n}\n\n.page-payment-methods__faq-question:active {\n  background: rgba(255, 255, 255, 0.25);\n}\n\n/* Vấn đề tiêu đề phong cách */\n.page-payment-methods__faq-question h3 {\n  margin: 0;\n  padding: 0;\n  flex: 1;\n  font-size: 18px;\n  font-weight: 600;\n  line-height: 1.5;\n  pointer-events: none;\n  color: #FFD700;\n}\n\n/* Chuyển đổi biểu tượng */\n.page-payment-methods__faq-toggle {\n  font-size: 28px;\n  font-weight: bold;\n  line-height: 1;\n  color: #FFD700;\n  transition: transform 0.3s ease, color 0.3s ease;\n  flex-shrink: 0;\n  margin-left: 15px;\n  pointer-events: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n}\n\n.page-payment-methods__faq-item.active .page-payment-methods__faq-toggle {\n  color: #FFD700;\n  transform: rotate(180deg);\n}\n\n/* Responsive Design */\n@media (max-width: 1024px) {\n    .page-payment-methods__hero-title {\n        font-size: 40px;\n    }\n    .page-payment-methods__hero-description {\n        font-size: 18px;\n    }\n    .page-payment-methods__section-title {\n        font-size: 32px;\n    }\n    .page-payment-methods__section-description {\n        font-size: 16px;\n    }\n    .page-payment-methods__feature-grid,\n    .page-payment-methods__method-grid,\n    .page-payment-methods__notes-grid {\n        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n        gap: 25px;\n    }\n}\n\n@media (max-width: 768px) {\n    /* Mobile Fixed Header Padding */\n    .page-payment-methods__hero-section {\n        padding-top: 10px !important;\n    }\n\n    .page-payment-methods__container {\n        padding: 40px 15px !important;\n        max-width: 100% !important;\n        width: 100% !important;\n        box-sizing: border-box !important;\n    }\n\n    .page-payment-methods__hero-container {\n        padding: 60px 15px 30px;\n    }\n\n    .page-payment-methods__hero-title {\n        font-size: 32px;\n    }\n\n    .page-payment-methods__hero-description {\n        font-size: 16px;\n        margin-bottom: 30px;\n    }\n\n    .page-payment-methods__hero-image {\n        max-height: 300px;\n    }\n\n    .page-payment-methods__section-title {\n        font-size: 28px;\n    }\n\n    .page-payment-methods__section-description {\n        font-size: 15px;\n        margin-bottom: 30px;\n    }\n\n    .page-payment-methods__btn-primary,\n    .page-payment-methods__btn-secondary {\n        width: 100% !important;\n        max-width: 100% !important;\n        padding: 12px 20px !important;\n        font-size: 18px !important;\n        box-sizing: border-box !important;\n        white-space: normal !important;\n        word-wrap: break-word !important;\n    }\n\n    /* All images responsive */\n    .page-payment-methods img {\n        max-width: 100% !important;\n        width: 100% !important;\n        height: auto !important;\n        box-sizing: border-box !important;\n    }\n\n    /* All containers with images */\n    .page-payment-methods__hero-image-wrapper,\n    .page-payment-methods__method-card,\n    .page-payment-methods__feature-card,\n    .page-payment-methods__note-card,\n    .page-payment-methods__tip-item {\n        max-width: 100% !important;\n        width: 100% !important;\n        box-sizing: border-box !important;\n    }\n\n    .page-payment-methods__feature-grid,\n    .page-payment-methods__method-grid,\n    .page-payment-methods__notes-grid {\n        grid-template-columns: 1fr;\n        gap: 20px;\n    }\n\n    .page-payment-methods__feature-card,\n    .page-payment-methods__method-card,\n.page-payment-methods__note-card {\n        padding: 20px;\n    }\n\n    .page-payment-methods__feature-card-title,\n    .page-payment-methods__method-title,\n    .page-payment-methods__note-title {\n        font-size: 20px;\n    }\n\n    .page-payment-methods__feature-card-text,\n    .page-payment-methods__method-text,\n    .page-payment-methods__note-text {\n        font-size: 15px;\n    }\n\n    .page-payment-methods__tip-item {\n        padding: 15px;\n    }\n    .page-payment-methods__tip-icon {\n        font-size: 20px;\n        margin-right: 10px;\n    }\n    .page-payment-methods__tip-text {\n        font-size: 15px;\n    }\n\n    /* FAQ Mobile */\n    .page-payment-methods__faq-question {\n        padding: 15px;\n        flex-wrap: wrap;\n    }\n    \n    .page-payment-methods__faq-question h3 {\n        font-size: 16px;\n        margin-bottom: 0;\n        width: calc(100% - 40px);\n    }\n    \n    .page-payment-methods__faq-toggle {\n        margin-left: 10px;\n        width: 28px;\n        height: 28px;\n        font-size: 24px;\n    }\n    \n    .page-payment-methods__faq-answer {\n        padding: 0 15px;\n    }\n    \n    .page-payment-methods__faq-item.active .page-payment-methods__faq-answer {\n        padding: 15px !important;\n    }\n}\n\n/* Ensure contrast for dark background */\n.page-payment-methods__dark-bg {\n    color: #ffffff;\n}\n.page-payment-methods__hero-title,\n.page-payment-methods__section-title,\n.page-payment-methods__feature-card-title,\n.page-payment-methods__method-title,\n.page-payment-methods__note-title,\n.page-payment-methods__faq-question h3,\n.page-payment-methods__faq-toggle {\n    color: #FFD700;\n}\n.page-payment-methods__hero-description,\n.page-payment-methods__section-description,\n.page-payment-methods__feature-card-text,\n.page-payment-methods__method-text,\n.page-payment-methods__note-text,\n.page-payment-methods__tip-text,\n.page-payment-methods__faq-answer p {\n    color: #f0f0f0;\n}\n\n/* No CSS filter on images */\n.page-payment-methods img {\n    filter: none;\n}