@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100;200;300;400;500;600;700;800;900&display=swap');

* {
    font-family: 'Noto Sans Thai', sans-serif;
}

:root {
    --color-theme-1: #AC001A;
    --color-theme-2: #F4A535;
    --color-theme-3: #512D03;
}

.text-nowrap {
    white-space: nowrap;
}

.bg-theme-1 {
    background-color: var(--color-theme-1);
}

.bg-theme-2 {
    background-color: var(--color-theme-2);
    color: black;
}

.bg-theme-3 {
    background-color: var(--color-theme-3);
}

.text-theme-1 {
    color: var(--color-theme-1);
}

.text-theme-2 {
    color: var(--color-theme-2);
}

.text-theme-3 {
    color: var(--color-theme-3);
}

.border-theme-1 {
    border-color: var(--color-theme-1);
}

.border-theme-2 {
    border-color: var(--color-theme-2);
}

.border-theme-3 {
    border-color: var(--color-theme-3);
}

.btn-theme-1 {
    background-color: var(--color-theme-1);
    color: white;
    transition: ease 0.2s;
}

.btn-theme-2 {
    background-color: var(--color-theme-2);
    color: var(--color-theme-3);
    transition: ease 0.2s;
}

.btn-theme-3 {
    background-color: var(--color-theme-3);
    color: white;
    transition: ease 0.2s;
}

.btn-theme-1:hover {
    background-color: white;
    border-color: var(--color-theme-1);
    color: var(--color-theme-1);
}

.btn-theme-2:hover {
    background-color: white;
    border-color: var(--color-theme-2);
    color: var(--color-theme-2);
}

.btn-theme-3:hover {
    background-color: white;
    border-color: var(--color-theme-3);
    color: var(--color-theme-3);
}

.table td.fit,
.table th.fit {
    white-space: nowrap;
    width: 1%;
}

th,
td {
    vertical-align: middle !important;
}

.text-overflow {
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.overflow-2 {
    -webkit-line-clamp: 2;
}

.overflow-3 {
    -webkit-line-clamp: 3;
}

.overflow-4 {
    -webkit-line-clamp: 4;
}

.overflow-5 {
    -webkit-line-clamp: 5;
}

.f-shadow {
    text-shadow: 2px 2px 4px #000000;
}

.navbar-nav .nav-link {
    transition: ease 0.2s;
}

.navbar-nav .nav-link,
.navbar-nav .nav-link {
    font-weight: normal;
    color: white;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link:focus,
.navbar-nav .show>.nav-link,
.navbar-nav .nav-link:hover {
    font-weight: 700;
    color: var(--color-theme-2);
}

.dropdown-menu > li:hover > .dropdown-item, 
.dropdown-menu > li:hover > .dropdown-item.active {
    background-color: var(--color-theme-1);
    color: white;
}

#HeaderNavbar a.nav-link {
    font-size: 1.3rem;
}