/* พื้นหลังฟุตเตอร์ด้านล่าง (กรณีที่เป็นพื้นหลังสีขาวตามที่แจ้ง) */
.footer-bottom {
    background: #ffffff;
    padding: 25px 0;
    border-top: 2px solid rgba(255, 46, 99, 0.1); /* เส้นคั่นบางๆ สีแดงอมชมพูจางๆ */
    position: relative;
    overflow: hidden;
}

/* จัดหน้าแบบ Flexbox ให้ตอบรับทุกหน้าจอ (Responsive) */
.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

/* ข้อความทั่วไป: ใช้สีเข้มเพื่อตัดกับพื้นหลังขาวอย่างชัดเจน */
.copyright-text, .designed-text {
    color: #2b2b2b;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
    font-family: 'Kanit', sans-serif; /* หรือฟอนต์ที่คุณใช้งานอยู่ */
}

/* --- [ เอฟเฟกต์ลูกเล่นตัวหนังสือแบรนด์ ] --- */
.brand-neon {
    font-weight: 800;
    letter-spacing: 1px;
    /* ไล่เฉดสีแดงอมชมพู (Crimson to Hot Pink) */
    background: linear-gradient(45deg, #ff2e63, #ff4e7e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 0.3s ease;
    display: inline-block;
    cursor: pointer;
}

/* เมื่อ Hover ที่ชื่อแบรนด์ จะเรืองแสงสะท้อนออกมา */
.brand-neon:hover {
    transform: translateY(-2px);
    text-shadow: 0 4px 12px rgba(255, 46, 99, 0.4);
}

/* --- [ เอฟเฟกต์ส่วนผู้พัฒนา ] --- */
.studio-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.studio-name {
    color: #ff2e63;
    font-weight: 600;
    transition: color 0.3s ease;
}

.studio-link:hover .studio-name {
    color: #ff0044; /* เข้มขึ้นเมื่อจี้เมาส์ */
    text-decoration: underline;
}

/* --- [ แอนิเมชันไอคอนจอยเกมส์เต้นแบบนุ่มนวล ] --- */
.heart-beat-pink {
    color: #ff2e63;
    font-size: 16px;
    animation: smoothBeat 1.8s infinite ease-in-out;
    filter: drop-shadow(0 2px 4px rgba(255, 46, 99, 0.3));
}

@keyframes smoothBeat {
    0%, 100% {
        transform: scale(1);
    }
    30% {
        transform: scale(1.25) rotate(-5deg);
    }
    45% {
        transform: scale(1.1) rotate(5deg);
    }
    60% {
        transform: scale(1.2) rotate(0deg);
    }
}

/* รองรับการแสดงผลบนมือถือให้จัดอยู่ตรงกลาง */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        text-align: center;
        justify-content: center;
    }
}
	/* 🧱 ตัวกรอบการ์ดข่าวสารสีขาวทึบ 100% สไตล์พรีเมียม */
.ro-news-container-card {
    background: #ffffff !important; /* ขาวจั๊วะสนิท ไม่มีกระจกฝ้า */
    border: 1px solid rgba(255, 51, 102, 0.25);
    border-radius: 24px;
    padding: 35px;
    position: relative;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03), 
                0 15px 35px rgba(0, 0, 0, 0.08),
                0 0 25px rgba(255, 51, 102, 0.1);
}

/* หัวข้อข่าวสาร */
.news-title {
    font-weight: 800;
    letter-spacing: 1px;
    color: #1a1a24; /* สีเข้มเด่นชัดเจนบนพื้นขาว */
    font-size: 22px;
}
.news-title .text-pink {
    color: #ff3366 !important;
}

/* ไอคอนแตรขยับสั่นเวลาโหลดหน้าเว็บ */
.icon-bounce {
    display: inline-block;
    animation: iconIncline 2s ease-in-out infinite alternate;
}
@keyframes iconIncline {
    0% { transform: rotate(-5deg); }
    100% { transform: rotate(10deg); }
}

/* 🏷️ แท็บเปลี่ยนหมวดหมู่สไตล์แคปซูลสำหรับพื้นขาว */
.btn-tab {
    background: #f1f3f5;
    border: 1px solid rgba(0, 0, 0, 0.05);
    color: #495057;
    padding: 8px 22px;
    border-radius: 50px; /* ทรงแคปซูลมน */
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.btn-tab:hover {
    color: #ff3366;
    background: rgba(255, 51, 102, 0.05);
    transform: translateY(-2px);
}
.btn-tab.active {
    background: linear-gradient(135deg, #ff3366 0%, #ff0055 100%) !important;
    border-color: #ff3366;
    color: #ffffff !important;
    box-shadow: 0 5px 15px rgba(255, 51, 102, 0.35);
}

/* 📰 กล่องแถวข่าวสารย่อยแต่ละข่าว */
.news-item {
    background: #f8f9fa; /* สีพื้นหลังกล่องย่อยให้ตัดกับการ์ดขาวหลัก */
    border: 1px solid rgba(0, 0, 0, 0.04);
    padding: 16px 24px;
    border-radius: 18px;
    cursor: pointer;
    position: relative;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* ⚡ เอฟเฟกต์เมาส์ชี้กล่องข่าวสาร: กล่องสไลด์พุ่งไปข้างหน้า + เด้งขาวลอย */
.news-item:hover {
    background: #ffffff;
    border-color: rgba(255, 51, 102, 0.35);
    transform: translateX(8px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

/* รูปขนาดย่อหน้าข่าว (Thumbnail) */
.news-thumb {
    width: 90px;
    height: 75px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.5px;
    border-radius: 14px;
    text-align: center;
    padding: 6px;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.02);
    transition: all 0.4s ease;
}
.font-14 { font-size: 15px; }

/* เมื่อชี้กล่องข่าว: กล่องรูปภาพขนาดเล็กจะยืดเปลี่ยนเป็นสีธีมสะใจ */
.news-item:hover .news-thumb.bg-pink-light {
    background: #ff3366 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(255, 51, 102, 0.3);
}
.news-item:hover .news-thumb.bg-blue-light {
    background: #3399ff !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(51, 153, 255, 0.3);
}

/* ป้ายแสดงหมวดหมู่ */
.badge-cate {
    font-size: 10px;
    padding: 3px 10px;
    border-radius: 6px;
    font-weight: 700;
    letter-spacing: 0.5px;
    display: inline-block;
    margin-bottom: 6px;
}
.cate-event { background: rgba(255, 170, 0, 0.15); color: #e69900; }
.cate-update { background: rgba(51, 153, 255, 0.15); color: #0077e6; }

/* ตัวหนังสือหัวข้อข่าวและรายละเอียด (คมชัดระดับ HD ไม่จมพื้นขาว) */
.news-subject {
    color: #1a1a24; /* สีชาร์โคลเข้ม */
    font-size: 17px;
    font-weight: 700;
    transition: color 0.3s ease;
}
/* เมื่อชี้กล่องข่าว: ตัวหนังสือหัวข้อจะวิ่งเป็นสีชมพู */
.news-item:hover .news-subject {
    color: #ff3366;
}

.news-desc {
    color: #555565; /* สีเทาเข้มอ่านง่ายถนอมสายตา */
    font-size: 13.5px;
    margin-top: 2px !important;
    margin-bottom: 4px !important;
}

.news-date {
    color: #a0a0b0;
    font-size: 11px;
    font-weight: 500;
}

/* หัวลูกศรด้านขวา */
.news-arrow {
    color: rgba(0, 0, 0, 0.2);
    font-size: 20px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* เอฟเฟกต์ลูกศรพุ่งขยายขยับกระโดด */
.news-item:hover .news-arrow {
    color: #ff3366;
    transform: scale(1.2) translateX(3px);
}

/* 🔢 ระบบปุ่มตัวเลขเปลี่ยนหน้า (Pagination Neon) */
.pagination .page-link {
    background: #f1f3f5;
    border: 1px solid rgba(0, 0, 0, 0.05);
    color: #495057;
    border-radius: 10px !important;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    transition: all 0.3s ease;
}
.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #ff3366 0%, #ff0055 100%);
    border-color: #ff3366;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(255, 51, 102, 0.35);
}
.pagination .page-link:hover:not(.active) {
    background: rgba(255, 51, 102, 0.1);
    color: #ff3366;
    border-color: rgba(255, 51, 102, 0.3);
    transform: translateY(-2px);
}
	/* 🧱 ตัวการ์ดขาวทึบ 100% สไตล์โมเดิร์นคลีน */
.ro-server-card {
    background: #ffffff !important; /* ขาวสนิท ไม่โปร่งแสง */
    border: 1px solid rgba(255, 51, 102, 0.25);
    border-radius: 24px;
    padding: 35px;
    position: relative;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* มิติเงาละมุน ดันกล่องขาวให้เด้งลอย */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03), 
                0 15px 35px rgba(0, 0, 0, 0.08),
                0 0 25px rgba(255, 51, 102, 0.1);
}

/* เมื่อเอาเมาส์ชี้การ์ดข้อมูล: การ์ดยกตัวลอยขึ้นเล็กน้อย พร้อมขยายรัศมีออร่าชมพู */
.ro-server-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(255, 51, 102, 0.3), 
                0 0 20px rgba(255, 51, 102, 0.15);
}

/* ⚡ เอฟเฟกต์โลโก้ขยับลอยดุ๊กดิ๊กขึ้น-ลงอัตโนมัติ (Floating Effect) */
.server-logo {
    filter: drop-shadow(0 4px 8px rgba(255, 51, 102, 0.2));
    animation: serverLogoFloat 3.5s ease-in-out infinite;
    transition: all 0.4s ease;
}
.ro-server-card:hover .server-logo {
    filter: drop-shadow(0 8px 20px rgba(255, 51, 102, 0.5)) scale(1.05);
}
@keyframes serverLogoFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* 🎨 ส่วนหัวข้อและสถานะสีสดคมชัด */
.server-title {
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #1a1a24; /* สีเข้ม ไม่จมพื้นขาว */
    font-size: 22px;
}
.server-title .text-pink {
    color: #ff3366 !important;
}

.badge-status {
    display: inline-flex;
    align-items: center;
    background: #f1f3f5;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    color: #495057;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.dot-online {
    width: 8px;
    height: 8px;
    background-color: #00cc99;
    border-radius: 50%;
    margin-right: 8px;
    box-shadow: 0 0 8px #00ffcc;
    animation: pulse 1.5s infinite alternate;
}

/* 📊 รายการข้อมูลเซิร์ฟเวอร์ (ปรับเป็นสีเข้มขรึมสไตล์โมเดิร์น) */
.info-list {
    display: flex;
    flex-direction: column;
}

.info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 5px;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.1); /* เส้นประคั่นสีเทาบางๆ */
    font-size: 14px;
    font-weight: 500;
    color: #495057; /* ตัวหนังสือสีชัดเจน */
    transition: all 0.3s ease;
}

/* ตกแต่งไอคอนหน้าหัวข้อย่อย */
.info-icon {
    color: #ff3366; /* ไอคอนสีชมพูเด่นๆ */
    margin-right: 8px;
    width: 18px;
    text-align: center;
    font-size: 13px;
    opacity: 0.85;
}

/* ค่าตัวเลขพลังฝั่งขวา */
.info-val {
    font-weight: 700;
    color: #1a1a24;
    background: #f8f9fa;
    padding: 2px 10px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
}

/* เมื่อ Hover การ์ด: แถวข้อมูลจะขยับสไลด์สลับสีไฮไลต์อย่างสวยงาม */
.info-item:hover {
    padding-left: 5px;
    background: rgba(255, 51, 102, 0.03);
    color: #ff3366;
}
.info-item:hover .info-val {
    color: #ffffff;
    background: #ff3366;
    border-color: #ff3366;
}

/* 🚀 ปุ่มกดแบบมีแสงเรืองออร่าและแสงวิ่งพาด (Shine Effect) */
.btn-pink-glow {
    position: relative;
    background: linear-gradient(135deg, #ff3366 0%, #ff0055 100%);
    color: #ffffff !important;
    font-weight: 600;
    border-radius: 14px;
    padding: 13px;
    border: none;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(255, 51, 102, 0.35);
    transition: all 0.4s ease;
}

/* สร้างชั้นแผ่นเอฟเฟกต์แสงไฟวิ่งผ่านปุ่ม */
.btn-pink-glow::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-25deg);
    transition: none;
}

.btn-pink-glow:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 51, 102, 0.6);
}

/* สั่งให้ไฟวิ่งพาดแวบหนึ่งเมื่อเมาส์ชี้ */
.btn-pink-glow:hover::before {
    left: 150%;
    transition: all 0.7s ease-in-out;
}

/* ไอคอนในปุ่มจะหมุนคิ้วท์ๆ เวลาเอาเมาส์ชี้ */
.btn-pink-glow:hover .btn-icon-spin {
    animation: iconRotate 0.6s ease-in-out;
}
@keyframes iconRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
	/* คอนเทนเนอร์หลัก */
.brand-name-container {
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
}

/* ส่วนของรูปภาพโลโก้ */
.brand-logo {
    /* 1. [ปรับขนาด] สามารถเปลี่ยนความสูงตรงนี้เพื่อปรับขนาดโลโก้ได้เลยครับ */
    height: 120px; 
    width: auto; /* ให้ความกว้างขยายตามสัดส่วนภาพอัตโนมัติ */
    
    /* เอฟเฟคการเคลื่อนไหวแบบสมูท (Custom Bezier) */
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); 
    
    /* เงาละมุนแบบมินิมอลเริ่มต้น */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    will-change: transform, filter;
}

/* ลุกเล่นล้ำๆ ตอนเมาส์ชี้ (Hover Effect) */
.brand-logo:hover {
    /* เอฟเฟคขยาย + ลอยขึ้น + เอียงนิดๆ ให้ดูมีชีวิตชีวา */
    transform: translateY(-4px) scale(1.08) rotate(1deg);
    
    /* เอฟเฟคแสงเรืองรอง (Neon/Glass Glow) ปรับสีให้เข้ากับธีม BACON ZONE ได้เลย */
    filter: drop-shadow(0 8px 20px rgba(255, 75, 75, 0.4)) brightness(1.15); 
}

