@charset "utf-8";
/* CSS Document */

<style>
    body{
        margin:0;
        padding:40px 15px;
        /*background:#f4f6f9;*/
        font-family:'Prompt',sans-serif;
        /*color:#0b2341;*/
    }

    .award-section{
        max-width:1100px;
        margin:auto;
    }

    .award-title{
        text-align:center;
        font-size:48px;
        font-weight:700;
        color:#08264a;
        margin-bottom:50px;
        position:relative;
    }

    .award-title::after{ 
		margin-top:50px;
        display:block;
        color:#d8a100;
        font-size:28px;
        margin-top:10px;
    }

    .award-card{
        background:#fff;
        border-radius:24px;
        overflow:hidden;
        display:flex;
        align-items:center;
        justify-content:space-between;
        margin-bottom:25px;
        box-shadow:0 6px 20px rgba(0,0,0,0.05);
    }

    .award-left{
        display:flex;
        align-items:center;
        flex:1;
    }

   .award-icon{
    width:180px;
    min-height:160px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    color:#fff;
    font-size:60px;
    font-weight:bold;

    /* 👇 เพิ่มบรรทัดนี้ */
    border-radius:24px 0 0 24px; 
	border:1px;   
}

    .gold1{
        background:linear-gradient(135deg,#f5c542,#d89d00);
    }

    .silver1{
        background:linear-gradient(135deg,#cfd5dd,#9aa3af);
    }

    .bronze1{
        background:linear-gradient(135deg,#d89a6a,#b46d3a);
    }

    .blue1{
        background:linear-gradient(135deg,#234d88,#173b68);
    }

    .award-content{
        padding:25px 35px;
    }

    .award-content h2{
        margin:0 0 12px;
        font-size:40px;
        color:#08264a;
    }

    .award-content p{
        margin:0;
        font-size:24px;
        color:#5f6773;
        line-height:1.7;
    }

    .award-prize{
        min-width:240px;
        text-align:center;
        padding:20px;
    }

    .award-prize .money{
        font-size:60px;
        font-weight:700;
        color:#d89d00;
    }

    .award-prize span{
        font-size:28px;
        font-weight:500;
        color:#08264a;
    }

    .silver-text{
        color:#123f80 !important;
    }

    .bronze-text{
        color:#0b7a44 !important;
    }

    .blue-text{
        color:#173b68 !important;
    }

    .note{
        text-align:center;
        margin-top:25px;
        color:#6b7280;
        font-size:18px;
    }

    @media(max-width:768px){

        .award-title{
            font-size:32px;
        }

        .award-card{
            flex-direction:column;
        }

        .award-left{
            flex-direction:column;
            width:100%;
        }

        .award-icon{
            width:100%;
            min-height:120px;
            font-size:45px;
        }

        .award-content{
            text-align:center;
        }

        .award-content h2{
            font-size:28px;
        }

        .award-content p{
            font-size:18px;
        }

        .award-prize{
            padding-bottom:30px;
        }

        .award-prize .money{
            font-size:42px;
        }
    }


/*เกณฑ์*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/*body{
    background:#f4f6f9;
    font-family:'Prompt',sans-serif;
    padding:40px 20px;
    color:#1f2a44;
}*/

/* =========================
   SECTION
========================= */

.award-section{
    max-width:1200px;
    margin:auto;
}

.award-box{
    background:#fff;
    border-radius:28px;
    overflow:hidden;
    display:flex;
    align-items:center;
    box-shadow:0 10px 30px rgba(0,0,0,0.05);
}

/* =========================
   LEFT LOGO
========================= */

.left-box{
    width:45%;
   /* background:linear-gradient(135deg,#ffffff,#f7f9fc);*/
	/*background:#fffdfa;*/
    display:flex;
    align-items:center;
    justify-content:center;
    padding:10px;
    border-right:1px solid #edf1f5;
}

.left-box img{
    width:100%;
    max-width:400px;
}

/* =========================
   RIGHT CONTENT
========================= */

.right-box{
    width:100%;
    padding:10px;
    background:#fffdfa;
}

.title{
    font-size:44px;
    font-weight:700;
    color:#08264a;
    line-height:1.25;
    margin-bottom:35px;
}

.title span{
    color:#d89d00;
}

/* =========================
   TABLE
========================= */

.award-table{
    width:100%;
    border-collapse:collapse;
    overflow:hidden;
    border-radius:18px;
}

.award-table thead{
    background:#0b2a4a;
    color:#fff;
}

.award-table thead th{
    padding:18px;
    font-size:18px;
    font-weight:600;
    text-align:center;
}

.award-table tbody tr{
    border-bottom:1px solid #edf1f5;
    transition:0.25s;
}

.award-table tbody tr:hover{
    background:#f8fbff;
}

.award-table tbody td{
    padding:18px;
    font-size:17px;
    color:#4b5563;
    text-align:center;
    line-height:1.7;
}

/* =========================
   BADGES
========================= */

.badge{
    display:inline-block;
    padding:6px 14px;
    border-radius:30px;
    font-size:14px;
    font-weight:600;
}

.diamond{
    background:#eef6ff;
    color:#2563eb;
}

.gold{
    background:#fff7db;
    color:#b8860b;
}

.silver{
    background:#eef2f7;
    color:#64748b;
}

.bronze{
    background:#ffe7d1;
    color:#9a5a1a;
}

.normal{
    background:#f3f4f6;
    color:#6b7280;
}

/* =========================
   NOTE
========================= */

.note{
    margin-top:25px;
    font-size:15px;
    color:#6b7280;
    line-height:1.8;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:992px){

    .award-box{
        flex-direction:column;
    }

    .left-box,
    .right-box{
        width:100%;
    }

    .title{
        font-size:34px;
    }

}

@media(max-width:768px){

    .title{
        font-size:28px;
    }

    .award-table thead{
        display:none;
    }

    .award-table,
    .award-table tbody,
    .award-table tr,
    .award-table td{
        display:block;
        width:100%;
    }

    .award-table tr{
        background:#fff;
        margin-bottom:15px;
        border-radius:16px;
        overflow:hidden;
        box-shadow:0 3px 10px rgba(0,0,0,0.04);
    }

    .award-table td{
        text-align:left;
        padding:14px 18px;
        border-bottom:1px solid #f1f5f9;
    }

}