/* Generated by tools/build-critical-css.mjs. Edit source CSS files instead. */
@font-face { font-family: Kanit; src: url("../fonts/kanit-300.woff2?v=20261011-performance-1") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: Kanit; src: url("../fonts/kanit-400.woff2?v=20261011-performance-1") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Kanit; src: url("../fonts/kanit-500.woff2?v=20261011-performance-1") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: Kanit; src: url("../fonts/kanit-600.woff2?v=20261011-performance-1") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: Kanit; src: url("../fonts/kanit-700.woff2?v=20261011-performance-1") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face {
font-family: PeakTabienPlate;
src: url("../fonts/kt_smarn.woff2?v=20261011-performance-1") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
size-adjust: 172%;
}
@font-face {
font-family: PeakTabienPlate;
src: url("../fonts/kt_smarn.woff2?v=20261011-performance-1") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
size-adjust: 172%;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Kanit, sans-serif;
line-height: 1.1;
color: #333;
background-color: #f5f5f5;
overflow-x: auto;
}
.container {
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
.top-header {
--header-bg:#172b3d; --header-beam:rgba(255,255,255,.13);
background-color:var(--header-bg);
background-image:var(--header-custom-image,linear-gradient(110deg,transparent 24%,var(--header-beam) 31%,transparent 43%),linear-gradient(70deg,transparent 42%,rgba(255,255,255,.08) 50%,transparent 58%),radial-gradient(circle at 58% -70%,rgba(255,255,255,.34),transparent 52%),linear-gradient(135deg,#0b1724,var(--header-bg)));
background-size:cover; background-position:center;
position: sticky;
top: 0;
padding:10px 0;
color: #fff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 1000;
top: 0;
width: 100%;
max-width: 1400px;
margin: 0 auto;
display: flex;
justify-content: center;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.header-container {
width: 100%;
padding: 0 20px;
display: flex;
align-items: stretch;
gap: 15px;
}
.logo-box {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
padding: 5px;
}
.logo-image {
height: 120px;
width: auto;

transform: scale(1.30);
transform-origin: center center;
}
.logo-login {
cursor: pointer;
border: 0;
color: inherit;
background: transparent;
font: inherit;
border-radius: 12px;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.logo-login:hover,
.logo-login:focus-visible {
background: rgba(255, 255, 255, 0.12);
outline: 2px solid rgba(255, 255, 255, 0.8);
outline-offset: 2px;
}
.logo-login:hover {
transform: translateY(-1px);
}
.content-box {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 5px 0;
}
.title-row {
flex: 1;
display: flex;
align-items: center;
}
.website-name {
font-size: clamp(1.5rem, 5vw, 4.5rem);

transform: scale(1.18);
transform-origin: left center;
font-weight: 800;
color: #f1c40f;
margin: 0;
line-height: 1;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
font-family: Kanit, sans-serif;
}
.contact-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: nowrap;
}
.contact-item {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 50px;
padding: 5px 15px;
white-space: nowrap;
font-size: clamp(0.8rem, 2vw, 1.4rem);
font-weight: 600;
color: #fff;
text-decoration: none;
transition: all 0.3s ease;
height: clamp(35px, 5vw, 55px);
}
.contact-item:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-2px);
}
.contact-icon {
width: clamp(25px, 3.5vw, 40px);
height: clamp(25px, 3.5vw, 40px);
object-fit: cover;
border-radius: 50%;
}
.line-icon {
border: none !important;
background: 0 0 !important;
padding: 0 !important;
box-shadow: none !important;
overflow: hidden;
}
.admin-icon {
border-radius: 50%;
object-fit: cover;
}
.admin-item:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-2px);
}
.racing-car-section {
background: linear-gradient(135deg, #fff, #f8f9fa);
padding: 0 0;
text-align: center;
}
.racing-car-container {
text-align: center;
position: relative;
width: 100%;
max-width: 1400px;
margin: 0 auto;
overflow: hidden;
aspect-ratio: 1024 / 439;
padding: 0 0;
}
.racing-car {
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: 1024 / 439;
object-fit: contain;
border-radius: 0;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
display: block;
}

@media (min-width: 1024px) {
.racing-car-container {
max-width: 1100px;
}
}
.racing-car-source {
display: block;
}
.search-section {
background: linear-gradient(135deg, #f0f2f5, #f0f2f5);
padding: 2px 0;
margin-bottom: 2px;
color: #fff;
}
.search-input-container {
margin-bottom: 5px;
}
.search-input {
width: 100%;
padding: 11.25px 15px;
font-size: 0.825rem;
border: none;
border-radius: 18.75px;
outline: 0;
font-family: Kanit, sans-serif;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.search-input:focus,
.filter-select:focus {
outline: 3px solid #0b6b43;
outline-offset: 2px;
}
.search-filters {
display: flex;
gap: 11.25px;
margin-bottom: 20px;
justify-content: center;
flex-wrap: wrap;
}
.filter-select {
padding: 9px 15px;
border: none;
border-radius: 18.75px;
font-size: 0.75rem;
font-family: Kanit, sans-serif;
background: #fff;
color: #333;
cursor: pointer;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
min-width: 112.5px;
}
.filter-select:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.search-clear-button {
border: 1px solid rgba(255, 255, 255, 0.48);
border-radius: 18.75px;
padding: 9px 15px;
background: linear-gradient(135deg, #1eaa68 0%, #0b7a4c 48%, #075638 100%);
color: #fff;
font: 600 0.85rem Kanit, sans-serif;
cursor: pointer;
box-shadow: 0 8px 18px rgba(11, 93, 59, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.45);
transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}
.search-clear-button:hover,
.search-clear-button:focus-visible {
filter: brightness(1.08);
box-shadow: 0 12px 24px rgba(11, 93, 59, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.48);
}
.search-clear-button:active {
transform: translateY(2px) scale(0.975);
}
.search-clear-button:focus-visible {
outline: 3px solid rgba(241, 196, 15, 0.85);
outline-offset: 3px;
}
.search-buttons {
display: flex;
gap: 11.25px;
justify-content: center;
flex-wrap: wrap;
}
.btn {
padding: 9px 22.5px;
border: none;
border-radius: 18.75px;
font-size: 1.2375rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
font-family: Kanit, sans-serif;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.btn-search {
background: linear-gradient(135deg, #3498db, #2980b9);
color: #fff;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.data-section {
background: #f8f9fa;
padding: 2px 0;
content-visibility: auto;
contain-intrinsic-size: 0 420px;
}
.catalog-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
width: max-content;
max-width: calc(100% - 2rem);
margin: 12px auto 20px;
}
.catalog-pagination-button {
padding: 9px 18px;
border: 1px solid #0b5d3b;
border-radius: 999px;
background: #fff;
color: #0b5d3b;
font-family: Kanit, sans-serif;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
box-shadow: 0 2px 8px rgba(11, 93, 59, 0.12);
}
.catalog-pagination-button:hover:not(:disabled) {
background: #edf6f0;
}
.catalog-pagination-button:focus-visible {
outline: 3px solid #f1c40f;
outline-offset: 3px;
}
.catalog-pagination-button:disabled {
cursor: wait;
opacity: 0.65;
}
.catalog-pagination-status {
min-width: 132px;
color: #52635a;
font-size: 0.95rem;
text-align: center;
}
.catalog-pagination[hidden],
.catalog-pagination-button[hidden] {
display: none !important;
}
.table-header {
text-align: center;
margin-bottom: 5px;
}
.table-header h3 {
font-size: 1.8rem;
color: #2c3e50;
font-weight: 600;
background: linear-gradient(135deg, #f1c40f, #f39c12);
padding: 0;
border-radius: 25px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.data-table {
background: #fff;
border-radius: 0;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
display: grid !important;
gap: 3px !important;
padding: 5px !important;
width: 100%;
border-collapse: collapse;
}
@media (min-width: 1025px) {
.data-table {
grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
}
}
.table-row {
display: contents;
}
.table-row:last-child {
border-bottom: none;
}
.table-cell {
padding: 0;
text-align: center;
border: none;
background: 0 0;
transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: auto;
}
.table-cell.hidden {
display: none;
}
.table-cell:last-child {
border-right: none;
}
.table-cell:hover {
background: linear-gradient(135deg, #fff3cd, #ffeaa7);
transform: scale(1.02);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.license-plate {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background: linear-gradient(145deg, #fff, #f0f0f0);
border: 2px solid #000;
border-radius: 10px;
box-shadow:
0 2px 5px rgba(0, 0, 0, 0.2),
inset 0 1px 2px rgba(255, 255, 255, 0.8);
padding: 10px 5px;
margin: 0;
min-height: 100px;
position: relative;
transform-style: preserve-3d;
transition: all 0.3s ease;
overflow: hidden;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
image-rendering: -webkit-optimize-contrast;
backface-visibility: hidden;
}
a.license-plate {
color: inherit;
text-decoration: none;
cursor: pointer;
}
a.license-plate:focus-visible {
outline: 3px solid #0b6b43;
outline-offset: 3px;
}
.license-text span {
vertical-align: baseline;
}
.license-text {
font-family: PeakTabienPlate, sans-serif;
font-size: 2.6rem;
font-weight: 900;
color: #000;
margin-bottom: 5px;
margin-top: 0;
text-align: center;
line-height: 1.2;
font-stretch: normal;
text-shadow: none;
white-space: nowrap;
display: flex;
justify-content: center;
align-items: center;
gap: 0;
letter-spacing: -1px;
position: relative;
width: 100%;
}
.license-text .thai-consonant {
font-size: 1em;
letter-spacing: -0.02em;
vertical-align: middle;
display: inline-block;
font-weight: 900;
}
.license-text .number {
font-size: 1em;
letter-spacing: -0.02em;
vertical-align: middle;
display: inline-block;
font-weight: 900;
}
.license-price {
font-family: Kanit, sans-serif !important;
font-size: 1.1rem !important;
color: #333;
font-weight: 500;
text-align: center;
letter-spacing: 0;
width: 100%;
margin-top: 2px;
text-shadow: none;
opacity: 0.9;
}
.license-text .thai-vowel-upper {
font-size: 0.8em;
margin-left: -0.35em;
margin-right: -0.15em;
position: relative;
top: -0.85em;
display: inline-block;
width: auto;
pointer-events: none;
vertical-align: middle;
overflow: visible;
line-height: 1;
}
.license-text .thai-tone {
font-size: 0.8em;
margin-left: -0.35em;
margin-right: -0.15em;
position: relative;
top: -1.15em;
display: inline-block;
width: auto;
pointer-events: none;
vertical-align: middle;
overflow: visible;
line-height: 1;
}
.license-text .thai-vowel-lower {
font-size: 0.8em;
margin-left: -0.35em;
margin-right: -0.15em;
position: relative;
top: 0.25em;
display: inline-block;
width: auto;
pointer-events: none;
vertical-align: middle;
overflow: visible;
line-height: 1;
}
.license-plate:hover {
transform: translateY(-2px);
box-shadow:
0 6px 12px rgba(0, 0, 0, 0.4),
inset 0 2px 4px rgba(255, 255, 255, 0.9),
inset 0 -2px 4px rgba(0, 0, 0, 0.15),
0 0 0 1px rgba(0, 0, 0, 0.3);
}
.background-ขาวดำ {
background-image: url("../shared_assets/white_black.webp?v=20261011-performance-1") !important;
background-size: cover !important;
background-position: center !important;
color: #000 !important;
}
.background-ทอง {
background-image: url("../shared_assets/gold.webp") !important;
background-size: cover !important;
background-position: center !important;
color: #000 !important;
border-color: #000 !important;
}
.background-ฟ้า {
background-image: url("../shared_assets/blue.webp") !important;
background-size: cover !important;
background-position: center !important;
color: #000 !important;
}
.background-ฟ้ากราฟฟิค {
background-image: url("../shared_assets/blue.webp") !important;
background-size: 100% 100% !important;
background-position: center !important;
background-repeat: no-repeat !important;
color: #000 !important;
}
.background-เขียว {
background-image: url("../shared_assets/green.webp") !important;
background-size: cover !important;
background-position: center !important;
color: #000 !important;
}
.background-ม่วง {
background-image: url("../shared_assets/purple.webp") !important;
background-size: cover !important;
color: #000 !important;
background-position: center center !important;
border-color: #000 !important;
}
.background-ขาวฟ้า {
background-image: url("../shared_assets/white_blue.webp") !important;
background-size: cover !important;
background-position: center !important;
color: #000 !important;
}
.background-เขียวกราฟฟิค {
background-image: url("../shared_assets/green.webp") !important;
background-size: 100% 100% !important;
background-position: center !important;
background-repeat: no-repeat !important;
color: #000 !important;
}
.background-ขาวเขียว {
background-image: url("../shared_assets/white_green.webp") !important;
background-size: cover !important;
background-position: center !important;
color: #000 !important;
}
.background-ทอง .license-text,
.background-ฟ้า .license-text,
.background-ฟ้ากราฟฟิค .license-text,
.background-ม่วง .license-text,
.background-เขียว .license-text,
.background-เขียวกราฟฟิค .license-text {
text-shadow:
1px 1px 2px rgba(255, 255, 255, 0.8),
-1px -1px 2px rgba(255, 255, 255, 0.8) !important;
}
.license-badge {
position: absolute;
bottom: 4px;
right: 4px;
width: 32px;
height: 32px;
background-color: #125db5;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
z-index: 10;
border: 2px solid #fff;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.data-section,
.search-section {
animation: fadeInUp 0.6s ease-out;
}
@keyframes slideIn {
from {
transform: translateX(-100px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.table-cell {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.license-plate {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.table-cell:focus-within {
outline: 2px solid #007bff;
outline-offset: 2px;
}
.footer-space {
background: linear-gradient(135deg, #102c28 0%, #173f37 55%, #0b5d3b 100%);
color: #fff;
padding: 48px 0 22px;
margin-top: 28px;
}
.footer-content {
display: grid;
grid-template-columns: minmax(220px, .8fr) minmax(0, 1.8fr);
gap: 42px;
align-items: start;
text-align: left;
}
.footer-content h2 {
margin: 0 0 12px;
color: #fff;
font-size: 1.25rem;
line-height: 1.35;
}
.footer-brand p {
max-width: 320px;
margin: 0;
color: rgba(255, 255, 255, .78);
font-size: .95rem;
line-height: 1.75;
}
.footer-link-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px 14px;
}
.footer-link-grid a,
.footer-bottom a {
color: rgba(255, 255, 255, .88);
text-decoration: none;
transition: color .2s ease, transform .2s ease;
}
.footer-link-grid a {
display: block;
padding: 9px 11px;
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 9px;
background: rgba(255, 255, 255, .07);
font-size: .9rem;
line-height: 1.35;
}
.footer-link-grid a:hover,
.footer-link-grid a:focus-visible {
color: #fff;
background: rgba(255, 255, 255, .15);
border-color: rgba(255, 255, 255, .42);
transform: translateY(-1px);
}
.footer-link-grid a:focus-visible,
.footer-bottom a:focus-visible {
outline: 3px solid #f0c75e;
outline-offset: 3px;
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
gap: 18px;
margin-top: 34px;
padding-top: 18px;
border-top: 1px solid rgba(255, 255, 255, .16);
}
.footer-bottom p,
.footer-bottom a {
margin: 0;
font-size: .9rem;
}
.footer-bottom p {
color: rgba(255, 255, 255, .62);
}
.license-plate.van,
.license-plate.van .license-text {
color: #1565c0;
border-color: #1565c0;
}
.license-plate.pickup,
.license-plate.pickup .license-text {
color: green;
border-color: green;
}
.btn-upload {
background: linear-gradient(135deg, #1877f2, #1565c0);
color: #fff;
border: none;
padding: 9px 18px;
border-radius: 18.75px;
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(24, 119, 242, 0.3);
margin-left: 10px;
}
.btn-upload:hover {
background: linear-gradient(135deg, #1565c0, #0d47a1);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(24, 119, 242, 0.4);
}
.upload-modal {
display: none;
position: fixed;
z-index: 10000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(5px);
}
.upload-modal.show {
display: flex;
align-items: center;
justify-content: center;
}
.upload-modal-content {
background: #fff;
border-radius: 0;
width: 95%;
height: 95%;
max-width: 1400px;
max-height: 900px;
position: relative;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.upload-modal-header {
background: linear-gradient(135deg, #2c3e50, #34495e);
color: #fff;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.upload-modal-header h2 {
margin: 0;
font-size: 1.5rem;
}
.upload-modal-close {
background: 0 0;
border: none;
color: #fff;
font-size: 2rem;
cursor: pointer;
padding: 5px 10px;
border-radius: 50%;
transition: background-color 0.3s ease;
}
.upload-modal-close:hover {
background-color: rgba(255, 255, 255, 0.2);
}
.upload-modal-body {
height: calc(100% - 80px);
overflow: hidden;
}
.dynamic-plate {
animation: fadeIn 0.3s ease-in;
}
.dynamic-plate .license-plate.default-border {
border: 1px solid #000 !important;
background-color: #fff;
}
.dynamic-plate .license-plate.default-border .license-text {
color: #000;
font-weight: 900;
letter-spacing: 0.75px;
font-stretch: expanded;
text-shadow: 0.5px 0.5px 0 rgba(0, 0, 0, 0.3);
}
.dynamic-plate .license-plate.default-border .license-price {
color: #000;
font-weight: 400;
letter-spacing: 0.75px;
font-stretch: expanded;
text-shadow: 0.5px 0.5px 1px rgba(255, 255, 255, 0.8);
}
.dynamic-plate .license-plate.van-border {
border: 1px solid #1565c0 !important;
background-color: #fff;
}
.dynamic-plate .license-plate.van-border .license-text {
color: #1565c0;
font-weight: 900;
letter-spacing: 0.75px;
font-stretch: expanded;
text-shadow: 0.5px 0.5px 0 rgba(21, 101, 192, 0.3);
}
.dynamic-plate .license-plate.van-border .license-price {
color: #000;
font-weight: 400;
letter-spacing: 0.75px;
font-stretch: expanded;
text-shadow: 0.5px 0.5px 1px rgba(255, 255, 255, 0.8);
}
.dynamic-plate .license-plate.pickup-border {
border: 1px solid green !important;
background-color: #fff;
}
.license-plate {
position: relative;
}
.license-sum-badge {
position: absolute;
bottom: 5px;
right: 5px;
background: rgba(0, 0, 0, 0.6);
color: #fff;
border-radius: 50%;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
z-index: 2;
}
.background-ทอง .license-sum-badge,
.background-ฟ้า .license-sum-badge,
.background-ฟ้ากราฟฟิค .license-sum-badge,
.background-ม่วง .license-sum-badge,
.background-เขียว .license-sum-badge,
.background-เขียวกราฟฟิค .license-sum-badge {
background: rgba(255, 255, 255, 0.8);
color: #333;
}
.dynamic-plate .license-plate.pickup-border .license-text {
color: #2e7d32;
font-weight: 900;
letter-spacing: 0.75px;
font-stretch: expanded;
text-shadow: 0.5px 0.5px 0 rgba(46, 125, 50, 0.3);
}
.dynamic-plate .license-plate.pickup-border .license-price {
color: #000;
font-weight: 400;
letter-spacing: 0.75px;
font-stretch: expanded;
text-shadow: 0.5px 0.5px 1px rgba(255, 255, 255, 0.8);
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.table-cell.price-hidden {
display: none !important;
}
.table-cell.sum-hidden {
display: none !important;
}
.license-plate-display.ขาวดำ,
.license-plate.background-ขาวดำ {
background-image: url("../shared_assets/white_black.webp");
background-size: cover;
background-position: center;
}
.license-plate-display.ทอง,
.license-plate.background-ทอง {
background-image: url("../shared_assets/gold.webp");
background-size: cover;
background-position: center;
}
.license-plate-display.ฟ้า,
.license-plate.background-ฟ้า {
background-image: url("../shared_assets/blue.webp");
background-size: cover;
background-position: center;
}
.license-plate-display.ฟ้ากราฟฟิค,
.license-plate.background-ฟ้ากราฟฟิค {
background-image: url("../shared_assets/blue.webp");
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
.license-plate-display.เขียว,
.license-plate.background-เขียว {
background-image: url("../shared_assets/green.webp");
background-size: cover;
background-position: center;
}
.license-plate-display.ม่วง,
.license-plate.background-ม่วง {
background-image: url("../shared_assets/purple.webp");
background-size: cover;
background-position: center;
}
.sum-circle {
position: absolute;
bottom: -8px;
right: -8px;
width: 24px;
height: 24px;
background-color: #125db5;
border: 2px solid #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
z-index: 10;
}
.sum-circle.hidden {
display: none;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.main-logo {
font-size: 3.15rem !important;
}
.logo-subtitle {
font-size: 1.125rem !important;
}
.contact-label {
font-size: 1.23rem !important;
}
.contact-details-single-line .contact-label {
font-size: 1.05rem !important;
}
.contact-item {
font-size: 1.065rem !important;
}
.search-input {
font-size: 1.2375rem !important;
}
.filter-select {
font-size: 1.125rem !important;
}
.table-header h3 {
font-size: 1.8rem !important;
}
.license-text {
font-family: PeakTabienPlate, sans-serif !important;
font-size: 2.2rem !important;
font-weight: 900 !important;
white-space: nowrap !important;
letter-spacing: -0.5px !important;
text-shadow:
1px 1px 0 #fff,
2px 2px 2px rgba(0, 0, 0, 0.4) !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.license-price {
font-family: Kanit, sans-serif !important;
font-size: 1.1rem !important;
font-weight: 500 !important;
color: #333 !important;
opacity: 0.9 !important;
}
.contact-info,
.header-content,
.search-buttons,
.search-filters {
flex-wrap: nowrap !important;
}
@supports (-webkit-touch-callout: none) {
body {
-webkit-text-size-adjust: 100% !important;
}
}
.line-icon {
filter: none !important;
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: #000;
background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 400px;
text-align: center;
position: relative;
}
.close {
color: #aaa;
position: absolute;
top: 10px;
right: 10px;
font-size: 28px;
font-weight: 700;
}
.close:focus,
.close:hover {
color: #000;
text-decoration: none;
cursor: pointer;
}
.qr-code-image {
max-width: 100%;
height: auto;
}
.facebook-posts-section {
background: #f0f2f5;
padding: 20px 0;
}
.facebook-posts-section.facebook-disabled,
#facebookPosts[hidden] {
display: none !important;
}
.facebook-container {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
justify-content: center;
align-items: stretch;
gap: 20px;
margin-top: 20px;
}
.fb-post-wrapper {
background: #fff;
padding: 10px;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 100%;
min-width: 0;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
}
.fb-title {
margin-bottom: 10px;
color: #0b4f8a;
font-size: 1.2rem;
text-align: center;
}
.fb-link-only {
display: none;
color: #0b4f8a;
font-family: 'Kanit', sans-serif;
font-size: 1.05rem;
font-weight: 600;
text-decoration: none;
padding: 12px 18px 16px;
}
.fb-link-only:hover,
.fb-link-only:focus-visible {
text-decoration: underline;
}
.facebook-links-mode .fb-page {
display: none !important;
}
.facebook-links-mode .fb-link-only {
display: inline-block;
}
@media (max-width: 768px) {
.facebook-container {
grid-template-columns: repeat(2, minmax(0, min(201px, calc((100% - 8px) / 2))));
justify-content: center;
gap: 8px;
margin-top: 12px;
}
.fb-post-wrapper {
min-width: 0;
padding: 8px 6px;
justify-content: center;
min-height: 104px;
}
.fb-title {
margin: 0 0 6px;
color: #0b4f8a;
font-size: clamp(.78rem, 3.4vw, .95rem);
line-height: 1.25;
overflow-wrap: anywhere;
}
.fb-post-wrapper .fb-page,
.fb-post-wrapper .fb-page iframe,
.fb-post-wrapper .fb-page span {
width: 100% !important;
max-width: 201px !important;
}
.slideshow-container {
max-width: 100%;
border-radius: 10px;
margin: 15px auto;
}
.slide {
flex: 0 0 50%;
}
.next,
.prev {
padding: 12px;
font-size: 16px;
margin-top: -18px;
}
}
@media (max-width: 480px) {
.facebook-container {
gap: 10px;
grid-template-columns: repeat(2, minmax(0, min(201px, calc((100% - 10px) / 2))));
}
.fb-title {
font-size: 1rem;
}
.slideshow-container {
max-width: 100%;
}
.slide {
flex: 0 0 100%;
}
.next,
.prev {
padding: 10px;
font-size: 14px;
margin-top: -16px;
}
}
.slideshow-section {
background: linear-gradient(135deg, #f8f9fa, #f0f2f5);
padding: 30px 0;
margin: 20px 0;
}
.slideshow-container {
position: relative;
max-width: 100%;
margin: 20px auto;
background: #fff;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.slides-wrapper {
display: flex;
transition: transform 0.5s ease-in-out;
width: 100%;
background: #f5f5f5;
will-change: transform;
}
.slide {
flex: 0 0 33.333%;
padding: 10px;
box-sizing: border-box;
}
.slide img {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
display: block;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.fade {
animation: fade 1s ease-in-out;
}
@keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.next,
.prev {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
font-weight: 700;
font-size: 18px;
transition: 0.3s ease;
border-radius: 3px;
user-select: none;
z-index: 100;
}
.next {
right: 0;
}
.prev {
left: 0;
}
.next:hover,
.prev:hover {
background-color: rgba(0, 0, 0, 0.8);
transform: scale(1.1);
}
@media (max-width: 1200px) {
.slideshow-container {
max-width: 100%;
}
}
.modal-content.zoom-content {
background-color: transparent;
border: none;
box-shadow: none;
display: flex;
justify-content: center;
align-items: center;
width: 90%;
max-width: 1200px;
height: 90%;
}
.zoomed-image {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 5px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.close-zoom {
position: absolute;
top: -40px;
right: 0;
color: #f1f1f1;
font-size: 40px;
font-weight: 700;
transition: 0.3s;
cursor: pointer;
}
.close-zoom:focus,
.close-zoom:hover {
color: #bbb;
text-decoration: none;
cursor: pointer;
}

body:not(.main-province-visible) .license-province {
display: none !important;
}
body.main-price-hidden .license-price {
visibility: hidden !important;
}
body.main-province-visible .license-province {
display: block !important;
position: absolute;
bottom: 3px;
left: 0;
right: 0;
text-align: center;
font-family: "PeakTabienPlate", sans-serif;
font-size: clamp(0.62rem, 1.5vw, 1.05rem);
font-weight: 700;
line-height: 1;
white-space: nowrap;
overflow: hidden;
}


body .license-province {
font-family: "PeakTabienPlate", sans-serif !important;
}

body .van-border .license-province {
color: #1565c0 !important;
}
body .pickup-border .license-province {
color: #2e7d32 !important;
}


body .license-price {
font-family: "Kanit", sans-serif !important;
}


body .license-plate .license-province {
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
top: auto !important;
width: 100% !important;
max-height: 1.15em;
padding: 0 2px 1px !important;
margin: 0 !important;
box-sizing: border-box !important;
text-align: center;
line-height: 1 !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}


body .license-plate .license-price {
transform: translateY(-5px);
}
@media screen and (max-width: 600px) {
body .license-plate .license-price {
transform: translateY(-5px);
}
}


.data-list-section {
display: none;
background: linear-gradient(180deg, #f8fbf9 0%, #eef5f1 100%);
padding: 18px 0 28px;
scroll-margin-top: 12px;
}
body.list-view-active .data-list-section { display: block; }
body.list-view-active .data-section { display: none !important; }
.data-list-section .table-header h3 {
font-family: Kanit, sans-serif;
padding: 8px 16px;
}
.data-list-subtitle {
color: #557064;
font-family: Kanit, sans-serif;
font-size: 1rem;
margin-top: 5px;
}
.data-list-grid {
width: min(760px, 100%); margin: 0 auto; background: #fff; border-radius: 16px;
overflow: hidden; box-shadow: 0 10px 28px rgba(11, 93, 59, .14); border: 1px solid #dbe9df;
font-family: Kanit, sans-serif;
}
.data-list-head, .data-list-row {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; text-align: center;
}
.data-list-head {
background: linear-gradient(135deg, #0b5d3b, #168457); color: #fff;
font-family: Kanit, sans-serif; font-size: 1.18rem; font-weight: 700; padding: 12px 18px;
}
.data-list-head span {
display: block; margin: 0 auto; text-align: center;
}
.data-list-head span:first-child, .data-list-head span:last-child { width: 100%; }
.data-list-head span + span { border-left: 1px solid rgba(255, 255, 255, .35); }
.data-list-items { display: block; }
.data-list-row {
min-height: 56px; padding: 9px 18px; border-bottom: 1px solid #cbded2;
color: #24372e; font-family: Kanit, sans-serif; font-size: 1.15rem;
transition: background .18s ease, transform .18s ease;
}
.data-list-section .data-list-row {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
flex-direction: row !important;
}
.data-list-section .data-list-row > .data-list-license,
.data-list-section .data-list-row > .data-list-price {
grid-column: auto !important;
grid-row: 1 !important;
}
.data-list-section .data-list-row:nth-child(odd) { background: #ffffff !important; }
.data-list-section .data-list-row:nth-child(even) { background: #edf6f0 !important; }
.data-list-row:hover { background: #fff4d4; transform: translateX(2px); }

.data-list-license, .data-list-price {
display: block; margin: 0; padding: 0; text-align: left; text-indent: 0; white-space: nowrap;
justify-self: stretch;
}
.data-list-license { width: 100%; font-family: PeakTabienPlate, sans-serif; font-weight: 700; }
.data-list-price { width: 100%; font-family: Kanit, sans-serif; font-weight: 700; }
.data-list-license { font-size: 1.45rem; letter-spacing: .02em; transform: translateX(7ch); }
.data-list-price { color: #000; text-shadow: none; transform: translateX(7ch); }
.data-list-price { border-left: 1px solid #dbe9df; }
.data-list-row.list-filter-hidden { display: none; }
.data-list-empty { text-align: center; padding: 24px; color: #60766a; }
@media (max-width: 480px) {
.data-list-head { font-size: 1rem; padding: 10px 12px; }
.data-list-row { min-height: 50px; padding: 7px 10px; font-size: 1rem; }
.data-list-license { font-size: 1.2rem; }
}

.top-header[data-background-setting="preset-midnight"]{--header-bg:#172b3d;--header-beam:rgba(130,210,255,.18)}
.top-header[data-background-setting="preset-emerald"]{--header-bg:#064f43;--header-beam:rgba(197,255,220,.2)}
.top-header[data-background-setting="preset-amber"]{--header-bg:#70410d;--header-beam:rgba(255,233,171,.22)}
.top-header[data-background-setting="preset-violet"]{--header-bg:#342553;--header-beam:rgba(224,207,255,.2)}
.top-header[data-background-setting^="shared_assets/"]{background-image:var(--header-custom-image),linear-gradient(135deg,rgba(8,19,32,.42),rgba(8,19,32,.12))}
.top-header.has-custom-header-image{background-image:var(--header-custom-image),linear-gradient(135deg,rgba(8,19,32,.42),rgba(8,19,32,.12)) !important}



:root { --pt-ease-out: cubic-bezier(.23, 1, .32, 1); }
body { background: radial-gradient(circle at 50% -10%, #ffffff 0, #f4f7f6 42%, #e7ecea 100%); }
.top-header { box-shadow: 0 10px 28px rgba(8, 40, 28, .24), inset 0 1px 0 rgba(255,255,255,.18); }
.top-header::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(115deg, rgba(255,255,255,.16), transparent 28%, transparent 72%, rgba(255,255,255,.08)); mix-blend-mode: screen; }
.contact-link { position: relative; overflow: hidden; cursor: pointer; }
.contact-link::after { content: ""; position: absolute; top: -80%; left: -45%; width: 28%; height: 260%; transform: rotate(24deg) translateX(-220%); background: rgba(255,255,255,.32); transition: transform .55s var(--pt-ease-out); pointer-events: none; }
.contact-link:hover::after, .contact-link:focus-visible::after { transform: rotate(24deg) translateX(520%); }
.contact-link:focus-visible, .btn:focus-visible { outline: 3px solid rgba(241,196,15,.85); outline-offset: 3px; }
.table-cell, .license-plate { box-shadow: 0 7px 16px rgba(31,45,61,.12), inset 0 1px 0 rgba(255,255,255,.65); transition: transform .18s var(--pt-ease-out), box-shadow .18s var(--pt-ease-out), filter .18s ease; }
.table-cell:hover, .license-plate:hover { transform: translateY(-3px); filter: saturate(1.05); box-shadow: 0 13px 24px rgba(31,45,61,.18), inset 0 1px 0 rgba(255,255,255,.72); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }


body {
min-width: auto !important;
overflow-x: clip !important;
}
.container {
width: 100% !important;
max-width: 1400px !important;
margin: 0 auto !important;
padding: 0 0 !important;
}
.admin-icon {
border-radius: 50% !important;
object-fit: cover !important;
}
.search-buttons,
.search-filters {
flex-wrap: wrap !important;
justify-content: center !important;
gap: 8px !important;
}
.search-input {
font-size: 1rem !important;
}
.btn,
.filter-select {
font-size: 0.9rem !important;
padding: 8px 15px !important;
min-width: 120px !important;
}
.data-table {
display: grid !important;
gap: 5px !important;
padding: 5px !important;
}
.table-row {
display: contents !important;
}
.table-cell {
border: none !important;
padding: 0 !important;
min-height: auto !important;
background: 0 0 !important;
display: block !important;
}
.table-cell.hidden {
display: none !important;
}
.table-cell.price-hidden {
display: none !important;
}
.table-cell.sum-hidden {
display: none !important;
}
.license-plate {
width: 100% !important;
margin: 0 !important;
padding: 5px !important;
min-height: 80px !important;
}
.license-text {
font-family: PeakTabienPlate, sans-serif !important;
font-size: 1.2rem !important;
font-weight: 900 !important;
margin-top: -10px !important;
margin-bottom: 0 !important;
line-height: 1 !important;
white-space: nowrap !important;
letter-spacing: -0.5px !important;
text-shadow:
0.5px 0.5px 0 #fff,
1px 1px 1px rgba(0, 0, 0, 0.3) !important;
}
.license-text .thai-tone,
.license-text .thai-vowel-upper {
font-size: 0.75em !important;
margin-left: -0.35em !important;
margin-right: -0.15em !important;
display: inline-block !important;
width: auto !important;
pointer-events: none !important;
vertical-align: middle !important;
overflow: visible !important;
line-height: 1 !important;
}
.license-text .thai-vowel-upper {
position: relative !important;
top: -0.75em !important;
}
.license-text .thai-tone {
position: relative !important;
top: -1.05em !important;
}
.license-text .thai-vowel-lower {
font-size: 0.75em !important;
margin-left: -0.35em !important;
margin-right: -0.15em !important;
position: relative !important;
top: 0.2em !important;
display: inline-block !important;
width: auto !important;
pointer-events: none !important;
vertical-align: middle !important;
overflow: visible !important;
line-height: 1 !important;
}
.license-price {
font-family: Kanit, sans-serif !important;
font-size: 0.85rem !important;
font-weight: 500 !important;
color: #333 !important;
opacity: 0.9 !important;
}
.license-badge {
width: 28px !important;
height: 28px !important;
font-size: 16px !important;
}
@media (min-width: 1025px) {
.data-table {
grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
gap: 0.5vw !important;
padding: 1vw !important;
}
.license-plate {
min-height: auto !important;
aspect-ratio: 1.8/1 !important;
padding: 0.5vw !important;
}
.license-text {
font-size: clamp(1.2rem, 2.5vw, 2.6rem) !important;
font-weight: 900 !important;
letter-spacing: -0.05em !important;
margin-bottom: 0.2vw !important;
text-shadow: none !important;
line-height: 1 !important;
}
.license-price {
font-family: Kanit, sans-serif !important;
font-size: clamp(0.7rem, 1.1vw, 1.3rem) !important;
position: relative !important;
bottom: auto !important;
width: 100% !important;
margin-top: 0.2vw !important;
font-weight: 500 !important;
color: #333 !important;
opacity: 0.9 !important;
}
.license-badge {
width: 1.8vw !important;
height: 1.8vw !important;
min-width: 18px !important;
min-height: 18px !important;
font-size: clamp(9px, 1vw, 14px) !important;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.data-table {
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
.license-text {
font-size: 2.4rem !important;
font-weight: 900 !important;
letter-spacing: -1.2px !important;
margin-bottom: 9px !important;
text-shadow: none !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.license-price {
font-family: Kanit, sans-serif !important;
font-size: 1.1rem !important;
position: relative !important;
bottom: auto !important;
width: 100% !important;
margin-top: 2px !important;
font-weight: 500 !important;
color: #333 !important;
opacity: 0.9 !important;
}
.license-badge {
width: 24px !important;
height: 24px !important;
font-size: 14px !important;
}
}
@media (min-width: 744px) and (max-width: 827px) {
.data-table {
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
gap: 4px !important;
}
.license-plate {
min-height: 70px !important;
}
.license-text {
font-size: 1.8rem !important;
letter-spacing: -0.8px !important;
}
.license-price {
font-size: 0.95rem !important;
}
}
@media (max-width: 768px) {
.table-header {
margin-bottom: 4px !important;
}
.table-header h3 {
font-size: 1.35rem !important;
padding: 3.75px 0 !important;
line-height: 1.2 !important;
}
.data-section {
padding: 2px 5px !important;
}
.data-table {
grid-template-columns: repeat(4, 1fr) !important;
gap: 2px !important;
padding: 2px !important;
}
.license-plate {
min-height: 60px !important;
padding: 2px !important;
border-width: 1.5px !important;
border-radius: 6px !important;
}
.license-text {
font-size: clamp(1.6rem, 6vw, 2rem) !important;
font-weight: 900 !important;
margin-top: 0 !important;
margin-bottom: 2px !important;
letter-spacing: -0.8px !important;
text-shadow: none !important;
width: 100% !important;
justify-content: center !important;
}
.license-price {
font-family: Kanit, sans-serif !important;
font-size: 0.85rem !important;
position: relative !important;
bottom: auto !important;
width: 100% !important;
margin-top: 2px !important;
font-weight: 500 !important;
color: #333 !important;
opacity: 0.9 !important;
}
.license-sum-badge {
display: none !important;
}
.license-badge {
display: flex !important;
width: 20px !important;
height: 20px !important;
font-size: 11px !important;
bottom: 2px !important;
right: 2px !important;
border-width: 1px !important;
background-color: #125db5 !important;
color: #fff !important;
justify-content: center;
align-items: center;
position: absolute;
border-radius: 50%;
}
}
@media (max-width: 480px) {
.table-header h3 {
font-size: 1.1rem !important;
}
.data-table {
grid-template-columns: repeat(4, 1fr) !important;
gap: 1px !important;
padding: 1px !important;
}
.license-plate {
padding: 1px !important;
min-height: 50px !important;
border-width: 1px !important;
}
.license-text {
font-size: clamp(1.1rem, 4.5vw, 1.4rem) !important;
letter-spacing: -0.5px !important;
margin-bottom: 3px !important;
gap: 0 !important;
text-shadow: none !important;
width: 100% !important;
justify-content: center !important;
}
.license-text .number,
.license-text .thai-consonant {
font-size: 1.1em !important;
letter-spacing: -0.05em !important;
}
.license-price {
font-family: Kanit, sans-serif !important;
font-size: 0.7rem !important;
position: relative !important;
bottom: auto !important;
width: 100% !important;
margin-top: 2px !important;
font-weight: 500 !important;
color: #333 !important;
opacity: 0.9 !important;
}
.license-badge {
display: flex !important;
width: 18px !important;
height: 18px !important;
font-size: 10px !important;
bottom: 1px !important;
right: 1px !important;
border-width: 1px !important;
background-color: #125db5 !important;
}
}
.search-container-box {
background: #f9f9f9 !important;
padding: 5px 5px !important;
border-radius: 10px !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
max-width: 1400px !important;
margin: 0 auto !important;
width: 100% !important;
}
.search-row {
display: flex !important;
gap: 10px !important;
margin-bottom: 8px !important;
width: 100% !important;
}
.search-row:last-child {
margin-bottom: 0 !important;
}
.search-row .filter-select,
.search-row .search-buttons,
.search-row .search-input-container,
.search-row .search-clear-button {
width: 100% !important;
margin: 0 !important;
}
.row-1 .search-input-container {
flex: 1 !important;
}
.row-1 {
display: grid !important;
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
align-items: center;
}
.row-1 .search-input {
width: 100% !important;
padding: 12px 15px !important;
border: 1px solid #ddd !important;
border-radius: 18.75px !important;
font-size: 1rem !important;
}
.row-1 .search-clear-button {
min-width: 0 !important;
white-space: nowrap;
}
.row-2 {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: center;
}
.row-2 .filter-select {
width: 100% !important;
min-width: 0 !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 768px) {
.search-container-box {
padding: 2px !important;
}
.search-row {
gap: 8px !important;
margin-bottom: 10px !important;
}
.filter-select,
.row-1 .search-input {
font-size: 0.9rem !important;
padding: 10px !important;
}
.row-1 .search-clear-button {
font-size: 0.9rem !important;
padding: 10px 4px !important;
}
}
@media (max-width: 480px) {
.row-1 .search-input,
.row-1 .search-clear-button {
font-size: 0.72rem !important;
padding: 9px 4px !important;
}
.row-2 .filter-select {
font-size: 0.72rem !important;
padding: 9px 4px !important;
}
}


@media (max-width: 900px) {
.footer-content {
grid-template-columns: 1fr;
gap: 26px;
}
.footer-brand p {
max-width: 620px;
}
}

@media (max-width: 600px) {
.footer-space {
padding: 34px 0 18px;
}
.footer-link-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.footer-link-grid a {
padding: 9px 8px;
font-size: .84rem;
}
.footer-bottom {
align-items: flex-start;
flex-direction: column;
gap: 8px;
margin-top: 26px;
}
}



@media (min-width:1025px){.data-table .license-plate{width:var(--pt-width,100%)!important;height:var(--pt-height,auto)!important;min-height:var(--pt-height,auto)!important;border-width:var(--pt-borderWidth,2px)!important;border-radius:var(--pt-radius,10px)!important;padding:var(--pt-padding,10px)!important}.data-table .license-text{font-size:var(--pt-fontSize,42px)!important;letter-spacing:var(--pt-letterSpacing,-1px)!important;transform:translate(var(--pt-offsetX,0),var(--pt-offsetY,0))}.data-table .license-price{font-size:var(--pt-priceSize,18px)!important;transform:translate(var(--pt-priceOffsetX,0),var(--pt-priceOffsetY,0));margin-top:var(--pt-gap,2px)!important}.data-table .license-province{font-size:var(--pt-provinceSize,13px)!important;transform:translate(var(--pt-provinceOffsetX,0),var(--pt-provinceOffsetY,0));margin-top:var(--pt-gap,2px)!important}}
@media (min-width:769px) and (max-width:1024px){.data-table .license-plate{width:var(--pt-width,100%)!important;height:var(--pt-height,100px)!important;min-height:var(--pt-height,100px)!important;border-width:var(--pt-borderWidth,2px)!important;border-radius:var(--pt-radius,8px)!important;padding:var(--pt-padding,6px)!important}.data-table .license-text{font-size:var(--pt-fontSize,34px)!important;letter-spacing:var(--pt-letterSpacing,-1px)!important;transform:translate(var(--pt-offsetX,0),var(--pt-offsetY,0))}.data-table .license-price{font-size:var(--pt-priceSize,16px)!important;transform:translate(var(--pt-priceOffsetX,0),var(--pt-priceOffsetY,0));margin-top:var(--pt-gap,2px)!important}.data-table .license-province{font-size:var(--pt-provinceSize,12px)!important;transform:translate(var(--pt-provinceOffsetX,0),var(--pt-provinceOffsetY,0));margin-top:var(--pt-gap,2px)!important}}
@media (max-width:768px){.data-table .license-plate{width:var(--pt-width,100%)!important;height:var(--pt-height,70px)!important;min-height:var(--pt-height,70px)!important;border-width:var(--pt-borderWidth,1.5px)!important;border-radius:var(--pt-radius,6px)!important;padding:var(--pt-padding,2px)!important}.data-table .license-text{font-size:var(--pt-fontSize,27px)!important;letter-spacing:var(--pt-letterSpacing,-.8px)!important;transform:translate(var(--pt-offsetX,0),var(--pt-offsetY,0))}.data-table .license-price{font-size:var(--pt-priceSize,14px)!important;transform:translate(var(--pt-priceOffsetX,0),var(--pt-priceOffsetY,0));margin-top:var(--pt-gap,2px)!important}.data-table .license-province{font-size:var(--pt-provinceSize,11px)!important;transform:translate(var(--pt-provinceOffsetX,0),var(--pt-provinceOffsetY,0));margin-top:var(--pt-gap,2px)!important}}
body.pt-hide-admin-price .data-table .license-price{display:none!important}body.pt-show-admin-province .data-table .license-province{display:block!important}


.slideshow-section {
background: linear-gradient(135deg, #f8f9fa, #f0f2f5);
padding: 30px 0;
margin: 20px 0;
}
.slideshow-container {
position: relative;
width: 100%;
max-width: 100%;
margin: 20px auto;
background: #f0f2f5;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
height: auto;
min-height: 200px;
display: flex;
align-items: center;
contain: layout paint;
}
.slides-wrapper {
display: flex;
transition: transform 0.5s ease-in-out;
width: 100%;
height: 100%;
background: 0 0;
will-change: transform;
align-items: center;
}
.slide {
flex: 0 0 33.333%;
padding: 4px;
box-sizing: border-box;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.slide img {
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: contain;
display: block;
border-radius: 8px;
background: #fff;
padding: 4px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
cursor: pointer;
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}
.slide img:hover {
transform: scale(1.02);
}
.fade {
animation: fade 1s ease-in-out;
}
@keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.next,
.prev {
cursor: pointer;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
background-color: rgba(0, 0, 0, 0.3);
font-weight: 700;
font-size: 20px;
transition: all 0.3s ease;
border-radius: 50%;
user-select: none;
z-index: 100;
border: none;
backdrop-filter: blur(4px);
}
.next {
right: 0;
}
.prev {
left: 0;
}
.next:hover,
.prev:hover {
background-color: rgba(0, 0, 0, 0.8);
transform: translateY(-50%) scale(1.1);
}
@media (max-width: 768px) {
.slideshow-container {
height: auto;
border-radius: 10px;
margin: 15px auto;
}
.slide {
flex: 0 0 50%;
}
.next,
.prev {
padding: 12px;
font-size: 16px;
}
}
@media (max-width: 480px) {
.slideshow-container {
height: auto;
border-radius: 8px;
margin: 10px auto;
}
.slide {
flex: 0 0 50%;
padding: 3px;
}
.next,
.prev {
padding: 10px;
font-size: 14px;
}
}
@media (min-width: 1200px) {
.slideshow-container {
height: auto;
}
.slide {
flex: 0 0 33.333%;
}
}
@media (min-width: 1600px) {
.slideshow-container {
height: auto;
}
.slide {
flex: 0 0 25%;
}
}
.modal-content.zoom-content {
background-color: transparent;
border: none;
box-shadow: none;
display: flex;
justify-content: center;
align-items: center;
width: 90%;
max-width: 1200px;
height: 90%;
}
.zoomed-image {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 5px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.close-zoom {
position: absolute;
top: -40px;
right: 0;
color: #f1f1f1;
font-size: 40px;
font-weight: 700;
transition: 0.3s;
cursor: pointer;
}
.close-zoom:focus,
.close-zoom:hover {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
.next,
.prev,
.slide img,
.slides-wrapper {
transition: none !important;
}
}
@media print {
.next,
.prev,
.slideshow-container {
display: none;
}
}


.slideshow-container .prev,
.slideshow-container .next {
appearance: none;
border: 0;
min-width: 44px;
min-height: 44px;
padding: 0;
font: inherit;
font-size: 20px;
line-height: 1;
}
.slideshow-container button[hidden] { display: none !important; }
.slide-image-button {
display: block;
width: 100%;
padding: 0;
border: 0;
border-radius: 8px;
background: transparent;
cursor: zoom-in;
}
.slide-image-button img { cursor: zoom-in; }
.slide-image-button:focus-visible,
.slideshow-container .prev:focus-visible,
.slideshow-container .next:focus-visible,
.close-zoom:focus-visible {
outline: 3px solid #d4a531;
outline-offset: 3px;
z-index: 101;
}
.close-zoom {
display: inline-grid;
place-items: center;
min-width: 44px;
min-height: 44px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(0, 0, 0, 0.55);
line-height: 1;
}
#imageZoomModal[aria-hidden="true"] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
.slide-image-button img,
.slides-wrapper { transition: none !important; }
}


.floating-navigation {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: none;
align-items: center;
justify-content: center;
gap: 10px;
z-index: 999;
}
.back-to-top-btn {
width: 52.5px;
height: 52.5px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea 0, #764ba2 100%);
border: none;
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
padding: 0;
font-size: 0;
}
.floating-navigation.show {
display: flex;
animation: slideUp 0.3s ease-out;
}
.floating-navigation.hide {
animation: slideDown 0.3s ease-out forwards;
}
.back-to-top-btn:hover {
background: linear-gradient(135deg, #764ba2 0, #667eea 100%);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
transform: translateY(-3px);
}
.back-to-top-btn:active {
transform: translateY(-1px);
box-shadow: 0 3px 10px rgba(102, 126, 234, 0.4);
}
.back-to-top-icon {
width: 24px;
height: 24px;
stroke-width: 2.5;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateX(-50%) translateY(20px);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
@keyframes slideDown {
from {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
to {
opacity: 0;
transform: translateX(-50%) translateY(20px);
}
}
html {
scroll-behavior: smooth;
}
html.custom-scroll-active {
scroll-behavior: auto !important;
}
.back-to-top-btn:disabled {
cursor: default;
opacity: 0.45;
pointer-events: none;
}
@media (min-width: 769px) and (max-width: 1024px) {
.floating-navigation {
bottom: 24px;
gap: 10px;
}
.back-to-top-btn {
width: 78.75px;
height: 78.75px;
}
}
@media (max-width: 768px) {
.floating-navigation {
bottom: 20px;
gap: 9px;
}
.back-to-top-btn {
width: 70.875px;
height: 70.875px;
}
.back-to-top-icon {
width: 20px;
height: 20px;
}
}
@media (max-width: 480px) {
.floating-navigation {
bottom: 15px;
gap: 8px;
}
.back-to-top-btn {
width: 63px;
height: 63px;
}
.back-to-top-icon {
width: 18px;
height: 18px;
}
}


@keyframes skeleton-loading {
0% {
background-position: -1000px 0;
}
100% {
background-position: 1000px 0;
}
}
.skeleton-placeholder {
background: linear-gradient(90deg, #e0e0e0 0, #f0f0f0 50%, #e0e0e0 100%);
background-size: 1000px 100%;
animation: skeleton-loading 2s infinite;
border-radius: 10px;
min-height: 100px;
width: 100%;
}
.skeleton-container {
display: grid;
gap: 3px;
padding: 5px;
width: 100%;
background: #fff;
border-radius: 0;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
@media (min-width: 1025px) {
.skeleton-container {
grid-template-columns: repeat(7, 1fr);
}
}
@media (min-width: 1200px) {
.skeleton-container {
grid-template-columns: repeat(7, 1fr);
}
}
@media (max-width: 1024px) {
.skeleton-container {
grid-template-columns: repeat(5, 1fr);
}
}
@media (max-width: 768px) {
.skeleton-container {

grid-template-columns: repeat(4, 1fr);
gap: 2px;
padding: 2px;
}
.skeleton-plate {
height: 60px;
margin-bottom: 4px;
border-radius: 6px;
}
.skeleton-card {
padding: 3px 2px;
}
.skeleton-price {
height: 13px;
width: 78%;
}
}
@media (max-width: 480px) {
.skeleton-container {
grid-template-columns: repeat(4, 1fr);
gap: 1px;
padding: 1px;
}
.skeleton-plate {
height: 50px;
margin-bottom: 3px;
border-radius: 5px;
}
.skeleton-card {
padding: 2px 1px;
}
.skeleton-price {
height: 10px;
width: 76%;
}
}
.skeleton-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px 5px;
background: 0 0;
position: relative;
}
.skeleton-plate {
width: 100%;
height: 100px;
background: linear-gradient(90deg, #e0e0e0 0, #f0f0f0 50%, #e0e0e0 100%);
background-size: 1000px 100%;
animation: skeleton-loading 2s infinite;
border: 2px solid #ddd;
border-radius: 10px;
margin-bottom: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.skeleton-price {
width: 80%;
height: 20px;
background: linear-gradient(90deg, #e0e0e0 0, #f0f0f0 50%, #e0e0e0 100%);
background-size: 1000px 100%;
animation: skeleton-loading 2s infinite;
border-radius: 4px;
}
.skeleton-badge {
position: absolute;
top: 15px;
right: 15px;
width: 30px;
height: 30px;
background: linear-gradient(90deg, #e0e0e0 0, #f0f0f0 50%, #e0e0e0 100%);
background-size: 1000px 100%;
animation: skeleton-loading 2s infinite;
border-radius: 50%;
}
.loading-section {
background: #f8f9fa;
padding: 2px 0;
margin-bottom: 2px;
}
.loading-section .table-header h3 {
font-size: 1.8rem;
color: #2c3e50;
font-weight: 600;
background: linear-gradient(135deg, #f1c40f, #f39c12);
padding: 0;
border-radius: 25px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
margin-bottom: 5px;
}
.loading-indicator {
text-align: center;
padding: 20px;
color: #666;
font-size: 1rem;
display: none;
}
.loading-indicator.show {
display: block;
}
@keyframes pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.loading-indicator.show {
animation: pulse 1.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.loading-indicator.show,
.skeleton-badge,
.skeleton-placeholder,
.skeleton-plate,
.skeleton-price {
animation: none;
background: #e0e0e0;
}
}





.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
opacity: 0;
visibility: hidden;
transition:
opacity 0.3s ease,
visibility 0.3s ease;
}

.loading-overlay.show {
opacity: 1;
visibility: visible;
}


.loading-container {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
border-radius: 20px;
padding: 40px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
text-align: center;
max-width: 400px;
width: 90%;
animation: slideInUp 0.4s ease-out;
}

@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}


.loading-spinner {
width: 60px;
height: 60px;
margin: 0 auto 20px;
position: relative;
animation: spin 1.5s linear infinite;
}

@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}


.loading-spinner::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 4px solid #f0f0f0;
border-top: 4px solid #f1c40f;
border-right: 4px solid #f39c12;
border-radius: 50%;
box-shadow: 0 0 20px rgba(241, 196, 15, 0.3);
}


.loading-text {
font-family: "Kanit", sans-serif;
font-size: 1.2rem;
font-weight: 600;
color: #2c3e50;
margin: 15px 0 10px;
letter-spacing: 0.5px;
}


.loading-subtext {
font-family: "Kanit", sans-serif;
font-size: 0.9rem;
color: #7f8c8d;
margin: 0;
animation: fadeInOut 2s ease-in-out infinite;
}

@keyframes fadeInOut {
0%,
100% {
opacity: 0.6;
}
50% {
opacity: 1;
}
}


.loading-dots {
display: inline-block;
margin-left: 5px;
}

.loading-dots::after {
content: ".";
animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
0%,
20% {
content: ".";
}
40% {
content: "..";
}
60% {
content: "...";
}
80%,
100% {
content: "";
}
}


.loading-bar {
width: 100%;
height: 4px;
background: #e0e0e0;
border-radius: 2px;
margin-top: 20px;
overflow: hidden;
}

.loading-bar-fill {
width: 100%;
height: 100%;
background: linear-gradient(90deg, #f1c40f, #f39c12, #e67e22);
border-radius: 2px;
transform: scaleX(0);
transform-origin: left center;
animation: progressBar 2s ease-in-out infinite;
box-shadow: 0 0 10px rgba(241, 196, 15, 0.5);
}

@keyframes progressBar {
0% {
transform: scaleX(0);
}
50% {
transform: scaleX(0.8);
}
100% {
transform: scaleX(1);
}
}


.skeleton-container {
animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

.skeleton-card {
animation: shimmer 2s infinite;
}

@keyframes shimmer {
0%,
100% {
opacity: 0.6;
}
50% {
opacity: 1;
}
}


.btn.loading {
position: relative;
color: transparent;
pointer-events: none;
}

.btn.loading::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
top: 50%;
left: 50%;
margin-left: -8px;
margin-top: -8px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: #fff;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}


@media (max-width: 768px) {
.loading-container {
padding: 30px 20px;
max-width: 300px;
}

.loading-spinner {
width: 50px;
height: 50px;
}

.loading-text {
font-size: 1rem;
}

.loading-subtext {
font-size: 0.85rem;
}
}


@media (prefers-color-scheme: dark) {
.loading-container {
background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
color: #ecf0f1;
}

.loading-text {
color: #ecf0f1;
}

.loading-subtext {
color: #bdc3c7;
}

.loading-bar {
background: #34495e;
}
}


@media (prefers-reduced-motion: reduce) {
.loading-overlay,
.loading-container,
.loading-spinner,
.loading-bar-fill,
.skeleton-card {
animation: none;
}

.loading-spinner::before {
border-top-color: #f1c40f;
}
}

.data-load-status { max-width: 920px; margin: 12px auto; padding: 12px 16px; border-radius: 10px; background: #fff8e1; color: #6d4c00; text-align: center; }
.data-load-status.error { background: #ffebee; color: #8a1c1c; }
.data-load-status.warning { background: #fff4d6; color: #6d4c00; }
.data-load-status.success { background: #eef8f0; color: #245b31; }
.data-load-status button { margin-inline-start: 8px; border: 0; border-radius: 999px; padding: 6px 14px; background: #0b5d3b; color: #fff; cursor: pointer; font: inherit; }


body.catalog-loading #dataLoadStatus,
body.catalog-loading #customerReviews,
body.catalog-loading #reviewsHeading,
body.catalog-loading #facebookPosts,
body.catalog-loading #socialHeading,
body.catalog-loading #seoResources,
body.catalog-loading #siteFooter {
display: none !important;
}



.top-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
isolation: isolate;
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 5px 0;
box-sizing: border-box;
}
.top-header .header-container {
display: flex;
align-items: center;
width: 100%;
max-width: 100%;
min-width: 0;
gap: clamp(7px, 1.8vw, 18px);
padding: 0 clamp(8px, 2vw, 22px);
box-sizing: border-box;
}
.top-header .logo-box {
display: flex;
flex: 0 0 clamp(64px, var(--pt-logo-width, 17.5vw), 112px);
align-self: stretch;
align-items: center;
justify-content: center;
min-width: 0;
padding: 0;
box-sizing: border-box;
}
.top-header .logo-box picture {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.top-header .logo-image {
display: block;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: contain;
transform: none;
}
.top-header .content-box {
display: flex;
flex: 1 1 auto;
flex-direction: column;
justify-content: center;
min-width: 0;
gap: clamp(2px, .45vw, 5px);
padding: 0;
}
.top-header .seo {
display: -webkit-box;
max-width: 100%;
margin: 0;
overflow: hidden;
color: rgba(255,255,255,.92);
font-family: Kanit, sans-serif;
font-size: clamp(.75rem, 3vw, 1rem);
font-weight: 400;
line-height: 1.15;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.top-header .title-row {
display: flex;
align-items: center;
min-width: 0;
flex: 0 0 auto;
}
.top-header .website-name {
display: block;
max-width: 100%;
margin: 0;
overflow: hidden;
color: #f1c40f;
font-family: Kanit, sans-serif;
font-size: clamp(.98rem, 5vw, 3rem);
font-weight: 800;
line-height: 1.05;
letter-spacing: -.025em;
text-overflow: ellipsis;
white-space: nowrap;
text-shadow: 1px 1px 3px rgba(0,0,0,.5);
transform: none;
}
.top-header .contact-row {
display: flex;
align-items: center;
justify-content: flex-start;
gap: clamp(4px, 1vw, 10px);
min-width: 0;
overflow: visible;
flex-wrap: nowrap;
}
.top-header .contact-item,
.top-header .contact-item.contact-link {
display: inline-flex;
flex: 0 1 auto;
align-items: center;
justify-content: center;
gap: clamp(3px, .65vw, 7px);
width: fit-content;
min-width: 0;
height: clamp(29px, 4vw, 40px);
margin: 0;
padding: 2px clamp(7px, 1.15vw, 13px);
overflow: hidden;
border: 1px solid rgba(255,255,255,.32);
border-radius: 999px;
background: rgba(255,255,255,.14);
box-sizing: border-box;
color: #fff;
font-family: Kanit, sans-serif;
font-size: clamp(.625rem, 2.5vw, 1rem);
font-weight: 600;
line-height: 1;
text-decoration: none;
white-space: nowrap;
}
.top-header .contact-item span {
overflow: hidden;
text-overflow: ellipsis;
}
.top-header .contact-icon {
display: block;
flex: 0 0 auto;
width: clamp(16px, 3.5vw, 28px);
height: clamp(16px, 3.5vw, 28px);
border-radius: 6px;
object-fit: cover;
}
.top-header .contact-item picture {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
}
.top-header .contact-link::after { display: none; }
.top-header .logo-login:focus-visible,
.top-header .contact-link:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
@media (min-width: 900px) {
.top-header { padding: 7px 0; }
.top-header .header-container { gap: 18px; }
.top-header .seo { font-size: clamp(.9rem, 1.25vw, 1.05rem); }
}
@media (max-width: 480px) {
.top-header .content-box { gap: 2px; }
.top-header .seo { line-height: 1.05; }
.top-header .contact-item,
.top-header .contact-item.contact-link { height: 27px; padding-right: 6px; padding-left: 6px; }
.top-header .contact-icon { width: 15px; height: 15px; }
}
@media (max-width: 359px) {
.top-header { padding: 4px 0; }
.top-header .header-container { gap: 6px; padding-right: 7px; padding-left: 7px; }
.top-header .seo { font-size: 12px; }
.top-header .website-name { font-size: clamp(15px, 4.8vw, 17px); }
.top-header .contact-row { gap: 3px; }
.top-header .contact-item,
.top-header .contact-item.contact-link { gap: 3px; padding-right: 4px; padding-left: 4px; font-size: 10px; }
.top-header .contact-icon { width: 14px; height: 14px; }
}
@media (prefers-reduced-motion: reduce) {
.top-header *, .top-header *::before, .top-header *::after { scroll-behavior: auto !important; }
}



:root {
--catalog-ink: #172b3d;
--catalog-muted: #687787;
--catalog-line: #d8e0e6;
--catalog-surface: #ffffff;
--catalog-wash: #f2f5f7;
--catalog-gold: #f3bd16;
--catalog-green: #0b7049;
--catalog-shadow: 0 5px 18px rgba(20, 38, 55, .08);
}


.search-section {
padding: clamp(7px, 1vw, 12px) 0 !important;
margin: 0 0 5px !important;
color: var(--catalog-ink) !important;
background: linear-gradient(180deg, #eef2f5 0%, #f5f7f8 100%) !important;
}
.search-container-box {
width: min(100% - 20px, 1400px) !important;
max-width: 1400px !important;
padding: 10px !important;
border: 1px solid rgba(23, 43, 61, .1) !important;
border-radius: 15px !important;
background: rgba(255, 255, 255, .96) !important;
box-shadow: var(--catalog-shadow) !important;
}
.search-row {
gap: 9px !important;
margin-bottom: 8px !important;
}
.row-1 .search-input {
min-height: 44px !important;
padding: 10px 14px !important;
border: 1px solid var(--catalog-line) !important;
border-radius: 11px !important;
background: #fff !important;
box-shadow: inset 0 1px 2px rgba(20, 38, 55, .035) !important;
color: var(--catalog-ink) !important;
font-size: .9rem !important;
transition: border-color .16s ease, box-shadow .16s ease;
}
.row-1 .search-input::placeholder { color: #81909d; opacity: 1; }
.row-1 .search-clear-button {
min-height: 44px !important;
padding: 9px 15px !important;
border: 1px solid rgba(255, 255, 255, .35) !important;
border-radius: 11px !important;
background: linear-gradient(135deg, #118153, #075c3d) !important;
box-shadow: 0 3px 9px rgba(11, 93, 59, .18), inset 0 1px 0 rgba(255, 255, 255, .25) !important;
font-size: .88rem !important;
font-weight: 700 !important;
transition: filter .16s ease, box-shadow .16s ease, transform .16s ease;
}
.row-2 .filter-select {
min-width: 0 !important;
min-height: 44px !important;
padding: 9px 12px !important;
border: 1px solid var(--catalog-line) !important;
border-radius: 11px !important;
background-color: #fff !important;
box-shadow: none !important;
color: #273746 !important;
font-size: .86rem !important;
transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.row-2 .filter-select:hover {
transform: none !important;
border-color: #b8c6d0 !important;
background-color: #fbfcfd !important;
box-shadow: 0 2px 6px rgba(20, 38, 55, .06) !important;
}
.row-1 .search-input:focus-visible,
.row-2 .filter-select:focus-visible {
outline: 3px solid rgba(243, 189, 22, .55) !important;
outline-offset: 2px !important;
border-color: #9c7610 !important;
box-shadow: 0 0 0 1px rgba(243, 189, 22, .2) !important;
}
.row-1 .search-clear-button:hover,
.row-1 .search-clear-button:focus-visible {
filter: brightness(1.06);
box-shadow: 0 5px 12px rgba(11, 93, 59, .24), inset 0 1px 0 rgba(255, 255, 255, .3) !important;
}


.data-section {
background-color: var(--catalog-wash) !important;
padding-top: 7px !important;
padding-bottom: 7px !important;
}
.table-header {
margin: 0 auto 8px !important;
padding: 0 6px !important;
}
.table-header h3 {
padding: 6px 12px !important;
border: 1px solid rgba(155, 113, 0, .16) !important;
border-radius: 11px !important;
background: linear-gradient(100deg, #f4c51e 0%, #f3a51a 100%) !important;
box-shadow: 0 2px 7px rgba(107, 76, 0, .12) !important;
color: #263443 !important;
font-size: clamp(1rem, 1.7vw, 1.35rem) !important;
font-weight: 700 !important;
line-height: 1.2 !important;
}
.data-table {
gap: clamp(3px, .45vw, 7px) !important;
padding: 6px !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.license-plate {
border-radius: 8px !important;
box-shadow: 0 2px 6px rgba(16, 31, 45, .15), inset 0 1px 1px rgba(255, 255, 255, .78) !important;
transition: transform .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s ease, filter .28s ease, outline-color .2s ease !important;
}
.license-plate:focus-visible {
outline: 3px solid #a37b05 !important;
outline-offset: 2px !important;
}
.license-plate::after {
content: "";
position: absolute;
z-index: 0;
top: -40%;
bottom: -40%;
left: -60%;
width: 42%;
pointer-events: none;
opacity: 0;
transform: translateX(-160%) skewX(-14deg);
background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .56) 52%, rgba(255, 255, 255, .08) 78%, transparent 100%);
mix-blend-mode: screen;
}
.license-plate > * { z-index: 1; }
@keyframes peak-plate-sheen {
0% { opacity: 0; transform: translateX(-160%) skewX(-14deg); }
12% { opacity: .82; }
100% { opacity: 0; transform: translateX(370%) skewX(-14deg); }
}
@media (hover: hover) and (pointer: fine) {
.table-cell:hover {
transform: none !important;
filter: none !important;
box-shadow: none !important;
background: transparent !important;
}
.license-plate:hover,
.table-cell:hover > .license-plate {
transform: translateY(-4px) scale(1.018) !important;
filter: saturate(1.04);
outline: 1px solid rgba(202, 156, 34, .62);
outline-offset: 0;
box-shadow: 0 12px 22px rgba(16, 31, 45, .24), 0 3px 7px rgba(13, 29, 42, .11), inset 0 1px 1px rgba(255, 255, 255, .8) !important;
}
.license-plate:hover::after,
.license-plate:focus-visible::after,
.table-cell:hover > .license-plate::after {
animation: peak-plate-sheen .68s cubic-bezier(.2, .8, .2, 1) 1 both;
}
}
@media (hover: none), (pointer: coarse) {
.table-cell:hover {
transform: none !important;
filter: none !important;
box-shadow: none !important;
background: transparent !important;
}
.license-plate:hover {
transform: none !important;
filter: none !important;
box-shadow: 0 2px 6px rgba(16, 31, 45, .15), inset 0 1px 1px rgba(255, 255, 255, .78) !important;
outline: none !important;
}
.license-plate::after { display: none; }
}


.picpost-search-panel {
width: min(100% - 24px, 1400px);
max-width: 1400px;
margin: 12px auto 10px;
padding: 12px;
box-sizing: border-box;
border: 1px solid rgba(23, 43, 61, .11);
border-radius: 15px;
background: rgba(255, 255, 255, .97);
box-shadow: var(--catalog-shadow);
}
.picpost-search-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
align-items: center;
}
.picpost-search-input-wrap {
position: relative;
display: flex;
grid-column: 1 / -1;
align-items: center;
min-width: 0;
}
.picpost-search-input-wrap > i {
position: absolute;
left: 13px;
z-index: 1;
color: #718292;
pointer-events: none;
}
.picpost-search-input,
.picpost-filter-select,
.picpost-clear-search {
width: 100%;
min-width: 0;
min-height: 44px;
box-sizing: border-box;
border: 1px solid var(--catalog-line);
border-radius: 11px;
font: 500 .86rem/1.25 Kanit, sans-serif;
}
.picpost-search-input {
padding: 10px 12px 10px 38px;
background: #fff;
color: var(--catalog-ink);
box-shadow: inset 0 1px 2px rgba(20, 38, 55, .035);
}
.picpost-filter-select {
padding: 8px 28px 8px 11px;
background-color: #fff;
color: #273746;
}
.picpost-clear-search {
grid-column: 1 / -1;
padding: 9px 14px;
border-color: transparent;
background: #e5ecef;
color: #334959;
font-weight: 700;
cursor: pointer;
transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.picpost-clear-search:hover,
.picpost-clear-search:focus-visible {
background: var(--catalog-green);
color: #fff;
box-shadow: 0 3px 9px rgba(11, 93, 59, .16);
}
.picpost-search-input:focus-visible,
.picpost-filter-select:focus-visible,
.picpost-clear-search:focus-visible {
outline: 3px solid rgba(243, 189, 22, .55);
outline-offset: 2px;
border-color: #9c7610;
}
.picpost-search-meta {
display: flex;
justify-content: space-between;
gap: 10px;
margin-top: 8px;
padding-top: 7px;
border-top: 1px solid #edf0f2;
color: var(--catalog-muted);
font-size: .78rem;
line-height: 1.35;
}
.picpost-search-meta > * { min-width: 0; }
@media (min-width: 900px) {
.picpost-search-row {
grid-template-columns: minmax(230px, 2fr) repeat(4, minmax(105px, 1fr)) max-content;
}
.picpost-search-input-wrap,
.picpost-clear-search { grid-column: auto; }
.picpost-clear-search { width: auto; min-width: 124px; }
}
#platesContainer > div[style*="text-align:center"] {
display: grid !important;
place-items: center !important;
width: calc(100% - 16px) !important;
min-height: 190px !important;
margin: 8px !important;
padding: 24px !important;
border: 1px dashed #d1dbe2 !important;
border-radius: 14px !important;
background: linear-gradient(180deg, #fff, #f8fafb) !important;
color: #667785 !important;
font-size: 1rem !important;
}

@media (max-width: 768px) {
.search-container-box { padding: 8px !important; }
.search-row { gap: 7px !important; margin-bottom: 7px !important; }
.row-1 .search-input { min-height: 42px !important; }
.row-1 .search-clear-button { min-height: 42px !important; }
.row-2 .filter-select { min-height: 42px !important; }
.data-section { padding: 5px 4px !important; }
.table-header { margin-bottom: 6px !important; }
.data-table { gap: 3px !important; padding: 4px !important; }
.license-plate { border-radius: 6px !important; }
.picpost-search-panel { margin-top: 9px; padding: 10px; }
.picpost-search-row { gap: 7px; }
}
@media (max-width: 480px) {
.search-container-box { padding: 7px !important; }
.row-1 .search-input,
.row-1 .search-clear-button,
.row-2 .filter-select { font-size: .8rem !important; }
.row-2 .filter-select { padding-right: 7px !important; padding-left: 8px !important; }
.data-table { gap: 2px !important; padding: 3px !important; }
.table-header h3 { border-radius: 9px !important; }
.picpost-search-panel { width: calc(100% - 16px); padding: 9px; border-radius: 13px; }
.picpost-search-row { gap: 6px; }
.picpost-search-input,
.picpost-filter-select,
.picpost-clear-search { min-height: 42px; font-size: .8rem; }
.picpost-filter-select { padding-right: 24px; padding-left: 9px; }
.picpost-search-meta { font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) {
.search-input,
.search-clear-button,
.filter-select,
.license-plate,
.picpost-clear-search { transition: none !important; }
.license-plate:hover,
.table-cell:hover > .license-plate {
transform: none !important;
filter: none !important;
}
.license-plate::after { display: none !important; animation: none !important; }
}



.search-no-results:not([hidden]) {
width: min(100% - 24px, 1400px);
box-sizing: border-box;
margin: 12px auto;
padding: 14px 16px;
border: 1px solid #edc4c9;
border-radius: 12px;
background: #fff6f6;
color: #842b35;
font-size: .95rem;
font-weight: 600;
line-height: 1.5;
text-align: center;
}