/* เอฟเฟคตอนกดคลิก (Click/Active Feedbacks) */
.brand-logo:active {
    transform: translateY(-1px) scale(0.96);
    filter: drop-shadow(0 4px 8px rgba(255, 75, 75, 0.2));
}
	.modern-logo {
    /* ปรับขนาดโลโก้เพิ่มเติมจากตรงนี้ได้ */
    height: 45px; 
    width: auto;
    
    /* บันทึกการเคลื่อนไหวให้สมูท */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    /* เอฟเฟคเงาแบบนุ่มนวล (Soft Shadow) */
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.08)); 
}

/* เอฟเฟคตอนที่เอาเมาส์ไปชี้ (Hover Effect) */
.modern-logo:hover {
    transform: translateY(-3px) scale(1.05); /* ขยายขึ้นเล็กน้อยและลอยขึ้น */
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.15)) 
            brightness(1.1); /* เพิ่มความสว่างและเงาให้ดูมีมิติ */
    opacity: 0.95;
}

/* เอฟเฟคตอนกดคลิก (Active Effect) */
.modern-logo:active {
    transform: translateY(-1px) scale(0.98); /* ยุบตัวลงเล็กน้อยตอนกด */
}

/* 🧱 โครงสร้างปุ่มทรงขาวมนยาวแบบในรูป (Pure Solid White 100%) */
.ro-modern-btn {
    display: flex;
    align-items: center;
    background: #ffffff !important; /* สีขาวล้วน ไม่มีความใส ไม่มีกระจกฝ้า */
    border: none;
    border-radius: 35px; /* ดันความโค้งมนให้เรียบเนียนยาวตามภาพ */
    padding: 14px 30px 14px 18px; /* เว้นระยะห่างด้านในให้สวยงาม */
    text-decoration: none !important;
    min-width: 280px; /* คุมขนาดความกว้างปุ่มให้เท่าๆ กันใกล้เคียงในรูป */
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* อนิเมชั่นสปริงตัวสมูท */
    
    /* เงาพื้นฐานแบบจางๆ ดันให้มิติปุ่มลอยขึ้นจากฉากหลัง */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1),
                0 10px 30px rgba(0, 0, 0, 0.08);
}

/* ⚡ มหกรรมเอฟเฟกต์เด็ดตอน HOVER (เมาส์ชี้) */
.ro-modern-btn:hover {
    transform: translateY(-6px) scale(1.02); /* ปุ่มจะเด้งลอยสูงขึ้นและขยายตัวนิดๆ */
    background: #ffffff !important; /* ล็อกสีขาวทึบ */
    
    /* ระเบิดพลังแสงออร่านีออนสีแดงอมชมพูเรืองแสงวาบรอบตัวปุ่มขาว */
    box-shadow: 0 15px 35px rgba(255, 51, 102, 0.35), 
                0 0 20px rgba(255, 51, 102, 0.2);
}

/* กล่องใส่ไอคอนด้านซ้ายของปุ่ม (ทรงมนสี่เหลี่ยมโค้งตามภาพ) */
.ro-icon-wrap {
    width: 54px;
    height: 54px;
    background: #f8f9fa; /* สีพื้นหลังไอคอนเทาอ่อนตัดขาวสว่าง */
    border-radius: 18px; /* ความโค้งมนของกล่องไอคอน */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-right: 18px;
    flex-shrink: 0;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

/* เอฟเฟกต์เมื่อเมาส์ชี้: ไอคอนจะกระโดดหมุนเบาๆ */
.ro-modern-btn:hover .ro-icon-wrap {
    background: #ff3366; /* สลับเป็นสีชมพูวับเมื่อชี้ */
    transform: scale(1.08) rotate(-5deg);
    box-shadow: 0 4px 12px rgba(255, 51, 102, 0.3);
}

/* สีไอคอนสีเขียวตามแบบ (เมื่อชี้จะสลับเป็นสีขาวเพื่อให้เข้ากับพื้นหลังชมพู) */
.icon-green {
    color: #ff3366; /* สีเขียวตามแบบที่คุณต้องการ */
    transition: color 0.3s ease;
}
.ro-modern-btn:hover .icon-green {
    color: #ffffff; /* เปลี่ยนเป็นสีขาวเพื่อตัดกับพื้นหลังชมพู */
}

/* จัดเลเยอร์ฝั่งตัวหนังสือ */
.ro-text-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

/* ตัวหนังสือภาษาอังกฤษตัวเล็กด้านบน */
.ro-sub-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    margin-bottom: 2px;
}

/* สีเขียวมิ้นต์ของภาษาอังกฤษด้านบนตามรูปภาพ */
.title-green {
    color: #ff3366; 
}

/* ตัวอักษรภาษาไทยเมนูหลักด้านล่าง (สีเทาเข้มเกือบดำ คมชัด ไม่จม) */
.ro-main-title {
    color: #2b2b36; 
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}

/* ลูกเล่นพิเศษ: เมื่อ Hover ข้อความภาษาไทยจะเปลี่ยนสีเป็นสีแดงอมชมพูคู่ธีม */
.ro-modern-btn:hover .ro-main-title {
    color: #ff3366;
}
	/* ======================================================== */
/* 🔴 NEW FOOTER STYLES (PURE WHITE & PINK GLOW) */
/* ======================================================== */

.custom-footer {
    background: #ffffff !important; /* เปลี่ยนเป็นสีขาวทึบ 100% สวยคลีน */
    padding: 70px 0 30px 0;
    position: relative;
    overflow: visible;
    font-family: 'Kanit', sans-serif;
}

/* เส้นนีออนเรืองแสงหนาๆ คั่นขอบบน */
.footer-neon-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #ff0055, #ff3366, #ff0055);
    box-shadow: 0 2px 12px rgba(255, 51, 102, 0.6);
}

/* หัวข้อประจำคอลัมน์ */
.footer-title {
    color: #1a1a24; /* สีเทาเข้มเกือบดำชัดเจน */
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
}
/* เส้นใต้หัวข้อสั้นๆ สีชมพู */
.footer-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 35px;
    height: 3px;
    background: #ff3366;
    border-radius: 2px;
}

/* คอลัมน์แบรนด์ */
.brand-name {
    font-size: 26px;
    font-weight: 800;
    color: #1a1a24;
    margin-bottom: 15px;
    letter-spacing: 1px;
}
.brand-name .highlight {
    color: #ff3366;
}
.brand-desc {
    color: #555565; /* สีเนื้อหาอ่านง่ายไม่จม */
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 25px;
}

/* ⚡ เอฟเฟกต์กล่องโซเชียลระเบิดแสงออร่าเมื่อ Hover */
.footer-social-wrap {
    display: flex;
    gap: 12px;
}
.social-box {
    width: 42px;
    height: 42px;
    background: #f1f3f5;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #495057;
    font-size: 18px;
    text-decoration: none !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* แยกสีตอนชี้ให้เรืองแสงตามค่าย */
.social-box:hover {
    color: #ffffff !important;
    transform: translateY(-6px);
}
.social-box.fb:hover { background: #1877f2; box-shadow: 0 5px 15px rgba(24, 119, 242, 0.4); }
.social-box.dc:hover { background: #5865f2; box-shadow: 0 5px 15px rgba(88, 101, 242, 0.4); }
.social-box.yt:hover { background: #ff0000; box-shadow: 0 5px 15px rgba(255, 0, 0, 0.4); }
.social-box.ig:hover { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); box-shadow: 0 5px 15px rgba(220, 39, 67, 0.4); }

/* ⚡ เอฟเฟกต์สไลด์วิ่งพุ่งของ Quick Links */
.quick-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.quick-links-list li {
    margin-bottom: 12px;
}
.quick-links-list li a {
    color: #495057; /* สีเข้มชัดเจน */
    font-size: 14px;
    font-weight: 500;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
    position: relative;
}
/* หัวลูกศรหน้าลิงก์ด่วน */
.quick-links-list li a .link-arrow {
    font-size: 10px;
    margin-right: 8px;
    color: #adb5bd;
    transition: all 0.3s ease;
}
/* เมื่อเอาเมาส์ชี้: ตัวหนังสือเด้งหลบไปทางขวา + เปลี่ยนสีเป็นชมพู */
.quick-links-list li a:hover {
    color: #ff3366 !important;
    transform: translateX(6px);
}
.quick-links-list li a:hover .link-arrow {
    color: #ff3366;
    transform: scale(1.2);
}

/* กล่องฝั่งช่วยเหลือข้อมูลซัพพอร์ต */
.support-info-box {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.support-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #f8f9fa; /* บล็อกเทาอ่อนตัดขาวสะอาด */
    padding: 12px 20px;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.03);
}
.support-icon {
    font-size: 22px;
    color: #ff3366;
}
.support-label {
    display: block;
    font-size: 11px;
    color: #868e96;
    font-weight: 600;
}
.support-val {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #212529;
}

/* เส้นขั้นส่วนล่าง */
.footer-divider {
    border-color: rgba(0, 0, 0, 0.06);
    margin: 30px 0 20px 0;
}

/* ส่วนล่างสุดลิขสิทธิ์ */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 13px;
    color: #6c757d;
}
.heart-beat-pink {
    color: #ff3366;
    animation: heartBeat 1.2s infinite alternate;
}
@keyframes heartBeat {
    0% { transform: scale(1); }
    100% { transform: scale(1.15); filter: drop-shadow(0 0 4px #ff3366); }
}

/* ⚡ ปุ่มกดกลับขึ้นบนสุดแบบลอยตัว (Scroll to Top) */
.scroll-to-top-btn {
    position: absolute;
    top: -25px;
    right: 40px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #ff3366 0%, #ff0055 100%);
    color: #ffffff !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 4px 15px rgba(255, 51, 102, 0.4);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 10;
}
.scroll-to-top-btn:hover {
    transform: translateY(-5px) rotate(360deg); /* หมุนติ้วสปริงเด้งดึ๋ง */
    box-shadow: 0 8px 25px rgba(255, 51, 102, 0.7);
}

/* Responsive บนมือถือ */
@media (max-width: 768px) {
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
    .scroll-to-top-btn {
        right: 20px;
    }
}
	/* ล็อกตำแหน่งให้แผ่นเอฟเฟกต์เต็มจอพอดี */
.cursor-particle-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none; /* สำคัญมาก: เพื่อให้เมาส์คลิกทะลุไปกดปุ่มต่างๆ ในเว็บได้ปกติ */
    z-index: 99999; /* ให้อยู่ชั้นบนสุดเพื่อความเด่นชัด แต่จะไม่บังตัวเมาส์จริง */
}
	/* โครงสร้างพื้นฐานร่วมกันของทุกปุ่ม */
.cyber-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    font-family: 'Kanit', sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none !important;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ======================================================== */
/* 🔥 ปุ่มแบบที่ 1: แสงเลเซอร์สะท้อนวิ่งผ่าน (Liquid Laser Shine) */
/* Concept: ตอนปกติสีเรียบหรู แต่พอเมาส์ชี้จะมีคลื่นแสงขาวจ้าวิ่งผ่านอย่างรวดเร็ว */
/* ======================================================== */
.btn-style-1 {
    background: linear-gradient(135deg, #ff0055 0%, #ff3366 100%);
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(255, 0, 85, 0.3);
    border: none;
}

/* ตัวแผ่นแสงสะท้อน */
.btn-style-1 .btn-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, 
        rgba(255,255,255,0) 0%, 
        rgba(255,255,255,0.6) 50%, 
        rgba(255,255,255,0) 100%
    );
    transform: skewX(-30deg);
}

/* เอฟเฟกต์ตอน Hover */
.btn-style-1:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 0, 85, 0.6);
    filter: brightness(1.1);
}

/* สั่งให้แสงวิ่งตัดหน้าปุ่มทันที */
.btn-style-1:hover .btn-shine {
    left: 150%;
    transition: all 0.6s ease-in-out;
}


/* ======================================================== */
/* 🔥 ปุ่มแบบที่ 2: นีออนพัลส์ระเบิดแสง (Neon Aura Pulse) */
/* Concept: มีวงแหวนแสงนีออนขยายตัวระเบิดออร่าออกมาจากหลังปุ่มตลอดเวลา */
/* ======================================================== */
.btn-style-2 {
    background: #111116;
    color: #ff3366 !important;
    border: 2px solid #ff3366;
    overflow: visible; /* เปิดให้แสงระเบิดทะลุขอบปุ่ม */
    box-shadow: 0 0 10px rgba(255, 51, 102, 0.2);
}

/* วงแหวนออร่าด้านหลัง */
.btn-style-2 .pulse-ring {
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    border: 2px solid #ff0055;
    border-radius: 12px;
    opacity: 0;
    z-index: -1;
}

/* เอฟเฟกต์ตอน Hover */
.btn-style-2:hover {
    background: #ff3366;
    color: #ffffff !important;
    box-shadow: 0 0 20px #ff3366, 0 0 40px #ff0055;
    transform: scale(1.05);
}

/* เปิดใช้งานแอนิเมชันระเบิดแสงเมื่อเอาเมาส์ชี้ */
.btn-style-2:hover .pulse-ring {
    animation: neonExplosion 1.2s cubic-bezier(0.24, 0, 0.05, 1) infinite;
}

@keyframes neonExplosion {
    0% { transform: scale(1); opacity: 1; filter: blur(0px); }
    100% { transform: scale(1.4) scaleY(1.6); opacity: 0; filter: blur(8px); }
}


