/* Root Variables & Modern Reset */
:root {
    /* ปรับสีหลักให้สดใสขึ้น */
    --primary-50: #e6f0ff;
    --primary-100: #b3d1ff;
    --primary-200: #80b3ff;
    --primary-300: #4d94ff;
    --primary-400: #1a75ff;
    --primary-500: #0055cc;  /* ปรับให้เข้มขึ้นเล็กน้อย */
    --primary-600: #004299;
    --primary-700: #003071;
    --primary-800: #002353;
    --primary-900: #001635;
    
    /* ปรับสีพื้นหลังให้อบอุ่นขึ้น */
    --background: #f8f9fc;
    --surface: #ffffff;
    
    /* เพิ่มสีพิเศษสำหรับการตกแต่ง */
    --accent-light: #FFE5E5;
    --accent-main: #FF9494;
    
    /* คงค่าอื่นๆ ไว้เหมือนเดิม */
    --neutral-100: #f5f5f5;
    --neutral-200: #eeeeee;
    --neutral-300: #e0e0e0;
    --neutral-400: #bdbdbd;
    --neutral-500: #9e9e9e;
    --neutral-600: #757575;
    --neutral-700: #616161;
    --neutral-800: #424242;
    --neutral-900: #212121;
}

body {
 font-family: "Trirong", serif;
}

/* ปรับแต่ง Header ให้โดดเด่นขึ้น */
.app-header {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    padding: 1.5rem 0.5rem;
    text-align: center; /* จัดเรียงให้ตรงกลาง */
}

.hero-container {
    position: relative;
    padding: 2rem 0.5rem;
    text-align: center; /* จัดเรียงให้ตรงกลาง */
}

/* เพิ่มลูกเล่นให้กับ hero title */
.hero-title {
    position: relative;
    display: inline-block;
    font-size: clamp(2rem, 6vw, 3.5rem);
    background: linear-gradient(45deg, var(--primary-500), var(--primary-400));
    -webkit-background-clip: text;
    color: transparent;
    margin-bottom: 1rem;
}

.hero-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-400), var(--accent-main));
    border-radius: 3px;
}

.hero-subtitle {
    font-size: clamp(1rem, 2.5vw, 1.4rem);
    color: var(--neutral-600);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ปรับแต่งการ์ด */
.app-card {
    position: relative;
    background: linear-gradient(145deg, #ffffff, #fafbff);
    border-radius: 24px;
    padding: 2rem;
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.05),
        0 1px 3px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.7);
    overflow: hidden;
    margin-bottom: 1.5rem; /* เพิ่มระยะห่างระหว่างการ์ด */
}

.app-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, var(--primary-400), var(--accent-main));
    opacity: 0.7;
}

/* ปรับแต่งหัวข้อส่วน */
.section-title {
    font-size: 1.75rem;
    font-weight: 700;
    background: linear-gradient(45deg, var(--primary-500), var(--primary-400));
    -webkit-background-clip: text;
    color: transparent;
    margin-bottom: 0.5rem;
    text-align: center; /* จัดเรียงให้ตรงกลาง */
}

.section-title::after {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-400), var(--accent-main));
    border-radius: 3px;
    margin: 0.5rem auto 1rem; /* จัดเรียงให้ตรงกลาง */
}

/* ปรับแต่งปุ่ม */
.app-button {
    background: linear-gradient(145deg, #ffffff, #f8f9ff);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 16px;
    padding: 1rem 1.5rem;
    font-weight: 600;
    color: var(--primary-500);
    transition: all 0.3s ease;
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.05),
        0 1px 2px rgba(0, 0, 0, 0.02);
    width: 100%;
    max-width: 400px; /* กำหนดความกว้างสูงสุดของปุ่ม */
    display: flex;
    align-items: center; /* จัดให้เนื้อหาอยู่กึ่งกลางตามแนวตั้ง */
    justify-content: flex-start; /* จัดให้เนื้อหาชิดซ้าย */
    margin: 15px auto; /* จัดปุ่มให้อยู่ตรงกลางและมีระยะห่างด้านบน */
}

.app-button:hover {
    transform: translateY(-2px);
    background: linear-gradient(45deg, var(--primary-500), var(--primary-400));
    border-color: transparent;
    color: white;
    box-shadow: 
        0 8px 20px rgba(0, 85, 204, 0.2),
        0 2px 4px rgba(0, 85, 204, 0.1);
}

.app-button svg {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.75rem;
    transition: transform 0.3s ease;
    flex-shrink: 0; /* ป้องกันไม่ให้ SVG หดตัวเมื่อพื้นที่ไม่พอ */
}

.app-button:hover svg {
    transform: scale(1.1) rotate(-5deg);
}

/* ปรับแต่ง Footer */
.app-footer {
    background: linear-gradient(180deg, var(--neutral-800), var(--neutral-900));
    color: var(--neutral-100);
    padding: 2rem 1rem;
    margin-top: 4rem;
    position: relative;
    overflow: hidden;
    text-align: center; /* จัดเรียงให้ตรงกลาง */
}

.app-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-400), var(--accent-main));
    opacity: 0.7;
}

/* เพิ่ม Animation สำหรับ Loading */
@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ปรับแต่งเนื้อหา */
.content-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--neutral-700);
    margin-bottom: 1rem; /* เพิ่มระยะห่างด้านล่าง */
}

.content-text strong {
    color: var(--primary-500);
    font-weight: 700;
    background: linear-gradient(120deg, transparent 0%, transparent 40%, var(--accent-light) 40%, var(--accent-light) 60%, transparent 60%, transparent 100%);
}

.content-text em {
    font-style: normal;
    color: var(--primary-600);
    font-weight: 500;
    padding: 0 0.2em;
    border-bottom: 2px solid var(--accent-main);
}

/* เพิ่ม Responsive Design */
@media (max-width: 768px) {
    .app-card {
        padding: 1.5rem;
        border-radius: 20px;
    }
    
    .hero-container {
        padding: 1.5rem 0.5rem;
    }
    
    .app-button {
        padding: 0.875rem 1.25rem;
    }
}