:root {

    --border-color: #ccc;
    --theme-bg-color: #faf9f5;
    --box-dark-bg-color: #f5f4ed;
    --highlight-text-color: #5e5d59;
    --black-color: #000;
    --black-hover-color: #444;
}

body { background-color: var(--theme-bg-color);   font-size: 16px;line-height: 1.5; }
header .nav-tabs .nav-link:focus{ outline: 5px auto -webkit-focus-ring-color; }
.page-header {border-color: var(--border-color);}
header h1 { margin: 0;font-size: 28px;font-weight: 600;}
header .nav-tabs { border: none;}
header .navbar-default .navbar-collapse { border-color: var(--border-color); }
header .nav-tabs .nav-link:hover { border-color: var(--theme-bg-color); }
.dropdown-menu { border: 1px solid var(--border-color); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); border-radius: 8px; }
.navbar { margin-bottom: 0; border-radius: 0; border: none; border-bottom: 1px solid var(--border-color); background-color: var(--theme-bg-color); }
.hongkiat-form { background: #f5f4ed; padding: 20px; border: 2px solid var(--border-color); border-radius: 20px; }
.notification-filter-form { padding: 12px 20px; }
.notification-filter-row, .filter-type-group { display: flex; align-items: center; }
.filter-type-group { gap: 10px; }
.filter-type-group label { flex: 0 0 auto; margin: 0; white-space: nowrap; }
.filter-type-group .form-control { min-width: 0; }
.notification-list-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.notification-list-heading h2 { flex: 0 0 auto; }
.notification-search-form { display: flex; align-items: center; justify-content: flex-end; gap: 8px; width: min(100%, 380px); }
.notification-search-form .form-control { min-width: 0; }
.notification-search-form .btn { flex: 0 0 40px; width: 40px; height: 40px; padding: 8px; }
.hongkiat-form .btn-success{ background-color: var(--black-color); border-color: var(--black-color); color: #fff; }
.hongkiat-form .btn-success:hover, .hongkiat-form .btn-success:active { background-color: var(--black-hover-color); border-color: var(--black-hover-color); color: #fff; }
.form-control { border: 2px solid var(--border-color); border-radius: 8px; padding: 12px 16px; transition: all 0.3s ease; height: auto; }
.hongkiat-form .list-inline > li { margin-right: 20px; margin-top: 10px; margin-bottom: 10px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.hongkiat-form .list-inline > li label { display: inline-flex; align-items: center; gap: 8px; }
.hongkiat-form input[type=radio], .hongkiat-form input[type=checkbox] { margin-top: 0; }
.btn-black { background-color: var(--black-color); border-color: var(--black-color); color: #fff; }
.btn-black:focus,.btn-black:hover, .btn-black:active { background-color: var(--black-hover-color); border-color: var(--black-hover-color); color: #fff; }
.box-bg-dark { background-color: var(--box-dark-bg-color); }
.box-bg-dark a { color: #000; }
main { min-height: 500px; }
footer { background-color: var(--black-color); color: #fff;}

/* Flexbox Utility Classes */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.justify-center { justify-content: center; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.align-center { align-items: center; }
.align-start { align-items: flex-start; }
.align-end { align-items: flex-end; }
.space-between { justify-content: space-between; }
.space-around { justify-content: space-around; }
.space-evenly { justify-content: space-evenly; }
.flex-wrap { flex-wrap: wrap; }

/* Custom Border Radius */
.rounded-5 { border-radius: 5px; }
.rounded-10 { border-radius: 10px; }
.rounded-15 { border-radius: 15px; }
.rounded-full { border-radius: 50%; }
/* Margin-top */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 5px; }
.mt-2 { margin-top: 10px; }
.mt-3 { margin-top: 15px; }
.mt-4 { margin-top: 20px; }
.mt-5 { margin-top: 25px; }

/* Margin-right */
.mr-0 { margin-right: 0; }
.mr-1 { margin-right: 5px; }
.mr-2 { margin-right: 10px; }
.mr-3 { margin-right: 15px; }
.mr-4 { margin-right: 20px; }
.mr-5 { margin-right: 25px; }

/* Margin-bottom */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 5px; }
.mb-2 { margin-bottom: 10px; }
.mb-3 { margin-bottom: 15px; }
.mb-4 { margin-bottom: 20px; }
.mb-5 { margin-bottom: 25px; }

/* Margin-left */
.ml-0 { margin-left: 0; }
.ml-1 { margin-left: 5px; }
.ml-2 { margin-left: 10px; }
.ml-3 { margin-left: 15px; }
.ml-4 { margin-left: 20px; }
.ml-5 { margin-left: 25px; }

/* Horizontal margin (left and right) */
.mx-0 { margin-left: 0; margin-right: 0; }
.mx-1 { margin-left: 5px; margin-right: 5px; }
.mx-2 { margin-left: 10px; margin-right: 10px; }
.mx-3 { margin-left: 15px; margin-right: 15px; }
.mx-4 { margin-left: 20px; margin-right: 20px; }
.mx-5 { margin-left: 25px; margin-right: 25px; }

/* Vertical margin (top and bottom) */
.my-0 { margin-top: 0; margin-bottom: 0; }
.my-1 { margin-top: 5px; margin-bottom: 5px; }
.my-2 { margin-top: 10px; margin-bottom: 10px; }
.my-3 { margin-top: 15px; margin-bottom: 15px; }
.my-4 { margin-top: 20px; margin-bottom: 20px; }
.my-5 { margin-top: 25px; margin-bottom: 25px; }

/* Padding-top */
.pt-0 { padding-top: 0; }
.pt-1 { padding-top: 5px; }
.pt-2 { padding-top: 10px; }
.pt-3 { padding-top: 15px; }
.pt-4 { padding-top: 20px; }
.pt-5 { padding-top: 25px; }

/* Padding-right */
.pr-0 { padding-right: 0; }
.pr-1 { padding-right: 5px; }
.pr-2 { padding-right: 10px; }
.pr-3 { padding-right: 15px; }
.pr-4 { padding-right: 20px; }
.pr-5 { padding-right: 25px; }

/* Padding-bottom */
.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: 5px; }
.pb-2 { padding-bottom: 10px; }
.pb-3 { padding-bottom: 15px; }
.pb-4 { padding-bottom: 20px; }
.pb-5 { padding-bottom: 25px; }

/* Padding-left */
.pl-0 { padding-left: 0; }
.pl-1 { padding-left: 5px; }
.pl-2 { padding-left: 10px; }
.pl-3 { padding-left: 15px; }
.pl-4 { padding-left: 20px; }
.pl-5 { padding-left: 25px; }

/* Horizontal padding (left and right) */
.px-0 { padding-left: 0; padding-right: 0; }
.px-1 { padding-left: 5px; padding-right: 5px; }
.px-2 { padding-left: 10px; padding-right: 10px; }
.px-3 { padding-left: 15px; padding-right: 15px; }
.px-4 { padding-left: 20px; padding-right: 20px; }
.px-5 { padding-left: 25px; padding-right: 25px; }

/* Vertical padding (top and bottom) */
.py-0 { padding-top: 0; padding-bottom: 0; }
.py-1 { padding-top: 5px; padding-bottom: 5px; }
.py-2 { padding-top: 10px; padding-bottom: 10px; }
.py-3 { padding-top: 15px; padding-bottom: 15px; }
.py-4 { padding-top: 20px; padding-bottom: 20px; }
.py-5 { padding-top: 25px; padding-bottom: 25px; }

.table-content { overflow: auto;}
.table-content th { white-space: nowrap; }
.table-content thead { background: #000; color: #fff; }

@media (max-width:768px){
.dataTables_wrapper .dt-buttons { top:-80px; }
.notification-filter-row, .filter-type-group { display: block; }
.notification-filter-form { padding: 15px; }
.filter-type-group label { display: block; margin-bottom: 5px; }
.notification-list-heading { align-items: stretch; flex-direction: column; gap: 0; }
.notification-search-form { justify-content: flex-start; width: 100%; margin-bottom: 15px; }
}

@media (max-width:767px){
    header h1 { font-size: 22px; }
    header .navbar-nav li { width: 100%; }
    .list-inline > li { width: 100%; }
    .login-form h1 { font-size: 25px; }
    .login-form h2 { font-size: 22px; }
    main h2 { font-size: 22px; }
}

@media (max-width:376px){
    .date_group { width: 100%; margin-bottom: 10px; }
    .date_group label { width:40px; }
    .sm-flex-wrap { flex-wrap: wrap; }
}