/* ======================================================== */
/* 🔥 ปุ่มแบบที่ 3: กระจกเงาลอยตัวขอบเรืองแสง (Floating Glass Cyber) */
/* Concept: สไตล์โปร่งแสง Glassmorphic พื้นหลังเบลอ ขอบนีออนลอยเด่น */
/* ======================================================== */
.btn-style-3 {
    background: rgba(255, 51, 102, 0.1);
    color: #ffffff !important;
    border: 1px solid rgba(255, 51, 102, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: inset 0 0 12px rgba(255, 51, 102, 0.15);
}

/* เอฟเฟกต์ตอน Hover */
.btn-style-3:hover {
    background: rgba(255, 51, 102, 0.3);
    border-color: #ff3366;
    transform: translateY(-4px);
    /* แสงนีออนแผ่ฟุ้งนุ่มนวล */
    box-shadow: 0 0 15px rgba(255, 51, 102, 0.5), 
                inset 0 0 15px rgba(255, 255, 255, 0.2);
}

/* ลูกเล่นแถม: ให้ไอคอนข้างในปุ่มสไตล์ที่ 3 หมุนติ้วส่ายไปมาเวลาชี้ */
.btn-style-3:hover .fa-gamepad {
    animation: iconShake 0.4s ease infinite alternate;
}

@keyframes iconShake {
    0% { transform: rotate(-10deg) scale(1.1); }
    100% { transform: rotate(10deg) scale(1.1); }
}


	/* --- โครงสร้างใหญ่ควบคุมพื้นที่ --- */
.epic-cloud-divider-container {
    position: relative;
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 90px 0;
    overflow: visible; /* ปล่อยให้เมฆและประกายดาวลอยเลยขอบได้ */
}

/* --- 🌟 1. เส้นคั่นสายแสงเวทมนตร์ (เนียนละมุน ขอบฟุ้ง) --- */
.cloud-magic-line {
    position: relative;
    width: 75%;
    height: 4px;
    border-radius: 10px;
    /* เฉดสี: ชมพูจาง -> แดงนีออน -> ขาวสว่างจ้าตรงกลาง -> แดงนีออน -> ชมพูจาง */
    background: linear-gradient(90deg, 
        rgba(255, 51, 102, 0) 0%, 
        rgba(255, 26, 83, 0.6) 20%, 
        rgba(255, 179, 198, 0.9) 40%,
        rgba(255, 255, 255, 1) 50%, 
        rgba(255, 179, 198, 0.9) 60%,
        rgba(255, 26, 83, 0.6) 80%, 
        rgba(255, 51, 102, 0) 100%
    );
    box-shadow: 0 0 20px rgba(255, 26, 83, 0.5), 
                0 0 40px rgba(255, 179, 198, 0.3);
    overflow: hidden;
}

/* คลื่นความเข้มแสงวิ่งทะลุเส้นคั่น */
.light-pulse-wave {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.8), rgba(255,255,255,0));
    animation: waveRun 3.5s linear infinite;
}

@keyframes waveRun {
    0% { left: -100%; }
    100% { left: 200%; }
}

/* --- ☁️ 2. โครงสร้างและรูปทรงก้อนเมฆ (CSS Pure ละมุนๆ) --- */
.cloud-group {
    position: absolute;
    width: 90px;
    height: 50px;
    filter: drop-shadow(0 0 12px rgba(255, 51, 102, 0.35)); /* แสงสีชมพูสะท้อนหลังเมฆ */
}

/* จัดวางตำแหน่งเมฆ ซ้าย/ขวา */
.cloud-left { left: 8%; animation: cloudFloatLeft 6s ease-in-out infinite alternate; }
.cloud-right { right: 8%; animation: cloudFloatRight 6s ease-in-out infinite alternate; }

