#location-select, #category-select {
    min-width: 150px;
    border: 2px solid #e0e0e0;
    background-color: #fff;
    color: #000;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.2em;
    padding-right: 2.5rem;
    font-size: 18px;
    padding: 8px 40px 9px 25px;
    border-radius: 9px;
    transition: all ease-in-out 350ms;
    height: 48px;
}
#location-select:focus, #category-select:focus,
#location-select:hover, #category-select:hover {
    border-color: #009de0;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}
.activity-filters {
    padding: 30px 40px;
    border-radius: 15px;
    background: linear-gradient(90deg, #35297b 0%, #9e1a23 100%);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
}
.box-pw.activity-calendar-widget {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.activity-filters .activity-row {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 20px;
}
.activity-row .filter-row {
     display: flex;
     width: 100%;
     align-items: center;
     gap: 20px;
     justify-content: space-between;
}
 .activity-row .filter-row label {
     color: #fff;
     font-weight: 400;
}
 .filter-group {
     display: flex;
     align-items: center;
     gap: 15px;
}
 .filter-group input[type="text"] {
     font-size: 1rem;
     padding: 0.75rem 1rem;
     border-radius: 8px;
     transition: all 0.3s ease;
     outline: none;
     box-sizing: border-box;
     min-width: 270px;
     border: 2px solid #e0e0e0;
     background-color: #fff;
     color: #333;
     max-width: 100%;
     height: 48px;
}
 .filter-group label {
     font-size: 18px;
}
button#search-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 400;
    font-size: 1rem;
    padding: 1.1rem 1rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    outline: none;
    box-sizing: border-box;
    justify-content: center;
    background-color: #009de0;
    color: #fff;
    border: none;
    cursor: pointer;
    height: 48px;
}
button#reset-btn {
    display: none;
    align-items: center;
    gap: 5px;
    font-weight: 400;
    font-size: 1rem;
    padding: 1.1rem 1rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    outline: none;
    box-sizing: border-box;
    justify-content: center;
    background-color: #F44336;
    color: #fff;
    border: none;
    cursor: pointer;
    height: 48px;
}
button#search-btn svg {
    width: 16px;
    height: 16px;
}
button#search-btn:hover {
    opacity: 0.7;
}
.activity-categories {
    display: none !important;
}
.activity-content {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     gap: 20px;
     width: 100%;
}
 .activity-content .activity-date {
     flex: 0 0 calc(30% - 10px);
}
 .activity-content .at-info {
     flex: 0 0 calc(70% - 10px);
}
 div#activities-container {
     position: relative;
}
 .activities-grid {
     display: flex;
     flex-wrap: wrap;
     gap: 20px;
}
 .activities-grid .activity-card {
     display: flex;
     flex-wrap: wrap;
     gap: 20px;
     box-shadow: rgb(0 0 0 / 9%) 0px 0px 16px 0px;
     background: #fff;
     padding: 25px;
     border-radius: 20px;
     border: 1px solid #f7f7f7;
     flex: 0 0 calc(50% - 10px);
}
 .box-pw.activity-calendar-widget {
     gap: 50px;
}
h3.activity-title {
    color: #009de0;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.4;
    display: -webkit-inline-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 77px;
}
.activity-time, .activity-location, .activity-categories {
    color: #000;
    font-weight: 300;
    font-size: 16px;
}
.activity-time strong, .activity-location strong, .activity-categories strong {
    font-weight: 500;
    padding-right: 5px;
}
.activity-time, .activity-location, .activity-categories {
    display: flex;
    align-items: baseline;
}
.activity-time svg, .activity-location svg, .activity-categories svg {
    height: 17px;
    width: 17px;
    margin-right: 5px;
    margin-bottom: -2px;
    stroke: #009de0;
}
.activity-content .at-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
div#activities-container {
    width: 100%;
}
 .pagination-btn.active {
     background: linear-gradient(90deg, #35297b 0%, #9e1a23 100%);
     border: #fff;
}
#b-top{
    min-height: 100vh;
    height: 100%;
    justify-content: flex-start;
}
.text-date.t-day, .text-date.t-my{
    background: linear-gradient(90deg, #322B80, #C20E1A);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "Roboto", "IBM Plex Sans Thai", sans-serif !important;
    font-weight: 600;
}
.text-date.t-day {
    font-size: 60px;
    text-align: center;
}
.text-date.t-my {
    font-size: 24px;
    text-align: center;
}
div#pagination-container {
    width: 100%;
}
/*ipad (tablet)*/
@media (max-width: 1024px) {
.activity-filters .activity-row {
    flex-direction: column;
}
button#reset-btn {
    display: block;
}
.text-date.t-my {
    font-size: 16px;
}
.text-date.t-day {
    font-size: 50px;
}
}
/*iphone5 (small smartphone)*/
@media (max-width: 767px) {
h3.activity-title {
    font-size: 18px;
}
.activity-filters .activity-row {
     flex-direction: column;
}
 button#reset-btn {
     display: block;
}
 .filter-group input[type="text"] {
     min-width: 100%;
}
 .activity-row .filter-row {
     flex-direction: column;
}
 .filter-group {
     flex-direction: column;
     width: 100%;
     align-items: flex-start;
}
 #location-select, #category-select {
     width: 100%;
}
 .filter-group button {
     width: 100%;
}
 .activity-filters {
     padding: 20px;
}
 .activities-grid .activity-card {
     flex: 0 0 100%;
}
.text-date.t-my {
    font-size: 16px;
}
.text-date.t-day {
    font-size: 60px;
}
.box-pw.activity-calendar-widget {
gap: 20px;
}
.post-filter-form {
padding: 20px;
}
}