body{font-size: 16px;color: #333;background: #ffffff;}
*{margin:0;padding:0;line-height:1.5}
a{text-decoration:none;color:#181818;cursor:pointer;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}
a:hover,a:focus,a:visited{text-decoration:none;outline:none}
a:active,a:hover{color: blue;}
ul{padding-left:0;}
img{max-width:100%;border:none;height:auto}
b,strong{font-weight: bold;}
.header-fixed{position:fixed; top:0; left:0; width:100%; background:#fff; /* nền sáng mặc định */z-index:1000; /* nổi lên trên cùng */box-shadow:0 2px 6px rgba(0,0,0,0.1); transition:all 0.3s ease}
/* Khi cuộn xuống thì thu nhỏ lại */

.header-fixed.scrolled { background:#f8f8f8; padding:5px 0; box-shadow:0 3px 8px rgba(0,0,0,0.2); }

/* Bộ đếm ngày giờ */
.clock { font-family:Arial,sans-serif;  padding:5px 12px; display:inline-block; }


/* Style nút toggle */
.theme-toggle { position:relative; width:60px; height:23px; border-radius:30px; border:none; cursor:pointer; background:linear-gradient(145deg,#f0f0f0,#dcdcdc); box-shadow:inset 2px 2px 5px rgba(0,0,0,0.2),inset -2px -2px 5px rgba(255,255,255,0.7); display:flex; align-items:center; justify-content:space-between; padding:0 8px; font-size:16px; transition:background 0.3s ease; }


/* icon mặt trời & trăng */
.theme-toggle .sun,.theme-toggle .moon { position:absolute; top:50%; transform:translateY(-50%); transition:all 0.4s ease; }
.theme-toggle .sun { left:8px; opacity:1; }
.theme-toggle .moon { right:8px; opacity:0; }


/* Dark mode */
body[data-bs-theme="dark"] .theme-toggle { background:linear-gradient(145deg,#2a2a2a,#1a1a1a); box-shadow:inset 2px 2px 5px rgba(255,255,255,0.1),inset -2px -2px 5px rgba(0,0,0,0.7); }
body[data-bs-theme="dark"] .theme-toggle .sun { opacity:0; }
body[data-bs-theme="dark"] .theme-toggle .moon { opacity:1; }		
body[data-bs-theme="dark"] { background:#121212; color:#f1f1f1;  }
body[data-bs-theme="light"] { background:#ffffff; color:#333;  }
body[data-bs-theme="dark"] .site-header__main {background: #4d4d4d;}
body[data-bs-theme="dark"] a {color: #ffc100;}
body[data-bs-theme="dark"] .header-col--nav ul li a {color: #f1f1f1;}

/*Header*/
.site-header__main {padding: 5px 0;}
.site-logo img {filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)) drop-shadow(0 4px 1px rgba(0, 0, 0, 0.2));}
.header-col--nav ul.main-menu {margin: 0;display: flex;}
.header-col--nav ul li  {list-style: none;}
.header-col--nav ul li a {padding: 25px 20px;color:#3f3f3fdd;text-transform: capitalize;}
.site-topbar {display: flex;background: #0083cb;gap: 20px;padding: 3px 50px;align-items: center;}
.site-topbar .left {display: flex;width: 50%;align-items: center;}
.site-topbar .right {width: 50%;}
.site-topbar .header-button {display: flex;gap: 20px;width: 100%;justify-content: end;}
.site-topbar .header-button a {padding: 5px 20px; border-radius:3px;color:#ffffff; display: block;font-size: 14px;font-weight: bold;}
.site-topbar .header-button a:hover {transform:scale(1.1); }
.site-topbar .header-button a:nth-child(1) {background:#ff9022 ; }
.site-topbar .header-button a:nth-child(2) {background:#ff2f00; }

@media(max-width:600px) {


}