/* ตัวก้อนเมฆหลัก (ทรงกลมซ้อนกันให้ละมุน) */
.main-cloud {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 35px;
    background: linear-gradient(to bottom, #ffffff 0%, #ffcbd5 100%); /* เมฆไล่สีขาวไปชมพู */
    border-radius: 50px;
}
.main-cloud::before, .main-cloud::after {
    content: '';
    position: absolute;
    background: #ffffff;
    border-radius: 50%;
}
.main-cloud::before { width: 40px; height: 40px; top: -20px; left: 15px; }
.main-cloud::after { width: 50px; height: 50px; top: -28px; right: 15px; background: linear-gradient(to bottom, #ffffff 20%, #ffe3e8 100%); }

/* เมฆก้อนเล็กซ้อนด้านหลัง เพิ่มมิติความลึก */
.sub-cloud {
    position: absolute;
    bottom: -5px;
    left: -15px;
    width: 60px;
    height: 25px;
    background: linear-gradient(to bottom, #fff0f2 0%, #ff99b2 100%);
    border-radius: 50px;
    opacity: 0.8;
    transform: scale(0.8);
    z-index: -1;
}

/* --- ⚡ ลูกเล่นอลังการที่ 1: แอนิเมชันเมฆลอยละล่องสวนทางกัน --- */
@keyframes cloudFloatLeft {
    0% { transform: translateY(0) translateX(0) scale(1); filter: brightness(1); }
    100% { transform: translateY(-8px) translateX(12px) scale(1.05); filter: brightness(1.1); }
}
@keyframes cloudFloatRight {
    0% { transform: translateY(-6px) translateX(0) scale(1.03); filter: brightness(1.1); }
    100% { transform: translateY(4px) translateX(-12px) scale(0.97); filter: brightness(0.95); }
}

/* --- ⚡ ลูกเล่นอลังการที่ 2: ละอองฝนดาวตกวิบวับร่วงหล่น (Shooting Star Rain) --- */
.star-drop {
    position: absolute;
    width: 3px;
    height: 12px;
    background: linear-gradient(to bottom, #ffffff, rgba(255, 51, 102, 0));
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 0 8px #ffffff;
}

/* สุ่มตำแหน่งและจังหวะการตกของดวงดาวรอบๆ เส้นคั่น */
.sd1 { left: 25%; top: -10px; animation: starFall 2s infinite linear; animation-delay: 0.2s; }
.sd2 { left: 45%; top: -20px; animation: starFall 2.4s infinite linear; animation-delay: 0.8s; }
.sd3 { left: 55%; top: -15px; animation: starFall 1.8s infinite linear; animation-delay: 1.4s; }
.sd4 { left: 75%; top: -25px; animation: starFall 2.2s infinite linear; animation-delay: 0.5s; }

@keyframes starFall {
    0% { transform: translateY(0) rotate(15deg) scaleY(0); opacity: 0; }
    20% { opacity: 1; transform: translateY(15px) rotate(15deg) scaleY(1.5); }
    60% { opacity: 0.8; }
    100% { transform: translateY(55px) rotate(15deg) scaleY(0); opacity: 0; }
}

/* --- ⚡ ลูกเล่นอลังการที่ 3: แสงนีออนรวมสั่นกะพริบเบาๆ เหมือนเมืองในฝัน --- */
.epic-cloud-divider-container {
    animation: containerGlow 4s ease-in-out infinite alternate;
}
@keyframes containerGlow {
    0% { filter: saturate(1) contrast(1); }
    100% { filter: saturate(1.2) contrast(1.05); }
}
/* พื้นหลังของ Section เมนู */
.menu-section-bg {
    background: url('ใส่ลิงก์รูปภาพพื้นหลังหลักเว็บตรงนี้') no-repeat center center/cover;
    font-family: 'Kanit', sans-serif;
    overflow: hidden;
}

/* สีข้อความชมพู */
.text-pink {
    color: #ff3366 !important;
}

/* ----------------==================================---------------- */
/* [ปรับใหม่]: เปลี่ยนปุ่มเมนูหลักเป็นสีขาวทึบ 100% ไม่มีกระจกฝ้า พร้อมปรับมิติเงาใหม่ */
/* ----------------==================================---------------- */
.cyber-menu-btn {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #ffffff !important; /* เปลี่ยนเป็นสีขาวทึบสนิท */
    backdrop-filter: none !important; /* ถอดเอฟเฟกต์กระจกฝ้าออก */
    -webkit-backdrop-filter: none !important;
    border: 2px solid rgba(255, 51, 102, 0.3); /* เส้นขอบชมพูบางๆ คุมธีมไว้ */
    border-radius: 20px;
    padding: 15px 25px;
    text-decoration: none !important;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    /* ใช้เงาแบบนุ่มนวลสไตล์มินิมอล เพื่อดันให้ปุ่มสีขาวลอยเด่นขึ้นมา */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04), 
                0 12px 25px rgba(0, 0, 0, 0.08);
}

/* กล่องใส่ไอคอนด้านซ้ายของปุ่ม */
.btn-icon-wrap {
    width: 60px;
    height: 60px;
    background: rgba(255, 51, 102, 0.1); /* ปรับพื้นหลังไอคอนจางลงเล็กน้อยให้เข้ากับปุ่มขาว */
    border: 1px solid rgba(255, 51, 102, 0.3);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #ff3366;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

/* ส่วนข้อความในปุ่ม */
.btn-text-wrap {
    display: flex;
    flex-direction: column;
}

/* [ปรับใหม่]: เปลี่ยนคำโปรยเล็กๆ ด้านบนให้เป็นสีเทาเข้มเพื่อให้ชัดเจนบนพื้นขาว */
.btn-text-wrap .sub-title {
    color: #555565; 
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}

/* [ปรับใหม่]: เปลี่ยนข้อความหลักจากสีขาวเป็นสีเทาเข้มเกือบดำ คมชัด อ่านง่ายมาก ไม่จมแน่นอน */
.btn-text-wrap .main-title {
    color: #1a1a24; 
    font-size: 18px;
    font-weight: 600;
    margin: 2px 0 0 0;
    text-shadow: none; /* ถอดเงามืดของเดิมออกเพื่อให้คลีนตา */
}

/* ======================================================== */
/* ⚡ โดนใจแน่นอน: เอฟเฟกต์เคลื่อนไหวทั้งหมดตอน HOVER (เมาส์ชี้) */
/* ======================================================== */

/* 1. ปุ่มเรืองแสงชมพูวับ + ขยายตัวเล็กน้อย (ปรับให้เข้ากับพื้นขาว) */
.cyber-menu-btn:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #ff3366;
    background: #ffffff !important; /* รักษาพื้นหลังให้เป็นสีขาวทึบ */
    /* ระเบิดออร่านีออนสีแดงอมชมพูรอบนอกปุ่มให้สวยงามอลังการ */
    box-shadow: 0 10px 30px rgba(255, 51, 102, 0.35), 
                0 0 15px rgba(255, 51, 102, 0.2);
}

/* [ปรับใหม่]: ตอน Hover ให้ข้อความหลักเปลี่ยนเป็นสีชมพูวับ เพิ่มความน่ารักตื่นตาตื่นใจ */
.cyber-menu-btn:hover .main-title {
    color: #ff3366;
    transition: color 0.3s ease;
}

/* 2. เอฟเฟกต์แสงไฟวิ่งผ่านหน้าปุ่มแบบความไวสูง (Shine Effect - ปรับให้เห็นชัดขึ้นบนพื้นขาว) */
.cyber-menu-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    /* ปรับเป็นชั้นแสงแฟลชขาวจ้า */
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    transition: none;
    z-index: 1;
}
.cyber-menu-btn:hover::before {
    left: 150%;
    transition: all 0.8s ease-in-out;
}

/* 3. ไอคอนหมุนและเด้งดุ๊กดิ๊กเวลาชี้ */
.cyber-menu-btn:hover .btn-icon-wrap {
    background: #ff3366;
    color: #ffffff;
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 0 15px #ff3366;
}

/* 4. อนิเมชั่นหมุนสั่นเบาๆ ของโลโก้ตรงกลาง */
.main-logo {
    filter: drop-shadow(0 0 15px rgba(255, 51, 102, 0.4));
    animation: logoFloat 4s ease-in-out infinite;
}

@keyframes logoFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
/* ======================================================== */
/* 📱 RESPONSIVE: ปรับขนาดการแสดงผลบนมือถืออัตโนมัติ */
/* ======================================================== */
@media (max-width: 991px) {
    .btn-text-wrap .main-title {
        font-size: 16px;
    }
    .btn-icon-wrap {
        width: 50px;
        height: 50px;
        font-size: 22px;
    }
}

/* คุมธีมพื้นหลังรวม */
.main-news-section {
    background-size: cover;
    font-family: 'Kanit', sans-serif;
}

/* ----------------==================================---------------- */
/* [ปรับใหม่]: เปลี่ยนการ์ดหลักเป็นสีขาวทึบ ถอดกระจกฝ้าออก เพิ่มเงา Layered นุ่มนวลมีมิติ */
/* ----------------==================================---------------- */
.glass-card {
    background: #ffffff !important; /* ขาวแบบขาวเลย 100% */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(255, 51, 102, 0.25); /* ขอบชมพูบางๆ คุมธีม */
    border-radius: 24px;
    padding: 35px;
    /* เปลี่ยนเงาเป็น Soft Shadow สไตล์มินิมอล มีออร่าชมพูจางๆ สะท้อนนอกกล่อง */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03), 
                0 15px 35px rgba(0, 0, 0, 0.08),
                0 0 25px rgba(255, 51, 102, 0.1);
}

/* สีหลักประจำธีม (ปรับพื้นหลังป้ายให้อ่านง่ายบนพื้นขาว) */
.text-pink { color: #ff3366 !important; }
.bg-pink-light { background-color: rgba(255, 51, 102, 0.12); }
.bg-blue-light { background-color: rgba(51, 153, 255, 0.12); }
.text-blue { color: #3399ff !important; }

/* ======================================================== */
/* 🔴 สไตล์ฝั่ง SERVER INFO (ปรับสีแก้จมทั้งหมด) */
/* ======================================================== */
.server-title {
    font-weight: 700;
    letter-spacing: 1px;
    color: #ff3366;
    text-shadow: 0 1px 4px rgba(255, 51, 102, 0.15);
}

.badge-status {
    display: inline-flex;
    align-items: center;
    background: #f8f9fa; /* เปลี่ยนจากขาวจางเป็นสีเทาอ่อนทึบ */
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 13px;
    color: #444450; /* แก้สีอักษรให้อ่านง่าย */
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.dot-online {
    width: 8px;
    height: 8px;
    background-color: #00cc99; /* ปรับสีด็อทเข้มขึ้นเล็กน้อยให้ตัดกับพื้นขาว */
    border-radius: 50%;
    margin-right: 8px;
    box-shadow: 0 0 8px #00ffcc;
    animation: pulse 1.5s infinite alternate;
}

.info-list {
    display: flex;
    flex-column: gap-2;
    flex-direction: column;
}

.info-item {
    display: flex;
    justify-content: space-between;
    padding: 12px 5px;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.12); /* เส้นคั่นจากเดิมขาวจางเป็นดำจาง */
    font-size: 15px;
    color: #495057; /* เปลี่ยนจากสีขาวจางเป็นสีเข้มคมชัด */
}

.info-val {
    font-weight: 600;
    color: #e63366; /* เข้มขึ้นเล็กน้อยเพื่อมิติสายตา */
}

.btn-pink-glow {
    background: linear-gradient(135deg, #ff3366 0%, #ff0055 100%);
    color: #fff !important;
    font-weight: 600;
    border-radius: 12px;
    padding: 12px;
    border: none;
    box-shadow: 0 4px 15px rgba(255, 51, 102, 0.35);
    transition: all 0.3s ease;
}

.btn-pink-glow:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 51, 102, 0.6);
}

/* ======================================================== */
/* 🔴 สไตล์ฝั่ง NEWS & ACTIVITIES (ปรับสีแก้จมทั้งหมด) */
/* ======================================================== */
.news-title {
    font-weight: 700;
    color: #1a1a24; /* เปลี่ยนจากสีขาวเป็นสีเข้มเกือบดำ */
    text-shadow: none;
}

/* แท็บเปลี่ยนหมวดหมู่แบบน่ารักสำหรับพื้นหลังขาว */
.btn-tab {
    background: #f1f3f5; /* จากขาวจางเป็นสีบล็อกเทาอ่อน */
    border: 1px solid rgba(0, 0, 0, 0.06);
    color: #495057; /* ปรับเป็นสีเข้ม */
    padding: 6px 20px;
    border-radius: 12px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.btn-tab:hover, .btn-tab.active {
    background: #ff3366;
    border-color: #ff3366;
    color: #fff !important; /* ตอนกด Active ค่อยเป็นตัวหนังสือสีขาว */
    box-shadow: 0 4px 12px rgba(255, 51, 102, 0.4);
}

/* กล่องย่อยแต่ละข่าวสาร */
.news-item {
    background: #f8f9fa; /* เปลี่ยนเป็นสีพื้นหลังทึบเทาอ่อนๆ ตัดกับตัวการ์ดหลักขาวจั๊วะ */
    border: 1px solid rgba(0, 0, 0, 0.04);
    padding: 16px 24px;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.news-item:hover {
    background: #ffffff; /* ชี้แล้วกล่องย่อยจะเปลี่ยนเป็นขาวเด้งลอยขึ้นมา */
    border-color: rgba(255, 51, 102, 0.4);
    transform: translateX(5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.news-thumb {
    width: 100px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    border-radius: 12px;
    text-align: center;
    padding: 5px;
}

.badge-cate {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
}
.cate-event { background: #ffaa00; color: #fff; }
.cate-update { background: #3399ff; color: #fff; }

.news-subject {
    color: #2b2b36; /* เปลี่ยนจากสีขาวเป็นสีชาร์โคลคมๆ */
    font-size: 16px;
    font-weight: 600;
    margin-top: 4px !important;
}

.news-desc {
    color: #6c757d; /* เปลี่ยนจากสีขาวจางเป็นสีเทาซับพอร์ตอ่านง่าย */
    font-size: 13px;
}

.news-date {
    color: #adb5bd; /* เปลี่ยนสีวันที่ให้อ่านออกชัดเจนบนพื้นขาว */
    font-size: 11px;
}

.news-arrow {
    color: rgba(0, 0, 0, 0.25); /* เปลี่ยนหัวลูกศรจากขาวโปร่งเป็นดำโปร่ง */
    transition: all 0.3s ease;
}

.news-item:hover .news-arrow {
    color: #ff3366;
    transform: scale(1.2);
}

/* หน้าเปลี่ยนหน้า (Pagination) */
.pagination .page-link {
    background: #f1f3f5; /* เปลี่ยนเป็นเทาอ่อนทึบ */
    border: 1px solid rgba(0, 0, 0, 0.06);
    color: #495057; /* เปลี่ยนสีตัวอักษรเลขหน้า */
    border-radius: 8px !important;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.pagination .page-item.active .page-link {
    background: #ff3366;
    border-color: #ff3366;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(255, 51, 102, 0.4);
}

.pagination .page-link:hover {
    background: rgba(255, 51, 102, 0.15);
    color: #ff3366;
}

/* Animation จุดกะพริบสถานะบอส/เซิร์ฟ */
@keyframes pulse {
    from { opacity: 0.5; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1.1); }
}

/* ปรับแต่งสำหรับหน้าจอมือถือ */
@media (max-width: 768px) {
    .news-item {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 15px;
    }
    .news-arrow {
        display: none; /* ซ่อนลูกศรในมือถือเพื่อไม่ให้เบียดเนื้อหา */
    }
    .news-thumb {
        width: 75px;
        height: 60px;
        font-size: 11px;
    }
}
	/* ตัวครอบเพื่อจัดตำแหน่ง */
.elegant-divider-container {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 50px 0;
}

/* ตัวเส้นขอบ */
.elegant-divider-line {
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        #ff3366 30%, 
        #ff6699 50%, 
        #ff3366 70%, 
        transparent 100%
    );
    box-shadow: 0 0 8px rgba(255, 51, 102, 0.4);
}

/* ลูกเล่นประกายแสงเพชรตรงกลาง */
.elegant-divider-sparkle {
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: #ffffff; /* แกนกลางสีขาวเพื่อให้ดูสว่างจ้า */
    border: 2px solid #ff3366;
    transform: rotate(45deg); /* หมุนให้เป็นรูปเพชร */
    box-shadow: 0 0 15px #ff3366, 0 0 30px #ff6699;
    animation: sparkleGlow 3s ease-in-out infinite alternate;
}

/* แอนิเมชันหมุนและเปล่งประกายขยายขนาดเล็กน้อย */
@keyframes sparkleGlow {
    0% {
        transform: rotate(45deg) scale(0.9);
        box-shadow: 0 0 10px #ff3366;
    }
    100% {
        transform: rotate(225deg) scale(1.1); /* หมุนไปด้วยเวลาเล่นแอนิเมชัน */
        box-shadow: 0 0 20px #ff3366, 0 0 35px #ff6699;
    }
}
	/* ตั้งค่าธีมหลัก แดงอมชมพู-ขาว */
    :root {
        --pink-bright: #ff477e;
        --pink-soft: #ff6b8b;
        --pink-glow: rgba(255, 71, 126, 0.4);
        --glass-bg: rgba(255, 255, 255, 0.05);
    }

    /* พื้นหลัง Section */
    .server-info-section {
        padding: 4rem 2rem;
        font-family: 'Poppins', 'Mitr', sans-serif;
        position: relative;
        overflow: hidden;
    }

    /* --- ส่วนหัวข้อบนสุด --- */
    .info-header {
        text-align: center;
        margin-bottom: 3rem;
    }
    .title-badge {
        display: inline-flex;
        align-items: center;
        gap: 15px;
        background: rgba(255, 71, 126, 0.1);
        border: 1px solid rgba(255, 71, 126, 0.3);
        padding: 6px 24px;
        border-radius: 50px;
        box-shadow: 0 0 15px rgba(255, 71, 126, 0.2);
    }
    .badge-text {
        color: #ffffff;
        font-weight: 600;
        letter-spacing: 2px;
        font-size: 0.95rem;
    }
    .badge-line {
        width: 20px;
        height: 2px;
        background: var(--pink-bright);
        display: inline-block;
        box-shadow: 0 0 8px var(--pink-bright);
    }
    .subtitle-text {
        color: rgba(255, 255, 255, 0.5);
        font-size: 0.75rem;
        letter-spacing: 3px;
        margin-top: 10px;
        font-weight: 500;
    }

    /* --- ระบบ Grid จัดวางกล่อง --- */
    .status-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 25px; /* เพิ่มระยะห่างให้แสงเงากระจายได้สวยขึ้น */
        max-width: 1200px;
        margin: 0 auto;
    }

    .status-card {
        /* ----------------==================================---------------- */
        /* [ปรับใหม่]: พื้นหลังสีขาวทึบ 100% ไม่มีความโปร่งแสงหรือกระจกฝ้า */
        background: #ffffff !important; 
        
        /* [ปรับใหม่]: ลบเอฟเฟกต์กระจกฝ้าออกทั้งหมดตามต้องการ */
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        /* ----------------==================================---------------- */
        
        /* 🛠️ เพิ่มขอบสีแดงอมชมพูสว่างแบบนีออนตรงนี้ (คงเดิมไว้) */
        border: 2px solid var(--pink-soft); 
        
        border-radius: 28px; /* ปรับให้โค้งมนละมุนขึ้นอีก */
        padding: 40px 20px;
        position: relative;
        overflow: hidden;
        
        /* [ปรับใหม่]: ปรับเงาให้ซ้อนมิติแบบละมุน ขับให้กล่องสีขาวลอยเด่นขึ้นมาจากพื้นหลังเว็บ */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03),
                    0 15px 35px rgba(0, 0, 0, 0.08), 
                    0 0 25px rgba(255, 71, 126, 0.15); /* ออร่าชมพูจางๆ รอบนอกกล่องขาว */
                        
        transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    /* ✨ เพิ่มลูกเล่น: เงาสะท้อนกระจกวิ่งพาดหน้ากล่อง (ปรับแผ่นแสงให้เข้มขึ้นเล็กน้อยเพื่อให้เห็นชัดบนพื้นหลังขาว) */
    .status-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: -150%;
        width: 50%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
        transform: skewX(-25deg);
        transition: 0.7s;
        z-index: 3;
    }

    /* เอฟเฟคแสงออร่าสีชมพูเรืองแสงด้านหลังกล่อง (ส่องประกายผ่านพื้นขาวออกมาแบบนุ่มนวล) */
    .card-glow {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 130px;
        height: 130px;
        background: radial-gradient(circle, var(--pink-glow) 0%, transparent 70%);
        opacity: 0.35;
        z-index: 1;
        transition: all 0.5s ease;
    }

    .card-content {
        position: relative;
        z-index: 2; 
    }

    /* ----------------==================================---------------- */
    /* 🎨 [ปรับใหม่ทั้งหมด]: โซนปรับสีตัวหนังสือและไอคอนไม่ให้จมบนพื้นหลังขาว */
    /* ----------------==================================---------------- */

    /* ไอคอนด้านบน: เปลี่ยนจากสีขาวเป็นสีประจำธีมแดงอมชมพูเด่นๆ */
    .status-icon {
        font-size: 2.2rem;
        color: #ff3366; /* ปรับเป็นสีชมพูเข้มเพื่อไม่ให้จม */
        margin-bottom: 15px;
        filter: drop-shadow(0 2px 8px rgba(255, 51, 102, 0.3));
        transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.5); /* ใส่สปริงให้ไอคอน */
        display: inline-block;
    }

    /* ข้อความบอกประเภทสถานะ: เปลี่ยนจากสีขาวจางเป็นสีเทาเข้ม/ชาโคล อ่านง่ายสบายตา */
    .status-label {
        color: #555560; 
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 1.5px;
        display: block;
        margin-bottom: 12px;
    }

    /* ตัวเลข/ตัวอักษรสถานะด้านล่าง: เปลี่ยนจากสีขาวเป็นสีเทาเข้มเกือบดำ สวย โมเดิร์น คมชัด */
    .status-value {
        color: #1a1a24; 
        font-size: 1.9rem;
        font-weight: 700;
        margin: 0;
        letter-spacing: 0.5px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    /* ข้อความ ONLINE พิเศษเรืองแสงชมพูหวานฉ่ำตัดกับพื้นหลังขาวอย่างลงตัว */
    .val-online {
        color: #ff0055; 
        text-shadow: 0 0 10px rgba(255, 0, 85, 0.2);
    }


    /* --- 🚀 มหกรรมเอฟเฟคขั้นสุดเมื่อเจอ Hover (เวอร์ชันกล่องขาวทึบ) --- */
    
    .status-card:hover {
        transform: translateY(-12px) scale(1.03); /* ลอยสูงขึ้นและขยายตัวเล็กน้อยแบบดุ๊กดิ๊ก */
        
        /* [ปรับใหม่]: ตอนเมาส์ชี้ให้ยังคงเป็นสีขาวทึบเหมือนเดิม */
        background: #ffffff !important; 
        
        border-color: #ff3366; /* ขอบจะเปลี่ยนเป็นสีชมพูจ้ากระแทกตาเมื่อชี้ */
        
        /* เพิ่มพลังการเรืองแสงออร่าสีชมพูรอบกล่องให้ฟุ้งละมุนสะใจยิ่งขึ้น */
        box-shadow: 0 20px 40px rgba(255, 71, 126, 0.25), 
                    0 0 30px rgba(255, 71, 126, 0.4);
    }

    /* สั่งให้เงาสะท้อนกระจกวิ่งผ่านหน้าจอแวบหนึ่ง */
    .status-card:hover::before {
        left: 150%;
    }

    /* ขยายรัศมีแสงออร่าสีชมพูด้านหลังให้สว่างโร่ */
    .status-card:hover .card-glow {
        width: 220px;
        height: 220px;
        opacity: 0.6;
    }

    /* ลูกเล่นพิเศษ: ไอคอนจะกระโดดเด้งขึ้นและหมุนนิดๆ พร้อมเรืองแสงชมพูเด่นๆ */
    .status-card:hover .status-icon {
        transform: translateY(-8px) rotate(8deg) scale(1.1);
        color: var(--pink-bright);
        filter: drop-shadow(0 0 12px var(--pink-bright));
    }


    /* --- ปรับแต่งระบบรีสปอนซีฟบนมือถือ (คงเดิมไว้) --- */
    @media (max-width: 992px) {
        .status-grid {
            grid-template-columns: repeat(2, 1fr); 
            gap: 20px;
        }
    }
    @media (max-width: 576px) {
        .status-grid {
            grid-template-columns: 1fr; 
        }
        .status-card {
            padding: 30px 15px;
        }
        .status-value {
            font-size: 1.6rem;
        }
    }
	/* 🛠️ [โซนปรับขนาดกรอบรูปสไลด์] 
       คุณสามารถปรับขนาดความกว้าง (max-width) และความสูง (aspect-ratio หรือ height) ตรงนี้ได้เลยครับ */
    :root {
        --slider-max-width: 1320px;  /* ความกว้างสูงสุดของกรอบสไลด์ */
        --slider-aspect-ratio: 24/9; /* อัตราส่วนหน้าจอ (เช่น 16/9, 21/9 หรือกำหนดเป็น height แทนได้) */
        --theme-pink: #ff477e;       /* สีชมพูอมแดงหลัก */
        --theme-pink-glow: rgba(255, 71, 126, 0.5);
    }

    /* กรอบครอบด้านนอกสุด */
    .slider-master-container {
        width: 100%;
        max-width: var(--slider-max-width);
        margin: 2rem auto;
        padding: 0 15px;
    }

    /* ตัวสไลเดอร์หลัก [✨ เพิ่มเส้นกรอบเรืองแสงสว่างละมุนรอบรูปภาพสไลด์] */
    .custom-slider {
        width: 100%;
        aspect-ratio: var(--slider-aspect-ratio);
        min-height: 400px; /* ป้องกันสไลด์เตี้ยเกินไปบนมือถือ */
        position: relative;
        border-radius: 32px; /* ความมนของกรอบสไลด์ ให้ดูละมุน */
        overflow: hidden;
        border: 2px solid #ff6b8b; /* เส้นกรอบสีแดงอมชมพูสว่าง */
        box-shadow: 0 15px 35px rgba(255, 71, 126, 0.2), 0 0 25px rgba(255, 107, 139, 0.4); /* เงาเรืองแสงโทนสว่าง */
        background-color: #fff;
        font-family: 'Poppins', 'Mitr', sans-serif;
    }

    /* ชิ้นส่วนสไลด์แต่ละหน้า */
    .slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.8s ease-in-out, visibility 0.8s;
        display: flex;
        align-items: center;
        padding: 0 10%;
    }
    .slide.active {
        opacity: 1;
        visibility: visible;
    }

    /* ภาพพื้นหลังของสไลด์ + เอฟเฟค Cinematic Zoom */
    .slide-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        transform: scale(1.1);
        transition: transform 6s ease-out;
        z-index: 1;
    }
    .slide.active .slide-bg {
        transform: scale(1); /* ค่อยๆ ซูมออกอย่างนุ่มนวลเมื่อสไลด์เปิด */
    }

    /* เลเยอร์เคลือบผิวหน้า [✨ ปรับแก้ให้โทนสว่าง แดงอมชมพูใสละมุน ละทิ้งสีดำมืด] */
    .slide-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, rgba(255, 240, 243, 0.85) 0%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 71, 126, 0.15) 100%);
        z-index: 2;
    }

    /* กล่องข้อความ */
    .slide-content {
        position: relative;
        z-index: 3;
        max-width: 600px;
        color: #ffffff;
        text-align: left;
    }

    /* เอฟเฟคข้อความค่อยๆ ลอยขึ้นมา (Text Animation) */
    .slide-tag {
        display: inline-block;
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--theme-pink);
        background: rgba(255, 71, 126, 0.15);
        padding: 6px 16px;
        border-radius: 50px;
        border: 1px solid rgba(255, 71, 126, 0.3);
        letter-spacing: 2px;
        margin-bottom: 1.2rem;
        transform: translateY(30px);
        opacity: 0;
        transition: all 0.6s ease;
    }
    .slide-title {
        font-size: clamp(2rem, 4vw, 3.5rem); /* ปรับขนาดฟอนต์อัตโนมัติตามหน้าจอ */
        font-weight: 800;
        line-height: 1.2;
        margin-bottom: 1.2rem;
        transform: translateY(30px);
        opacity: 0;
        transition: all 0.6s ease 0.15s;
    }
    .slide-title .highlight {
        color: var(--theme-pink);
        text-shadow: 0 0 15px var(--theme-pink-glow);
    }
    .slide-desc {
        font-size: clamp(0.9rem, 1.5vw, 1.05rem);
        color: #e0e0e6;
        font-weight: 300;
        line-height: 1.6;
        margin-bottom: 2rem;
        transform: translateY(30px);
        opacity: 0;
        transition: all 0.6s ease 0.3s;
    }
    .slide-btn {
        display: inline-flex;
        align-items: center;
        background: var(--theme-pink);
        color: #fff;
        padding: 12px 30px;
        border-radius: 50px;
        font-weight: 600;
        text-decoration: none;
        font-size: 0.95rem;
        box-shadow: 0 5px 15px var(--theme-pink-glow);
        transform: translateY(30px);
        opacity: 0;
        transition: all 0.6s ease 0.45s, background 0.3s, transform 0.2s;
    }
    
    /* สั่งให้ข้อความเคลื่อนไหวเมื่อสไลด์นั้น Active */
    .slide.active .slide-tag,
    .slide.active .slide-title,
    .slide.active .slide-desc,
    .slide.active .slide-btn {
        transform: translateY(0);
        opacity: 1;
    }

    /* ปุ่มกดเพิ่มเมื่อเมาส์ชี้ปุ่ม */
    .slide-btn:hover {
        background: #ff2a65;
        box-shadow: 0 8px 25px rgba(255, 42, 101, 0.7);
        color: #fff;
    }

    /* ปุ่มควบคุม ซ้าย-ขวา แบบโปร่งแสงเนออน */
    .nav-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 50px;
        height: 50px;
        background: rgba(255, 255, 255, 0.07);
        border: 1px solid rgba(255, 255, 255, 0.15);
        color: #ffffff;
        border-radius: 50%;
        cursor: pointer;
        z-index: 4;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        transition: all 0.3s;
        backdrop-filter: blur(5px);
    }
    .nav-btn:hover {
        background: var(--theme-pink);
        border-color: var(--theme-pink);
        box-shadow: 0 0 15px var(--theme-pink-glow);
    }
    .prev-btn { left: 25px; }
    .next-btn { right: 25px; }

    /* ปุ่มจุดดาวน์โหลดกลมๆ ด้านล่าง */
    .slider-dots {
        position: absolute;
        bottom: 25px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 4;
        display: flex;
        gap: 12px;
    }
    .dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.4);
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        position: relative;
    }
    /* จุดที่กำลังแสดงผล (ขยายใหญ่ขึ้นและเรืองแสง) */
    .dot.active {
        background: var(--theme-pink);
        transform: scale(1.3);
        box-shadow: 0 0 10px var(--theme-pink);
    }

    /* ปรับแต่งการแสดงผลบนมือถือให้สวยงามพอดี */
    @media (max-width: 768px) {
        .slide { padding: 0 12%; }
        .nav-btn { width: 40px; height: 40px; font-size: 0.9rem; }
        .prev-btn { left: 10px; }
        .next-btn { right: 10px; }
        .slider-dots { bottom: 15px; }
    }
	/* หน้าต่าง Preloader หลัก (โทนแดงอมชมพูสว่าง) */
    #preloader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: radial-gradient(circle, #fff0f3 0%, #ffe3e8 100%); /* พื้นหลังชมพูสว่างละมุน */
        z-index: 99999; /* อยู่บนสุดของทุกเลเยอร์ */
        display: flex;
        justify-content: center;
        align-items: center;
        transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.6s ease;
        font-family: 'Poppins', 'Mitr', sans-serif;
        overflow: hidden;
    }

    /* จัดระเบียบเนื้อหาตรงกลาง */
    .preloader-wrapper {
        text-align: center;
        position: relative;
        z-index: 2;
    }

    /* 🛠️ [โซนปรับขนาดโลโก้] ปรับความกว้างและความสูงตรงนี้ได้เลยครับ */
    .main-logo {
        width: 200px;         /* แก้ไขขนาดความกว้างตามต้องการ */
        height: 200px;        /* แก้ไขขนาดความสูงตามต้องการ */
        object-fit: cover;
        border-radius: 24px;   /* ความมนของมุมโลโก้ */
        box-shadow: 0 10px 25px rgba(255, 71, 126, 0.15);
        position: relative;
        z-index: 2;
        animation: floatLogo 3s ease-in-out infinite; /* เอฟเฟคลอยขึ้นลง */
    }

    /* เอฟเฟควงแสงเรืองหลังโลโก้ */
    .logo-container {
        position: relative;
        display: inline-block;
        margin-bottom: 1.5rem;
    }
    .logo-glow-effect {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 140%;
        height: 140%;
        background: radial-gradient(circle, rgba(255, 71, 126, 0.4) 0%, transparent 70%);
        border-radius: 50%;
        filter: blur(10px);
        animation: pulseGlow 2s ease-in-out infinite alternate;
    }

    /* ข้อความสถานะและเปอร์เซ็นต์ */
    .loader-status {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 250px;
        margin: 0 auto 8px auto;
        color: #ff477e; /* สีแดงอมชมพู */
        font-weight: 600;
        font-size: 0.9rem;
        letter-spacing: 1px;
    }
    .status-text {
        font-size: 0.8rem;
        opacity: 0.8;
    }

    /* หลอดดาวน์โหลดด้านนอก */
    .progress-bar-container {
        width: 250px;
        height: 8px;
        background: rgba(255, 71, 126, 0.1);
        border-radius: 10px;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(255, 71, 126, 0.15);
    }

    /* หลอดดาวน์โหลดด้านใน (ส่วนที่วิ่ง) */
    #progress-bar-fill {
        height: 100%;
        width: 0%; /* เริ่มต้นที่ 0% */
        background: linear-gradient(90deg, #ff6b8b, #ff477e);
        border-radius: 10px;
        position: relative;
        transition: width 0.1s linear;
    }

    /* ประกายไฟวิบวับวิ่งที่หัวหลอด */
    .bar-sparkle {
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        width: 15px;
        background: #fff;
        box-shadow: 0 0 10px #fff, 0 0 5px #ff477e;
        opacity: 0.8;
    }

    /* ไอคอนเกมน่ารักๆ ใต้หลอด */
    .cute-icon {
        margin-top: 15px;
        color: #ff477e;
        opacity: 0.5;
        font-size: 1.2rem;
        animation: spinIcon 4s linear infinite;
    }

    /* เอฟเฟคฟองสบู่/หัวใจในพื้นหลัง */
    .bg-particles {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        pointer-events: none;
        z-index: 1;
    }
    .bubble {
        position: absolute;
        background: rgba(255, 71, 126, 0.12);
        border-radius: 50%;
        bottom: -20px;
        animation: rise Up 5s infinite linear;
    }

    /* --- Keyframes สำหรับ Animation ต่างๆ --- */
    @keyframes floatLogo {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }
    @keyframes pulseGlow {
        0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.5; }
        100% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.9; }
    }
    @keyframes spinIcon {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    @keyframes riseUp {
        0% { transform: translateY(0) scale(0.5); opacity: 0; }
        50% { opacity: 0.8; }
        100% { transform: translateY(-105vh) scale(1.2); opacity: 0; }
    }
	/* ตกแต่งฟอนต์ให้ดูละมุนและอ่านง่ายขึ้น */
    .custom-footer {
        background-color: #0b0b0c; /* พื้นหลังดำลึก */
        padding: 3rem 0 2rem 0;
        position: relative;
        overflow: hidden;
        font-family: 'Poppins', 'Mitr', sans-serif;
        text-align: center;
    }

    /* เส้นเรืองแสงด้านบน */
    .footer-glow-line {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(90deg, transparent, #ff3366, #ff6699, transparent);
        box-shadow: 0 0 15px rgba(255, 51, 102, 0.7);
    }

    /* สไตล์ชื่อแบรนด์ */
    .brand-name {
        color: #ffffff;
        font-weight: 600;
        letter-spacing: 2px;
        font-size: 1.4rem;
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
    }
    .brand-name .highlight {
        color: #ff477e; /* แดงอมชมพู */
        text-shadow: 0 0 12px rgba(255, 71, 126, 0.6);
    }

    /* ข้อความลิขสิทธิ์ */
    .copyright-text {
        color: #e0e0e0;
        font-size: 0.95rem;
        font-weight: 300;
    }

    /* ข้อความคำอธิบายแบบนุ่มนวล */
    .sub-text {
        color: #a0a0aa;
        font-size: 0.85rem;
        letter-spacing: 0.5px;
    }

    /* ปุ่ม Social Media เอฟเฟคเรืองแสงและขยายตัวเมื่อ Hover */
    .footer-social {
        display: flex;
        justify-content: center;
        gap: 15px;
    }
    .social-icon {
        width: 42px;
        height: 42px;
        background: rgba(255, 71, 126, 0.1);
        border: 1px solid rgba(255, 71, 126, 0.3);
        color: #ff477e;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        text-decoration: none;
    }
    .social-icon:hover {
        background: #ff477e;
        color: #fff;
        transform: translateY(-5px) scale(1.1);
        box-shadow: 0 0 20px rgba(255, 71, 126, 0.6);
        border-color: #ff477e;
    }

    /* เอฟเฟคหัวใจเต้นดุ๊กดิ๊ก */
    .heart-beat {
        color: #ff477e;
        display: inline-block;
        animation: beat 1.5s infinite;
    }
    @keyframes beat {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.15); }
    }

    /* เอฟเฟคหัวใจลอยน่ารักๆ ด้านข้าง */
    .floating-heart {
        position: absolute;
        color: rgba(255, 71, 126, 0.15);
        font-size: 1.5rem;
        pointer-events: none;
    }
    .heart-1 {
        left: 10%;
        top: 20%;
        animation: floatY 4s ease-in-out infinite;
    }
    .heart-2 {
        right: 10%;
        bottom: 25%;
        animation: floatY 4.5s ease-in-out infinite reverse;
    }
    @keyframes floatY {
        0%, 100% { transform: translateY(0) rotate(0deg); }
        50% { transform: translateY(-10px) rotate(10deg); }
    }
	/* สไตล์เริ่มต้นของปุ่มสีขาว */
