/* ===========================
   PSU Phone Directory
=========================== */

body{
    background:#f4f7fb;
}

/* Container */

.psu-phone{

    max-width:1400px;

    margin:40px auto;

    padding:30px;

}

/* ===========================
   Title
=========================== */

.psu-title{

    text-align:center;

    color:#0B3B70;

    font-size:34px;

    font-weight:700;

    margin-bottom:30px;

}

/* ===========================
   Search Card
=========================== */

.psu-search{

    background:#ffffff;

    padding:25px;

    border-radius:18px;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

    margin-bottom:30px;

    display:grid;

    grid-template-columns:2fr 1fr 1fr auto;

    gap:15px;

    align-items:center;

}

/* ===========================
   Input
=========================== */

.psu-input{

    width:100%;

    height:50px;

    padding:0 15px;

    border:1px solid #ddd;

    border-radius:10px;

    font-size:16px;

    transition:.3s;

}

.psu-input:focus{

    border-color:#0B3B70;

    outline:none;

    box-shadow:0 0 10px rgba(11,59,112,.2);

}

/* ===========================
   Select
=========================== */

.psu-select{

    width:100%;

    height:50px;

    border:1px solid #ddd;

    border-radius:10px;

    padding:0 10px;

    font-size:15px;

    background:#fff;

    cursor:pointer;

}

.psu-select:focus{

    border-color:#0B3B70;

    outline:none;

}

/* ===========================
   Button
=========================== */

.psu-btn{

    height:50px;

    padding:0 30px;

    border:none;

    border-radius:10px;

    background:#FFC72C;

    color:#000;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;

    transition:.3s;

}

.psu-btn:hover{

    background:#f5b800;

    transform:translateY(-2px);

}

/* ===========================
   Result Card
=========================== */

.psu-result{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

/* ===========================
   Table
=========================== */

.psu-table{

    width:100%;

    border-collapse:collapse;

}

/* Header */

.psu-table thead{

    background:#0B3B70;

}

.psu-table th{

    color:#fff;

    padding:15px;

    font-size:15px;

    text-align:left;

}

/* Body */

.psu-table td{

    padding:14px;

    border-bottom:1px solid #ececec;

    font-size:14px;

}

/* Hover */

.psu-table tbody tr:hover{

    background:#eef6ff;

}

/* Zebra */

.psu-table tbody tr:nth-child(even){

    background:#fafafa;

}

/* Email */

.psu-table a{

    color:#0B66C3;

    text-decoration:none;

}

.psu-table a:hover{

    text-decoration:underline;

}

/* ===========================
   Responsive
=========================== */

@media(max-width:992px){

.psu-search{

grid-template-columns:1fr;

}

.psu-btn{

width:100%;

}

}

/* มือถือ */

@media(max-width:768px){

.psu-phone{

padding:15px;

}

.psu-title{

font-size:28px;

}

.psu-result{

overflow-x:auto;

}

.psu-table{

min-width:900px;

}

}