* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
body {
font-family:
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
"Noto Sans Thai",
Arial,
sans-serif;
color: #173b56;
background: #f5fbfd;
}
button {
font-family: inherit;
}
.app {
min-height: 100vh;
display: flex;
}
/* =========================================
SIDEBAR
========================================= */
.sidebar {
width: 240px;
flex-shrink: 0;
min-height: 100vh;
padding: 25px 15px;
display: flex;
flex-direction: column;
background: white;
border-right:
1px solid #e2eef2;
}
.sidebar-logo {
display: flex;
align-items: center;
gap: 10px;
padding:
0 10px;
margin-bottom: 35px;
font-size: 20px;
font-weight: 900;
}
.logo-box {
width: 38px;
height: 38px;
display: grid;
place-items: center;
border-radius: 11px;
background: #18a7d1;
color: white;
font-weight: 900;
}
/* Navigation */
.sidebar nav {
display: flex;
flex-direction: column;
gap: 5px;
}
.nav-item {
width: 100%;
padding:
12px 13px;
display: flex;
align-items: center;
gap: 12px;
border-radius: 11px;
color: #78909d;
font-size: 13px;
text-decoration: none;
transition:
background .2s,
color .2s;
}
.nav-item span {
width: 20px;
text-align: center;
}
.nav-item:hover {
background: #effafe;
color: #18a7d1;
}
.nav-item.active {
background: #e7f8fc;
color: #0d8db8;
font-weight: 800;
}
.sidebar-bottom {
margin-top: auto;
}
.logout-button {
width: 100%;
margin-top: 10px;
padding: 11px;
border: 0;
border-radius: 10px;
background: #fff0f0;
color: #d65b5b;
cursor: pointer;
}
/* =========================================
MAIN
========================================= */
.main {
min-width: 0;
flex: 1;
}
/* =========================================
TOPBAR
========================================= */
.topbar {
min-height: 72px;
padding:
0 35px;
display: flex;
align-items: center;
justify-content: space-between;
background: white;
border-bottom:
1px solid #e2eef2;
}
.topbar-title {
font-size: 12px;
color: #9aabb4;
}
.topbar p {
margin: 2px 0 0;
font-size: 13px;
font-weight: 800;
}
.profile {
display: flex;
align-items: center;
gap: 9px;
font-size: 12px;
font-weight: 800;
}
.profile-avatar {
width: 34px;
height: 34px;
display: grid;
place-items: center;
border-radius: 50%;
background: #dff5fb;
color: #0d8db8;
}
/* =========================================
DASHBOARD
========================================= */
.dashboard {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 35px;
}
.dashboard-header {
margin-bottom: 25px;
}
.eyebrow {
color: #18a7d1;
font-size: 10px;
font-weight: 900;
letter-spacing: 1px;
}
.dashboard-header h1 {
margin: 7px 0 4px;
font-size: 30px;
}
.dashboard-header p {
margin: 0;
color: #78909d;
font-size: 13px;
}
/* =========================================
SALE BANNER
========================================= */
.sale-banner {
position: relative;
overflow: hidden;
min-height: 190px;
padding: 30px;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 20px;
background:
linear-gradient(
135deg,
#16a5cf,
#68d7e8
);
color: white;
}
.sale-banner span {
font-size: 10px;
font-weight: 900;
letter-spacing: 1px;
}
.sale-banner h2 {
margin: 8px 0 18px;
font-size: 28px;
line-height: 1.2;
}
.sale-banner button {
padding:
10px 17px;
border: 0;
border-radius: 9px;
background: white;
color: #0d8db8;
font-size: 12px;
font-weight: 800;
cursor: pointer;
}
.banner-icon {
margin-right: 8%;
font-size: 100px;
opacity: .25;
}
/* =========================================
STATS
========================================= */
.stats-grid {
margin-top: 20px;
display: grid;
grid-template-columns:
repeat(4, 1fr);
gap: 15px;
}
.stat-card {
padding: 18px;
display: flex;
align-items: center;
gap: 13px;
border:
1px solid #e0edf1;
border-radius: 16px;
background: white;
}
.stat-icon {
width: 44px;
height: 44px;
display: grid;
place-items: center;
flex-shrink: 0;
border-radius: 12px;
background: #eaf8fc;
}
.stat-card span {
display: block;
margin-bottom: 4px;
color: #8b9ca4;
font-size: 10px;
}
.stat-card strong {
font-size: 23px;
}
/* =========================================
QUICK ACTION
========================================= */
.section-title {
margin:
30px 0 15px;
font-size: 18px;
}
.quick-grid {
display: grid;
grid-template-columns:
repeat(4, 1fr);
gap: 15px;
}
.quick-card {
min-height: 150px;
padding: 20px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 5px;
border:
1px solid #e0edf1;
border-radius: 16px;
background: white;
text-align: left;
cursor: pointer;
transition:
transform .15s,
box-shadow .15s;
}
.quick-card:hover {
transform:
translateY(-2px);
box-shadow:
0 8px 25px
rgba(30, 90, 110, .08);
}
.quick-icon {
margin-bottom: 8px;
font-size: 26px;
}
.quick-card strong {
font-size: 13px;
}
.quick-card small {
color: #8a9ba3;
font-size: 10px;
}
/* =========================================
MOBILE NAV
========================================= */
.mobile-nav {
display: none;
}
/* =========================================
TABLET
========================================= */
@media (max-width: 1000px) {
.sidebar {
width: 200px;
}
.stats-grid,
.quick-grid {
grid-template-columns:
repeat(2, 1fr);
}
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 700px) {
.app {
display: block;
padding-bottom: 70px;
}
.sidebar {
display: none;
}
.topbar {
padding:
0 18px;
}
.profile span {
display: none;
}
.dashboard {
padding:
25px 18px;
}
.dashboard-header h1 {
font-size: 25px;
}
.sale-banner {
min-height: 180px;
padding: 25px;
border-radius: 17px;
}
.sale-banner h2 {
font-size: 24px;
}
.banner-icon {
margin-right: 0;
font-size: 70px;
}
.stats-grid {
grid-template-columns:
repeat(2, 1fr);
gap: 10px;
}
.stat-card {
padding: 14px;
}
.stat-icon {
width: 38px;
height: 38px;
}
.stat-card strong {
font-size: 20px;
}
.quick-grid {
grid-template-columns:
repeat(2, 1fr);
gap: 10px;
}
.quick-card {
min-height: 135px;
padding: 15px;
}
.mobile-nav {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
height: 65px;
display: grid;
grid-template-columns:
repeat(4, 1fr);
background: white;
border-top:
1px solid #e2eef2;
}
.mobile-nav a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
color: #8ca0a9;
font-size: 9px;
text-decoration: none;
}
.mobile-nav a span {
font-size: 19px;
}
.mobile-nav a.active {
color: #0d8db8;
font-weight: 800;
}
}
/* =========================================
SMALL MOBILE
========================================= */
@media (max-width: 380px) {
.dashboard {
padding:
20px 14px;
}
.stats-grid {
grid-template-columns:
1fr;
}
.quick-grid {
grid-template-columns:
1fr 1fr;
}
}
.logout-button, #logoutButton {
position: relative; /* หรือ absolute หากต้องการกำหนดพิกัดชัดเจน */
z-index: 9999; /* ดันให้อยู่ชั้นบนสุดเสมอ เพื่อให้คลิกได้ไม่โดนบัง */
pointer-events: auto; /* เปิดให้สามารถคลิกได้ปกติ */
cursor: pointer; /* เปลี่ยนรูปเมาส์ให้เป็นรูปมือเมื่อชี้ */
}