.btn-white-glow {
    background-color: #ffffff !important;
    color: #111111 !important; /* สีตัวอักษรเข้มเพื่อให้ตัดกับพื้นหลังขาว */
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 50px; /* ปรับให้ขอบมนสวยงาม (ถ้าชอบเหลี่ยมสามารถลบบรรทัดนี้ได้) */
    font-weight: 600;
    position: relative;
    overflow: hidden; /* ซ่อนเอฟเฟกต์แสงวิ่งไม่ให้ทะลุออกนอกปุ่ม */
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3); /* เงาขาวจางๆ ตอนปกติ */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* แอนิเมชันลื่นๆ */
}

/* --- ลูกเล่นที่ 1: แสงสะท้อนวิ่งผ่าน (Shine Effect) --- */
.btn-white-glow::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.8) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg); /* เอียงแสงวิ่งให้ดูมีมิติ */
    transition: none;
}

/* --- ลูกเล่นที่ 2: เอฟเฟกต์ตอนเอาเมาส์ไปชี้ (Hover) --- */
.btn-white-glow:hover {
    color: #000000 !important;
    transform: translateY(-3px); /* ปุ่มลอยขึ้นมาเล็กน้อย */
    /* แสงนีออนสีขาวฟุ้งกระจายรอบปุ่ม (Glow) */
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 
                0 0 40px rgba(255, 255, 255, 0.4); 
}

