/* theme.css - ธีม เน้นทอง ดำ แดงไม่เด่น สำหรับ ArcadePlus */

body {
    font-family: 'Noto Sans Thai', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.8;
    color: #cccccc;             /* เนื้อความสีเทาอ่อน สบายตาบนพื้นหลังเข้ม */
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 20px;
    background-color: #121212;  /* พื้นหลังสีดำเน้นโทนเข้ม */
    position: relative;
}

/* ส่วนเบอร์โทรศัพท์ขวาบน */
.phone-container {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: 500;
    color: #d4af37;             /* เบอร์โทรศัพท์สีทอง */
}

.phone-icon {
    width: 16px;
    height: 16px;
    margin-right: 6px;
    fill: #d4af37;              /* ไอคอนสีทอง */
}

/* หัวข้อใหญ่จัดกึ่งกลาง */
.main-title {
    text-align: center;
    font-size: 34px;
    font-weight: 800;
    color: #ffd700;             /* เด่นที่สุดด้วยสีทองสว่าง */
    margin-top: 60px;
    margin-bottom: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 0 0 10px rgba(212, 175, 55, 0.3);
}

.main-subtitle {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #b5942b;             /* ปรับซับไตเติลเป็นสีทองเข้ม/ทองหม่น ไม่แย่งซีน title หลัก */
    margin-bottom: 40px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* หัวข้อหมวดย่อยภายในเนื้อหา */
h2 {
    font-size: 18px;
    font-weight: 600;
    color: #d4af37;             /* [เปลี่ยน] แก้จากแดงเป็นทอง เพื่อคุมโทนพรีเมียม */
    margin-top: 45px;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #333333; /* เส้นคั่นสีเข้มขรึม */
    padding-bottom: 5px;
}

h3 {
    font-size: 15px;
    font-weight: 600;
    color: #b5942b;             /* [เปลี่ยน] หัวข้อย่อยชั้นในใช้สีทองหม่น */
    margin-top: 25px;
    margin-bottom: 10px;
}

/* ปรับแต่งเนื้อหาทั่วไป */
p {
    margin-bottom: 25px;
    text-align: justify;
    font-size: 15px;
    color: #cccccc;             /* เนื้อความสีเทาขาว เพื่อไม่ให้ล้าสายตา */
}

ul, ol {
    margin: 15px 0 25px 20px;
    padding: 0;
    font-size: 15px;
    color: #cccccc;
}

ol {
    background: linear-gradient(135deg, #161616 0%, #111111 100%); /* [เปลี่ยน] ถอดสีแดงออก เป็นไล่เฉดดำ-เทาเข้ม */
    border: 1px solid #3a321d; /* [เปลี่ยน] ขอบทองรมดำ/ทองเข้มบางๆ ไม่ให้สว่างเกินไป */
    padding: 25px 25px 25px 40px !important;
    border-radius: 8px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

li {
    margin-bottom: 10px;
    text-align: justify;
}

.sub-list {
    list-style-type: lower-alpha;
    margin-top: 10px;
    margin-left: 20px;
}

/* กล่องข้อมูลการติดต่อกรณีพิเศษ */
.contact-info {
    background-color: #1a1a1a;       /* ใช้สีพื้นหลังเข้มปกติ */
    padding: 15px 20px;
    border: 1px solid #333333;        /* เปลี่ยนเป็นเส้นขอบสีเทาเข้มบางๆ รอบกล่อง */
    border-radius: 6px;
    margin: 20px 0;
    font-size: 14.5px;
    color: #b5b5b5;                   /* ปรับสีตัวอักษรให้ดรอปลงเล็กน้อย */
}

/* ลิงก์ต่างๆ */
a {
    color: #d4af37;             /* [เปลี่ยน] ลิงก์ปกติให้เป็นสีทอง */
    text-decoration: none;
    border-bottom: 1px dashed #d4af37;
}

a:hover {
    color: #ff3333;             /* [ซ่อนสีแดงไว้ตรงนี้] เมื่อเลื่อนเมาส์มาชี้ ลิงก์จะสะท้อนเป็นสีแดง เพิ่มลูกเล่นเล็กๆ */
    border-bottom: 1px solid #ff3333;
}

/* ฟุตเตอร์ท้ายเว็บ */
.footer {
    margin-top: 60px;
    padding-top: 20px;
    border-top: 1px solid #333333;
    font-style: italic;
    color: #777777;
    font-size: 14px;
}

/* สำหรับหน้าจอโทรศัพท์ */
@media (max-width: 600px) {
    .phone-container {
        position: static;
        margin-bottom: 20px;
        justify-content: flex-end;
    }
    .main-title {
        font-size: 26px;
        margin-top: 20px;
    }
}