/* สั่งให้แสงสะท้อนวิ่งผ่านทันทีเมื่อ Hover */
.btn-white-glow:hover::before {
    left: 150%;
    transition: all 0.6s ease-in-out;
}

/* --- ลูกเล่นที่ 3: ไอคอนขยับเมื่อชี้ --- */
.btn-white-glow:hover .fa-gamepad {
    animation: gamepadBounce 0.5s infinite alternate;
}

@keyframes gamepadBounce {
    from { transform: translateY(0); }
    to { transform: translateY(-3px) rotate(5deg); } /* ไอคอนลอยและเอียงเล็กน้อยดูมีชีวิตชีวา */
}

/* --- ลูกเล่นที่ 4: เอฟเฟกต์ตอบสนองตอนคลิกกดลงไป (Active) --- */
.btn-white-glow:active {
    transform: translateY(-1px); /* ปุ่มยุบลงไปเหมือนโดนกดจริง */
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.6);
}
	/* ==========================================
   Header Background Decoration & Glow Effects
   ========================================== */

:root {
    /* 🛠️ ส่วนตั้งค่ารูปภาพพื้นหลัง (ปรับตัวเลขตรงนี้ได้เลย) */
    --bg-decor-width: 300px;       /* ความกว้างของรูปพื้นหลัง ซ้าย-ขวา */
    --bg-decor-top: 70%;           /* ตำแหน่งความสูงจากด้านบน (ปรับ % เพื่อดันขึ้น-ลง) */
    --bg-decor-side-offset: 300px;  /* ระยะห่างจากขอบจอ (ยิ่งเยอะยิ่งขยับเข้าใกล้ตรงกลาง) */
    
    /* 🎨 ส่วนตั้งค่าแสงเรืองรอง (Glow Effect) */
    --bg-glow-color: rgba(255, 117, 140, 0.45); /* สีของแสงเรืองรอง */
    --bg-glow-blur: 80px;          /* ความฟุ้งของแสงพื้นหลัง */
}

/* บังคับให้ส่วน Header รองรับตำแหน่งของรูปพื้นหลัง */
.hero-section {
    position: relative;
    overflow: hidden; /* ป้องกันไม่ให้รูปภาพล้นขอบจอไปสร้าง Scrollbar แนวนอน */
}

/* ทำให้เนื้อหาหลักลอยอยู่เหนือรูปภาพพื้นหลังเสมอ */
.hero-content {
    position: relative;
    z-index: 10; 
}

/* -------------------------------------------
   โครงสร้างหลักของรูปพื้นหลังซ้าย-ขวา
   ------------------------------------------- */
.hero-bg-decor {
    position: absolute;
    top: var(--bg-decor-top);
    transform: translateY(-50%);
    width: var(--bg-decor-width);
    height: auto;
    pointer-events: none; /* เพื่อไม่ให้รูปภาพไปบล็อกเมาส์เวลาผู้เล่นจะกดปุ่มบนเว็บ */
    z-index: 1; /* อยู่ชั้นใต้ข้อความและโลโก้ */
}

/* จัดตำแหน่งฝั่งซ้าย */
.bg-decor-left {
    left: var(--bg-decor-side-offset);
}

/* จัดตำแหน่งฝั่งขวา */
.bg-decor-right {
    right: var(--bg-decor-side-offset);
}

/* ตัวรูปภาพ และเอฟเฟกต์เคลื่อนไหว (Floating) */
.bg-decor-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    position: relative;
    z-index: 3;
    animation: bgFloat 6s ease-in-out infinite alternate;
}

/* สลับจังหวะการขยับของฝั่งขวา ให้ดูนุ่มนวลเป็นธรรมชาติ */
.bg-decor-right .bg-decor-img {
    animation-delay: 2s;
}

/* -------------------------------------------
   เอฟเฟกต์แสงเรืองรองพื้นหลังรูปภาพ (Glow Background)
   ------------------------------------------- */
.bg-decor-glow {
    position: absolute;
    width: 80%;
    height: 80%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-glow-color);
    border-radius: 50%;
    filter: blur(var(--bg-glow-blur));
    z-index: 2; /* อยู่หลังรูปภาพ แต่อยู่หน้าพื้นหลังเว็บ */
    animation: glowPulse 3s ease-in-out infinite alternate;
}

/* -------------------------------------------
   System Animation (ลูกเล่นเคลื่อนไหว)
   ------------------------------------------- */
@keyframes bgFloat {
    0% { transform: translateY(0) scale(1); }
    100% { transform: translateY(-15px) scale(1.02); } /* ลอยขึ้นพร้อมขยายเบาๆ */
}

@keyframes glowPulse {
    0% { opacity: 0.6; transform: translate(-50%, -50%) scale(0.9); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
}

/* -------------------------------------------
   Responsive (รองรับการแสดงผลบนมือถือ)
   ------------------------------------------- */
@media (max-width: 1199.98px) {
    /* จอแท็บเล็ต/คอมพิวเตอร์ขนาดเล็ก: ย่อขนาดรูปลงมาเพื่อไม่ให้บังตัวหนังสือตรงกลาง */
    :root {
        --bg-decor-width: 280px;
        --bg-decor-side-offset: 10px;
    }
}

@media (max-width: 991.98px) {
    /* จอมือถือทุกรุ่น: สั่งซ่อนรูปภาพตกแต่งพื้นหลัง เพื่อหลีกเลี่ยงการทับซ้อนกับเนื้อหาหลัก */
    .hero-bg-decor {
        display: none !important;
    }
}
	/* ==========================================
   CSS ระบบ Sticky: เรียงต่อกันปกติ แต่เลื่อนตามจอ 
   ========================================== */

/* แถบข้อความวิ่งบนสุด */
.top-announcement-bar {
    font-family: 'Kanit', sans-serif;
    width: 100%;
    height: 42px;
    background: #ff758c !important; /* สีเข้มพรีเมียมดาร์กเบอร์รี */
    box-shadow: 0 4px 15px rgba(255, 117, 140, 0.25);
    border-bottom: 2px solid rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    
    /* ปล่อยให้อยู่ด้านบนสุดตามธรรมชาติ */
    position: relative !important;
    z-index: 10001; 
    overflow: hidden;
}

/* เมนูหลัก: ล็อกให้วิ่งตาม Scroll จอ */
.main-navigation {
    /* ใช้ sticky แทน fixed เพื่อไม่ให้ทับกับแถบวิ่งตอนเริ่มแรก */
    position: -webkit-sticky !important; /* รองรับ Safari */
    position: sticky !important; 
    top: 0 !important; /* เมื่อสกรอลล์มาถึงขอบบนสุด ให้ล็อกติดตรงนี้ทันที */
    width: 100%;
    z-index: 10000; /* อยู่ชั้นบนสุดเพื่อไม่ให้เนื้อหาเว็บวิ่งมาทับ */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* เพิ่มเงาเบาๆ ตอนเลื่อนตามจอ */
}

/* ส่วนเนื้อหาเว็บ (Hero Banner) */
.hero-section {
    padding-top: 0px; /* ไม่ต้องใส่ padding เผื่อแล้ว เพราะระบบจัดสัดส่วนให้เอง */
}

/* -------------------------------------------
   Responsive สำหรับมือถือ
   ------------------------------------------- */
@media (max-width: 575.98px) {
    .top-announcement-bar {
        height: 36px;
    }
    .marquee-wrapper {
        margin-left: 5px;
        margin-right: 25px;
    }
    .marquee-item {
        font-size: 0.82rem;
        padding-right: 50px;
    }
}

/* --- อนิเมชันตัวอักษรวิ่งอื่นๆ คงเดิมตามปกติ --- */
.note-badge { background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); padding: 2px 10px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.5); color: #ffffff; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.5px; white-space: nowrap; z-index: 10; }
.pulse-icon { display: inline-block; margin-right: 4px; animation: cuteWobble 2s ease infinite; }
@keyframes cuteWobble { 0%, 100% { transform: rotate(0deg) scale(1); } 25% { transform: rotate(-10deg) scale(1.1); } 75% { transform: rotate(10deg) scale(1.1); } }
.marquee-wrapper { flex: 1; overflow: hidden; display: flex; align-items: center; height: 100%; }
.marquee-content { display: flex; white-space: nowrap; padding-left: 100%; animation: marqueeTimeline 25s linear infinite; }
.marquee-wrapper:hover .marquee-content { animation-play-state: paused; cursor: pointer; }
.marquee-item { color: #ffffff; font-size: 0.9rem; font-weight: 400; display: flex; align-items: center; padding-right: 80px; text-shadow: 0 1px 2px rgba(184, 38, 73, 0.2); }
.emoji { font-size: 1.05rem; margin-right: 6px; }
@keyframes marqueeTimeline { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-100%, 0, 0); } }
.btn-close-note { background: none; border: none; color: rgba(255, 255, 255, 0.7); padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; position: absolute; right: 5px; top: 50%; transform: translateY(-50%); z-index: 10; }
.btn-close-note:hover { color: #ffffff; transform: translateY(-50%) scale(1.15); }
	/* ==========================================
   Premium Slide Image - Pinkish Red Theme
   ========================================== */

/* ฟอนต์แนะนำ (หากในโปรเจกต์มีอยู่แล้วสามารถข้ามได้) */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;600;700&display=swap');

.custom-carousel-wrapper {
    font-family: 'Kanit', sans-serif;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* กล่องตัว Slide หลัก (สไตล์กระจกฝ้า Glassmorphism) */
.custom-carousel-inner {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 24px;
    box-shadow: 0 15px 35px rgba(230, 57, 95, 0.15), 
                0 5px 15px rgba(0, 0, 0, 0.05);
    padding: 40px 60px;
    overflow: visible; /* ยอมให้รูปภาพลอยทะลุขอบขึ้นไปได้เพื่อความโมเดิร์น */
}

/* การจัดตำแหน่งใน Responsive */
@media (max-width: 991.98px) {
    .custom-carousel-inner {
        padding: 30px;
    }
    .custom-content-col {
        text-align: center;
        margin-top: 20px;
    }
}

/* ตัวหนังสือและแท็กต่างๆ */
.tag-premium {
    background-color: #12392F !important; /* สีเขียวเข้มตามต้นฉบับ */
    color: #ffffff;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}

.slide-title {
    font-size: 2.8rem;
    font-weight: 700;
    color: #1a1a1a;
}

/* ไฮไลท์ข้อความสีแดงอมชมพู */
.highlight-text {
    color: #e6395f; 
    text-shadow: 0 0 15px rgba(230, 57, 95, 0.3);
}

.slide-desc {
    color: #555555;
    font-size: 1.1rem;
    font-weight: 300;
}

/* ปุ่มกด ซื้อเลยวันนี้ (ลูกเล่น Gradient + Glow สีแดงอมชมพู) */
.btn-buy-now {
    background: linear-gradient(135deg, #ff527b 0%, #e6395f 100%);
    color: #ffffff !important;
    font-weight: 600;
    padding: 12px 35px;
    border-radius: 50px;
    border: none;
    box-shadow: 0 6px 20px rgba(230, 57, 95, 0.4);
    transition: all 0.3s ease;
}

.btn-buy-now:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(230, 57, 95, 0.6);
    background: linear-gradient(135deg, #e6395f 0%, #c22549 100%);
}

/* เอฟเฟกต์รูปภาพขยับเบาๆ (Floating Effect) */
.slide-img {
    max-height: 380px;
    object-fit: contain;
    animation: floatEffect 5s ease-in-out infinite;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.15));
}

@keyframes floatEffect {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

/* ปุ่มลูกศร ซ้าย-ขวา แบบกลมในภาพ */
.custom-nav-btn {
    width: 45px;
    height: 45px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 1;
    transition: all 0.2s ease;
}

/* ซ่อนปุ่มหลุดเฟรมขอบนอก และตั้งตำแหน่งซ้ายขวาให้กินเข้าไปในสไลด์ */
.carousel-control-prev.custom-nav-btn { left: 40px; }
.carousel-control-next.custom-nav-btn { right: 40px; }

.nav-arrow {
    background-color: #ffffff;
    color: #e6395f; /* สีลูกศรแดงอมชมพู */
    width: 45px;
    height: 45px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border: 1px solid rgba(230, 57, 95, 0.2);
    transition: all 0.2s ease;
}

.custom-nav-btn:hover .nav-arrow {
    background-color: #e6395f;
    color: #ffffff;
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(230, 57, 95, 0.4);
}

/* Custom Indicators (ขีดสไลด์ด้านล่าง) */
.custom-indicators [data-bs-target] {
    width: 25px;
    height: 4px;
    border-radius: 2px;
    background-color: #cccccc;
    border: none;
    transition: all 0.3s ease;
}

.custom-indicators .active {
    width: 40px;
    background-color: #e6395f; /* ขีดที่กำลังเลือกเป็นสีแดงอมชมพู */
}
	/* --- สไตล์ของ Floating Menu (Desktop) --- */
.cute-menu-container {
    position: fixed;
    right: 20px; /* ชิดขวาใกล้ Scroll bar */
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    padding: 12px;
    border-radius: 30px;
    box-shadow: 0 8px 32px rgba(255, 75, 110, 0.15);
    border: 2px solid #ffccd5;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 9999;
    /* เอฟเฟคการเคลื่อนไหวเด้งดึ๋งนุ่มนวล (Bounce) */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}

/* ปุ่มเมนูย่อย */
.cute-menu-item {
    width: 50px;
    height: 50px;
    background-color: #fff;
    border: none;
    border-radius: 50%;
    color: #ff4b6e; /* สีแดงอมชมพูหลัก */
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* การสปริงตัวเวลาเปลี่ยนสถานะ */
    transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6), 
                background-color 0.3s ease, 
                color 0.3s ease;
}

/* เอฟเฟคเมื่อเอาเมาส์ไปชี้ (Hover) */
.cute-menu-item:hover {
    transform: scale(1.2); /* ขยายใหญ่ขึ้นแบบดึ๋งๆ */
    background-color: #ff4b6e;
    color: #fff;
    box-shadow: 0 5px 15px rgba(255, 75, 110, 0.4);
}

/* เอฟเฟคเมื่อกด (Active) */
.cute-menu-item:active {
    transform: scale(0.95);
}

/* ข้อความ Tooltip เด้งออกมาตอนชี้ (Desktop) */
.cute-menu-item::after {
    content: attr(data-tooltip);
    position: absolute;
    right: 65px;
    background-color: #ff4b6e;
    color: white;
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cute-menu-item:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* --- Responsive สำหรับ Mobile (จอเล็กกว่า 768px) --- */
@media (max-width: 768px) {
    .cute-menu-container {
        right: 50%;
        top: auto;
        bottom: 20px; /* ย้ายมาอยู่ด้านล่างจอ */
        transform: translateX(50%); /* จัดให้อยู่กึ่งกลางแนวนอน */
        flex-direction: row; /* เปลี่ยนจากแนวตั้งเป็นแนวนอน */
        padding: 10px 20px;
        border-radius: 40px;
        box-shadow: 0 -5px 25px rgba(255, 75, 110, 0.2);
        width: 90%; /* ขยายให้เกือบเต็มหน้าจอมือถือ */
        justify-content: space-around;
    }

    .cute-menu-item {
        width: 45px;
        height: 45px;
        font-size: 18px;
    }

    /* ปิด Tooltip บนมือถือไม่ให้บังหน้าจอ */
    .cute-menu-item::after {
        display: none;
    }

    /* แตะบนมือถือแล้วให้ปุ่มขยายดึ๋งๆ แทน */
    .cute-menu-item:active {
        transform: scale(1.25);
    }
}
	/* --- ส่วนฟอนต์ --- */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@700&family=Kanit:wght@500;700&display=swap');

/* --- คลาสหัวข้อหลัก --- */
.bacon-pink-perfect {
    font-family: 'Fredoka', 'Kanit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 5rem !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    text-align: center;
    margin: 0 auto;
    
    /* บังคับสีตัวอักษรเป็นสีแดงอมชมพูสว่าง ป้องกันบั๊กสีขาว */
    color: #ff5276 !important; 
    -webkit-text-fill-color: #ff5276 !important;
    
    /* ถมขอบสีขาวหนาๆ ล้อมรอบตัวอักษรชมพู และเงาหนาสีแดงเข้ม #c91a3b ด้านล่างขวา */
    text-shadow: 
        -4px -4px 0 #fff,  4px -4px 0 #fff, -4px  4px 0 #fff,  4px  4px 0 #fff,
        -4px  0px 0 #fff,  4px  0px 0 #fff,  0px -4px 0 #fff,  0px  4px 0 #fff,
         3px  3px 0 #fff, -3px  3px 0 #fff,  3px -3px 0 #fff, -3px -3px 0 #fff,
         6px  8px 0px #c91a3b, 7px 9px 0px #c91a3b;

    /* เพิ่มอนิเมชันสำหรับ text effect */
    animation: baconFloat 3s ease-in-out infinite; 
}

/* --- คลาสคำโปรยภาษาไทยด้านล่าง --- */
.bacon-sub-perfect {
    font-family: 'Kanit', sans-serif !important;
    font-weight: 500 !important;
    font-size: 1.35rem !important;
    color: #ffffff !important;
    text-align: center;
    margin-top: 20px !important;
    display: block;
    
    /* เงาสีแดงชมพูฟุ้งๆ ด้านหลัง ช่วยขับอักษรขาวให้ลอยเด่นเหนือบอร์ดเกม */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6),
                 0 0 12px rgba(242, 56, 95, 0.9);

    /* เพิ่มอนิเมชันสำหรับ text effect */
    animation: baconFloat 3s ease-in-out infinite;
}

/* อนิเมชันทำให้ข้อความลอยขึ้นลง */
@keyframes baconFloat {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
    100% {
        transform: translateY(0);
    }
}

/* อนิเมชันทำให้ข้อความเรืองแสง */
@keyframes baconGlow {
    0% {
        text-shadow: 0 0 5px rgba(242, 56, 95, 0.5), 0 0 10px rgba(242, 56, 95, 0.3);
    }
    50% {
        text-shadow: 0 0 10px rgba(242, 56, 95, 0.8), 0 0 20px rgba(242, 56, 95, 0.5);
    }
    100% {
        text-shadow: 0 0 5px rgba(242, 56, 95, 0.5), 0 0 10px rgba(242, 56, 95, 0.3);
    }
}

/* --- ระบบสเกลขนาดอัตโนมัติบนหน้าจอมือถือ --- */
@media (max-width: 768px) {
    .bacon-pink-perfect {
        font-size: 3.2rem !important;
        text-shadow: 
            -2px -2px 0 #fff,  2px -2px 0 #fff, -2px  2px 0 #fff,  2px  2px 0 #fff,
             4px  5px 0px #c91a3b;
    }
    .bacon-sub-perfect {
        font-size: 1.1rem !important;
        padding: 0 15px;
    }
}
	/* --- ส่วนควบคุมตัวหน้าเว็บ --- */
body {
    position: relative;
    background: #0d0d11; /* สีพื้นหลังสำรองกรณีภาพยังโหลดไม่เสร็จ */
    margin: 0;
    padding: 0;
}

/* 
   ✨ [แก้ไขใหม่] เลเยอร์พื้นหลังครอบคลุมทั้งเว็บไซต์ 
   ใช้ position: fixed ทำให้อยู่ติดกับหน้าจอตลอดเวลาแม้จะเลื่อนเว็บลงด้านล่าง
*/
.site-bg-parallax {
    position: fixed;
    /* ขยายขนาดตัวเลเยอร์เผื่อไว้ 10% รอบทิศทาง ป้องกันขอบหลุดตอนเมาส์สะบัด */
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    
    /* รูปภาพพื้นหลังและ Gradient เดิมของคุณ */
    background: linear-gradient(135deg, rgba(227, 11, 77, 0.15) 0%, rgba(17, 17, 22, 0.5) 100%), 
                url('images/bg2.jpg') no-repeat center center;
    background-size: cover;
    
    /* ตั้งค่าให้อยู่ล่างสุดใต้ทุกเนื้อหา และห้ามบังการคลิกปุ่มต่างๆ */
    z-index: -1; 
    pointer-events: none; 
    
    /* เอฟเฟคความนุ่มนวลเวลาขยับ */
    transition: transform 0.2s ease-out; 
    will-change: transform;
}

/* --- โค้ดส่วน Hero เดิมของคุณ (เคลียร์ค่า Background ออกเพื่อให้มองเห็นพื้นหลังใหญ่) --- */
.hero-section {
    position: relative;
    width: 100%;
    height: 100vh;
    background: transparent; /* เปลี่ยนเป็นโปร่งใส เพื่อให้ทะลุเห็นพื้นหลังเว็บ */
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-content {
    position: relative;
    z-index: 2;
}
	/* --- โครงสร้างหลักของหิมะตกทั่วหน้าจอ --- */
.snow-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 9999;
    pointer-events: none; /* คลิกทะลุหิมะได้ปกติ ไม่บังปุ่ม */
    overflow: hidden;
}

/* 
   💡 แก้ไขจุดนี้: กำหนดขนาดพื้นฐานให้เม็ดหิมะ (กว้าง 4px ยาว 4px) 
   เพื่อให้ box-shadow คัดลอกจุดสีแดงอมชมพูออกมาแสดงผลได้ร้อยเปอร์เซ็นต์
*/
.snow {
    position: absolute;
    width: 7px; 
    height: 7px;
    background: transparent;
    border-radius: 50%; /* ทำให้ออกเป็นทรงกลมละมุน */
    top: -20px;
    animation: snowFall linear infinite;
}

/* --- กลุ่มหิมะสีขาวสะอาด --- */
.snow-white-1 {
    box-shadow: 
        15vw 10vh 3px #fff, 35vw 30vh 2px #fff, 55vw 15vh 3px #fff, 75vw 40vh 2px #fff, 95vw 25vh 3px #fff,
        20vw 60vh 2px #fff, 40vw 75vh 3px #fff, 60vw 50vh 2px #fff, 80vw 85vh 3px #fff, 10vw 90vh 2px #fff;
    animation-duration: 14s;
}

.snow-white-2 {
    box-shadow: 
        5vw 45vh 4px #fff, 25vw 20vh 3px #fff, 45vw 65vh 4px #fff, 65vw 10vh 3px #fff, 85vw 55vh 4px #fff,
        50vw 85vh 4px #fff, 90vw 5vh 3px #fff, 15vw 70vh 4px #fff, 70vw 30vh 3px #fff;
    animation-duration: 20s;
    animation-delay: -4s;
}

/* --- [แก้ไขแล้ว] กลุ่มหิมะสีแดงอมชมพูสว่าง (Glowing Pink-Red) --- */
.snow-pink-1 {
    /* ใช้สี Hex #ff0055 และ #ff0066 สว่างๆ ชัดๆ */
    box-shadow: 
        8vw 15vh 6px #ff0055, 28vw 50vh 5px #ff0066, 48vw 25vh 6px #ff0055, 
        68vw 70vh 5px #ff0066, 88vw 35vh 6px #ff0055, 33vw 80vh 5px #ff0066,
        12vw 35vh 4px #ff0055, 72vw 55vh 5px #ff0066;
    animation-duration: 16s;
    animation-delay: -2s;
}

.snow-pink-2 {
    box-shadow: 
        18vw 40vh 5px #ff00aa, 38vw 10vh 6px #ff0055, 58vw 60vh 5px #ff00aa, 
        78vw 20vh 6px #ff0055, 98vw 80vh 5px #ff00aa, 52vw 45vh 6px #ff0055,
        23vw 85vh 4px #ff0055, 63vw 15vh 5px #ff00aa;
    animation-duration: 22s;
    animation-delay: -6s;
}

/* --- คีย์เฟรมควบคุมการเคลื่อนไหว --- */
@keyframes snowFall {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 1; /* เริ่มต้นให้ค่อยๆ ปรากฏขึ้นมาเบาๆ */
    }
    33% {
        transform: translateY(33vh) translateX(20px); /* ส่ายไปทางขวา */
    }
    66% {
        transform: translateY(66vh) translateX(-20px); /* ส่ายไปทางซ้าย */
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(105vh) translateX(0); /* ตกทะลุขอบล่างหน้าจอ */
        opacity: 0; /* ค่อยๆ จางหายไปตอนถึงขอบล่าง */
    }
}
	/* --- ส่วนควบคุมโครงสร้างและขนาดโลโก้ --- */
.logo-wrapper {
    position: relative;
    display: inline-block;
    /* 
       💡 ปรับขนาดโลโก้ตรงนี้ได้เลย! 
       ใช้ max-width เพื่อให้รองรับหน้าจอมือถือ (Responsive)
    */
    width: 100%;
    max-width: 400px; 
    margin: 0 auto;
    z-index: 1;
}

.hero-logo {
    width: 100%;
    height: auto;
    object-fit: contain;
    animation: floatAnimation 4s ease-in-out infinite;
    /* แสงเงาเริ่มต้นสีแดงอมชมพูบางๆ */
    filter: drop-shadow(0 0 15px rgba(255, 0, 85, 0.35));
    transition: all 0.5s ease;
}

/* อัปเดตเอฟเฟคตอน Hover ให้สว่างวาบเป็นสีแดงชมพูสะใจ */
.logo-wrapper:hover .hero-logo {
    transform: scale(1.05);
    filter: drop-shadow(0 0 25px rgba(255, 0, 85, 0.7)) drop-shadow(0 0 50px rgba(255, 0, 150, 0.4));
}

/* --- [แก้ไข] เอฟเฟคแสงพื้นหลังสีแดงอมชมพูสว่าง (Background Glow Layout) --- */
.logo-glow-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    /* 
       ✨ แสงไล่เฉดสีใหม่: 
       - ตรงกลาง: สีแดงอมชมพูสว่างเข้มข้น (rgba(255, 0, 85, 0.45))
       - วงนอก: สีชมพูฟุ้งละมุน (rgba(255, 0, 150, 0.15))
    */
    background: radial-gradient(circle, rgba(255, 0, 85, 0.45) 0%, rgba(255, 0, 150, 0.15) 45%, rgba(0, 0, 0, 0) 70%);
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
    animation: pulseGlow 3s ease-in-out infinite alternate;
    filter: blur(15px); /* เพิ่มความเบลอเล็กน้อยเพื่อให้แสงดูละมุนตาขึ้น */
}


/* --- คีย์เฟรมสำหรับสร้าง Animation --- */

/* 1. แอนิเมชันโลโก้ลอยขึ้นลงนุ่มๆ */
@keyframes floatAnimation {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-12px); /* ปรับระยะการลอยขึ้นตรงนี้ */
    }
    100% {
        transform: translateY(0px);
    }
}

/* 2. แอนิเมชันแสงหลังวาบๆ เบาๆ เพิ่มความมีชีวิตชีวา */
@keyframes pulseGlow {
    0% {
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 0.6;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 1;
    }
}
	/* --- Cute & Soft Glassmorphic Navbar --- */
.navbar {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding: 20px 0;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* อนิเมชั่นเยลลี่ดึ๋ง */
}

/* เมื่อเลื่อนหน้าจอลงมา: เปลี่ยนเป็นกล่องเมฆนุ่มลอยตัว */
.navbar.scrolled {
    padding: 10px 0 !important;
    background: rgba(255, 245, 247, 0.85) !important; /* ขาวนวลอมชมพูหวานๆ */
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border-bottom: 2px solid rgba(227, 11, 77, 0.2);
    box-shadow: 0 10px 25px rgba(227, 11, 77, 0.08);
}

/* โลโก้แบรนด์ ขยับดุ๊กดิ๊ก */
.navbar-brand {
    font-weight: 800;
    font-size: 1.45rem;
    color: #fff !important;
    letter-spacing: 0.5px;
    transition: all 0.4s ease;
}
.navbar.scrolled .navbar-brand {
    color: #e30b4d !important;
}
.navbar-brand i {
    color: #e30b4d;
    display: inline-block;
    animation: cuteHeartbeat 2.5s infinite ease-in-out;
}
@keyframes cuteHeartbeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15) rotate(5deg); }
}

/* เมนูลิ้งก์ทั่วไป (ละมุนนุ่มฟู) */
.nav-link {
    font-weight: 600;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9) !important;
    padding: 8px 18px !important;
    border-radius: 30px;
    position: relative;
    z-index: 1;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.15);
}
.navbar.scrolled .nav-link {
    color: #555 !important;
}

/* เอฟเฟกต์หมอนรองแคปซูลเวลาร่อนเมาส์ผ่าน */
.nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(227, 11, 77, 0.12);
    border-radius: 30px;
    z-index: -1;
    transform: scale(0.6);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.nav-link:hover::before, .nav-link.active::before {
    transform: scale(1);
    opacity: 1;
}
.nav-link:hover {
    color: #e30b4d !important;
    transform: translateY(-2px);
}
.navbar.scrolled .nav-link.active,
.navbar.scrolled .nav-link:hover {
    color: #e30b4d !important;
    background: rgba(227, 11, 77, 0.08);
}

/* หัวใจดวงน้อยลอยเหนือนามเมนู Active */
.nav-link.active::after {
    content: '❤';
    font-size: 0.7rem;
    position: absolute;
    top: -2px;
    right: 6px;
    color: #e30b4d;
    animation: floatingCute 1.5s infinite ease-in-out;
}
@keyframes floatingCute {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.nav-btn-dark {
    background: #ff758c !important; /* สีเข้มพรีเมียมดาร์กเบอร์รี */
    color: #ffffff !important;      /* ตัวหนังสือสีขาวชัดเจนตอนปกติ */
    font-weight: 600;
    font-size: 1rem;
    padding: 8px 24px !important;
    border-radius: 30px;
    border: 2px solid rgba(227, 11, 77, 0.5); /* ขอบสีชมพูแดงจางๆ */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.45, 1.4); /* เด้งดึ๋งนุ่มนวล */
}
/* รักษาสีของไอคอนด้านในให้เป็นสีขาวตอนปกติ */
.nav-btn-dark i {
    color: #ffffff !important;
    transition: color 0.4s ease;
}

/* เอฟเฟกต์แสงสะท้อนวิ่งผ่านปุ่ม */
.nav-btn-dark::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-20deg);
    z-index: 2;
}

.nav-btn-dark:hover {
    transform: translateY(-3px) scale(1.05); /* ขยายตัวดึ๋งน่ารัก */
    background: #ffffff !important;          /* เปลี่ยนพื้นหลังเป็นสีขาวนวล */
    border-color: #e30b4d !important;        /* ขอบเปลี่ยนเป็นสีชมพูแดงชัดเจน */
    color: #e30b4d !important;               /* ดึงสีตัวหนังสือเป็นสีชมพูแดงเข้ม เด่นชัด 100% */
    box-shadow: 0 8px 20px rgba(227, 11, 77, 0.25);
}
/* เปลี่ยนสีไอคอนด้านในให้เป็นสีชมพูแดงพร้อมกันตอน Hover */
.nav-btn-dark:hover i {
    color: #e30b4d !important;
}

.nav-btn-dark:hover::before {
    animation: lightShine 0.8s ease-in-out;
}

@keyframes lightShine {
    100% { left: 150%; }
}

/* ปุ่มแฮมเบอร์เกอร์บนมือถือ */
.custom-cute-toggler {
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 12px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.1) !important;
    transition: all 0.3s ease;
}
.navbar.scrolled .custom-cute-toggler {
    border-color: rgba(227, 11, 77, 0.2) !important;
    background: rgba(227, 11, 77, 0.05) !important;
}
.custom-cute-toggler .navbar-toggler-icon {
    filter: invert(1);
    transition: filter 0.3s ease;
}
.navbar.scrolled .custom-cute-toggler .navbar-toggler-icon {
    filter: invert(0);
}

/* การจัดระเบียบบนมือถือ */
@media (max-width: 991.98px) {
    .navbar-collapse {
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 2px solid rgba(227, 11, 77, 0.15);
        border-radius: 20px;
        padding: 20px;
        margin-top: 15px;
        box-shadow: 0 15px 30px rgba(227, 11, 77, 0.1);
    }
    .nav-link { 
        color: #444 !important; 
        padding: 10px 20px !important; 
        text-align: center;
    }
    .nav-link.active::after { display: none; }
    
    /* ปรับแต่งปุ่มเข้มบนมือถือให้ขยายเต็มและอยู่ล่างสุดกึ่งกลาง */
    .nav-btn-dark {
        text-align: center;
        margin-top: 10px;
        display: block;
        width: 100%;
    }
}
		/* 1. ย้ายรูปพื้นหลังมาไว้ที่ body เพื่อให้ทะลุเห็นทั้งเว็บ (หรือจะไว้ที่ส่วน container หลักก็ได้) */
body {
    font-family: 'Prompt', sans-serif;
    /* เปลี่ยนมารองรับด้วยสีโทนเข้ม เพื่อให้มองเห็นทะลุจากส่วน main ได้ปกติ */
    background: #0d0d11; 
    color: #333;
    overflow-x: hidden;
}

/* ลบพื้นหลังของฮีโร่ออก เพื่อให้โชว์พื้นหลังเดียวกับ body ยาวลงมา */
.hero-section {
    height: 100vh;
    background: transparent; 
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* 2. ออกแบบคลาสสำหรับส่วน Main ให้โปร่งแสง (ถ้าต้องการกรอบใหญ่ครอบคลุมทั้งหมด) */
.main-glass-box {
    background: rgba(255, 255, 255, 0.4); /* พื้นหลังโปร่งแสง 40% */
    backdrop-filter: blur(12px); /* เอฟเฟกต์กระจกเบลอ */
    -webkit-backdrop-filter: blur(12px);
    border: 2px solid #e30b4d; /* เส้นขอบหนา 2px สีแดงอมชมพูทึบ ไม่โปร่งแสง */
    border-radius: 24px;
    padding: 50px 30px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* 3. ปรับแต่ง Feature Card ด้านในให้โปร่งแสงเข้ากันอย่างลงตัว */
.feature-card {
    background: rgba(255, 255, 255, 0.65); /* พื้นหลังการ์ดโปร่งแสง 65% */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    /* เส้นขอบการ์ดแบบไม่โปร่งแสง ใช้สีขาวนวลตัดขอบเนียนๆ หรือเปลี่ยนเป็น #e30b4d ได้ครับ */
    border: 2px solid #ffffff; 
    border-radius: 16px;
    padding: 30px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
}

/* ปรับสีตัวอักษรคำอธิบายให้เข้มขึ้นเล็กน้อยเพื่อให้มองเห็นได้ชัดเจนบนพื้นหลังโปร่งแสง */
.text-custom-dark {
    color: #4a4a50 !important;
    font-weight: 400;
}

.feature-card:hover {
    transform: translateY(-8px);
    border-color: #e30b4d; /* เมื่อ Hover ให้ขอบเปลี่ยนเป็นสีแดงอมชมพูทึบ */
    background: rgba(255, 255, 255, 0.85); /* ให้สว่างขึ้นเล็กน้อยเวลาเมาส์ชี้ */
    box-shadow: 0 15px 30px rgba(227, 11, 77, 0.2);
}
        :root {
            --primary-color: #e30b4d;
            --primary-rgb: 227, 11, 77;
            --dark-blend: #111116;
            --light-bg: #f8f9fa;
        }

        body {
            font-family: 'Prompt', sans-serif;
            background-color: var(--light-bg);
            color: #333;
            overflow-x: hidden;
        }

        /* --- Glassmorphic Navbar --- */
        .navbar {
            background: rgba(255, 255, 255, 0.8) !important;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(227, 11, 77, 0.1);
            transition: all 0.3s ease;
        }
        
        .navbar-brand {
            font-weight: 800;
            color: var(--primary-color) !important;
            letter-spacing: 1px;
        }

        .nav-link {
            font-weight: 600;
            color: #444 !important;
            position: relative;
            transition: color 0.3s ease;
        }

        .nav-link:hover, .nav-link.active {
            color: var(--primary-color) !important;
        }

        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 0;
            left: 0;
            background-color: var(--primary-color);
            transition: width 0.3s ease;
        }

        .nav-link:hover::after {
            width: 100%;
        }

/* --- Fullscreen Header with Parallax & White Glass Overlay --- */
.hero-section {
    /* ======================================================== */
    /* [โซนควบคุมความละเอียด] ปรับแต่งความใส-เบลอของกระจกได้ตรงนี้เลยครับ */
    --glass-blur: 1px;         /* ระดับความเบลอ (ตัวเลขมาก ยิ่งเบลอนัวฟุ้ง) */
    --glass-opacity-start: 0.10; /* ความขาวใสฝั่งซ้าย (0.0 ใสสนิท - 1.0 ขาวทึบ) */
    --glass-opacity-end: 0.10;   /* ความขาวใสฝั่งขวา (0.0 ใสสนิท - 1.0 ขาวทึบ) */
    /* ======================================================== */

    height: 100vh;
    
    /* เปลี่ยนจากโทนสีดำเดิม ให้กลายเป็นสีขาวบริสุทธิ์ (rgba 255, 255, 255) ไล่เฉดสีจางๆ */
    background: linear-gradient(135deg, 
                    rgba(255, 255, 255, var(--glass-opacity-start)) 0%, 
                    rgba(255, 255, 255, var(--glass-opacity-end)) 100%), 
                url('') no-repeat center center;
                
    background-size: cover;
    background-attachment: fixed; /* คงเอฟเฟกต์ Parallax ไว้เหมือนเดิม */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    
    /* เปิดใช้งานเอฟเฟกต์กระจกฝ้าตามค่าความละเอียดด้านบน */
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur)); /* รองรับสำหรับ Safari */
    
    /* ลูกเล่นเสริม: เพิ่มเส้นขอบตัดแสงสีขาวจางๆ รอบขอบ เพื่อให้ดูเหมือนแผ่นกระจกจริง */
    border: 1px solid rgba(255, 255, 255, 0.2);
}

        .hero-content {
            text-shadow: 0 4px 15px rgba(0,0,0,0.5);
        }

        .hero-title {
            font-size: 4.5rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 2px;
            background: linear-gradient(45deg, #fff 40%, #ff6b9d);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* --- Modern Glow Button with Shine Effect --- */
        .btn-glow {
            position: relative;
            padding: 15px 40px;
            font-size: 1.25rem;
            font-weight: 600;
            color: #fff;
            background-color: var(--primary-color);
            border: none;
            border-radius: 50px;
            text-transform: uppercase;
            letter-spacing: 1px;
            overflow: hidden;
            box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.4);
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            animation: pulseGlow 2s infinite;
        }

        @keyframes pulseGlow {
            0% { box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.4); }
            50% { box-shadow: 0 0 30px rgba(var(--primary-rgb), 0.8); }
            100% { box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.4); }
        }

        /* Effect: Shine Ray walking through button on hover */
        .btn-glow::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 50%;
            height: 100%;
            background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
            transform: skewX(-25deg);
        }

        .btn-glow:hover {
            transform: translateY(-5px);
            background-color: #ff1c5c;
            box-shadow: 0 10px 35px rgba(var(--primary-rgb), 0.6);
            color: #fff;
        }

        .btn-glow:hover::before {
            animation: shineEffect 0.8s forwards;
        }

        @keyframes shineEffect {
            100% { left: 150%; }
        }

        /* --- Modern Content Section --- */
        .section-title {
            font-weight: 800;
            position: relative;
            padding-bottom: 15px;
            margin-bottom: 40px;
            text-transform: uppercase;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background-color: var(--primary-color);
            border-radius: 2px;
        }

        /* --- Interactive Feature Cards --- */
        .feature-card {
            background: #ffffff;
            border: 1px solid rgba(0, 0, 0, 0.05);
            border-radius: 16px;
            padding: 30px;
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            position: relative;
        }

        .feature-card::after {
            content: "";
            border-radius: 16px;
            position: absolute;
            z-index: -1;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            box-shadow: 0 15px 35px rgba(var(--primary-rgb), 0.25);
            opacity: 0;
            transition: opacity 0.4s ease-in-out;
        }

        .feature-card:hover {
            transform: translateY(-8px);
            border-color: rgba(var(--primary-rgb), 0.3);
        }

        .feature-card:hover::after {
            opacity: 1;
        }

        .feature-icon {
            width: 70px;
            height: 70px;
            background: rgba(var(--primary-rgb), 0.1);
            color: var(--primary-color);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.75rem;
            margin-bottom: 20px;
            transition: all 0.3s ease;
        }

        .feature-card:hover .feature-icon {
            background: var(--primary-color);
            color: #fff;
            transform: rotateY(180deg);
        }

        /* --- Footer --- */
        footer {
            background-color: #111114;
            color: #aaa;
            border-top: 3px solid var(--primary-color);
        }

.modal {
    display: none;
}

.modal:target {
    display: block;
    position: fixed;
    z-index: 99999;
    inset: 0;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.45);
    padding: 40px 15px;
}

.modal:target .modal-dialog {
    margin: 30px auto;
}

.modal:target .modal-content {
    display: block;
}

.btn-close {
    text-decoration: none;
    font-size: 26px;
    line-height: 1;
    color: #333;
}