/*
Theme Name: Service Manager
Version: 1.0
Author: PutaDesign
*/
input[type="number"] { -moz-appearance: textfield; }
@font-face { font-family: "SFUFutura"; src: url("assets/fonts/SFUFutura.woff") format("woff"), url("assets/fonts/SFUFutura.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: "SFUFuturaHeavy"; src: url("assets/fonts/SFUFuturaHeavy.TTF") format("TrueType"); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: "SFUFuturaOblique"; src: url("assets/fonts/SFUFuturaOblique.TTF") format("TrueType"); font-weight: normal; font-style: normal; font-display: swap; }
* { padding: 0; margin: 0; box-sizing: border-box; }
:root { --primary-color: #f68121; --futura-font: "SFUFutura"; --futura-bold-font: "SFUFuturaHeavy"; --futura-oblique-font: "SFUFuturaOblique"; }
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; }
input, button, textarea, select { font-family: var(--futura-font); border: 0; background-color: transparent; }
input:focus-visible, button:focus-visible, textarea:focus-visible { outline: 0; border: 0; }
input[type="date"]::-webkit-inner-spin-button, input[type="date"]::-webkit-calendar-picker-indicator { position: absolute; top: 50%; transform: translateY(-50%); left: 0; }
html { scroll-behavior: smooth; overflow-y: scroll; font-family: var(--futura-font) !important; font-size: 18px; }
body { font-family: var(--futura-font); font-size: 16px; }
a { text-decoration: none; }
li { list-style: none; }
img { width: 100%; height: 100%; object-fit: cover; }
p, li { line-height: 30px; }
.uppercase { text-transform: uppercase; }
.tac { text-align: center; }
.br3px { border-radius: 3px; }
.br5px { border-radius: 5px; }
.br10px { border-radius: 10px; }
.br20px { border-radius: 20px; }
.br30px { border-radius: 30px; }
.br50 { border-radius: 50%; }
.ovh { overflow: hidden; }
.transition-05s { transition: 0.5s; }
.black-text { color: #333; }
.white-text { color: #fff; }
.white-bg { background-color: #fff; }
.futura-bold-font { font-family: var(--futura-bold-font); }
.pr { position: relative; }
.pa { position: absolute; }
.df { display: flex; }
.aic { align-items: center; }
.jcsb { justify-content: space-between; }
.jcc { justify-content: center; }
.fs-14px { font-size: 14px; }
.fs-15px { font-size: 15.5px; }
.fs-18px { font-size: 18px; }
.fs-21px { font-size: 21px; }
.fs-24px { font-size: 24px; }
.fs-28px { font-size: 28px; }
.fw-u { font-weight: unset; }
.fw-b { font-weight: bold; }
.w100 { width: 100%; }
.h100 { height: 100%; }
.container-big, .container-all { padding-left: 15px; padding-right: 15px; margin-right: auto; margin-left: auto; }
.word-break { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.word-break-2 { -webkit-line-clamp: 2; }
.word-break-3 { -webkit-line-clamp: 3; }
.pointer { cursor: pointer; }
article p, article h2, article h3, article h4, article h5, article ul, article ol, article ul li, article ol li { margin: 12px 0; }
main { padding: 50px 0; }
.logo { width: 250px; height: auto; }
table { border-collapse: collapse; border: 1px solid #333; }
table :is(td, th) { border: 1px solid #333; padding: 10px 15px; }
table tr { transition: 0.5s; }
table tr :is(td, th):nth-last-child(3) span:last-child { position: relative; margin-left: 20px; }
table tr :is(td, th):nth-last-child(3) span:last-child:before { content: ""; position: absolute; width: 5px; height: 1px; background-color: #fff; left: -15px; top: 50%; transform: translateY(-50%); }
table tr td:last-child button { padding: 10px; text-decoration: underline; text-align: left; display: block }
table tr td:last-child button + button { margin-top: 10px; }
table tr td[rowspan] { max-width: 315px; }
table tr td ul { padding-left: 20px; }
table tr td ul li { list-style: disc; }
.button-more { text-decoration: underline; }
.quatrang { padding-top: 50px; }
.quatrang .page-numbers { width: 34px; height: 34px; background-color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #333; font-size: 15px; transition: 0.5s; }
.quatrang .page-numbers.current { background-color: var(--primary-color); color: #fff; }
.quatrang .page-numbers + .page-numbers { margin-left: 10px; }
.quatrang .page-numbers:hover { background-color: var(--primary-color); color: #fff; }
.circle-loading { width: 20px; height: 20px; border-radius: 50%; position: relative; margin: 0 auto; }
.circle-loading:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; border: 4px solid transparent; border-right-color: var(--blue-green); border-bottom-color: var(--blue-dark); animation: circleLoading 1s forwards infinite linear; }
.yellow, .green, .red, .disabled { background-color: var(--bg); }
.disabled { filter: contrast(0.8); }
.popup, .popup-resend { width: 60%; padding: 30px; }
.popup-wrap, .popup-resend-wrap { position: fixed; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.4); z-index: 2; opacity: 0; visibility: hidden; }
.popup-wrap.active, .popup-resend-wrap.active { opacity: 1; visibility: visible; }
.popup .close, .popup-resend .close { width: 35px; height: 35px; top: -30px; right: -30px; border: 1px solid #fff; }
.popup #form_service, .popup #form_resend, .popup-resend #form_service, .popup-resend #form_resend { row-gap: 15px; }
.popup #form_service .form-control input, .popup #form_resend .form-control input, .popup-resend #form_service .form-control input, .popup-resend #form_resend .form-control input { padding: 10px 20px; border: 1px solid #ccc; line-height: 22px; }
.popup #form_service button, .popup #form_resend button, .popup-resend #form_service button, .popup-resend #form_resend button { padding: 10px 40px; background-color: #f68121; }
.popup #form_service ul, .popup #form_resend ul, .popup-resend #form_service ul, .popup-resend #form_resend ul { padding-left: 30px; }
.popup #form_service ul li, .popup #form_resend ul li, .popup-resend #form_service ul li, .popup-resend #form_resend ul li { list-style: disc; }
aside { margin-bottom: 30px; }
aside + h2 { margin-bottom: 20px }
aside > ul { display: flex; column-gap: 20px; }
aside > ul li { padding: 10px 20px; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.08); border-radius: 10px; background-color: #fff; }
.search-form input { padding: 15px 20px 15px 55px; background-color: #f4f5fb; border-radius: 50px; min-width: 260px; }
.search-form i { top: 50%; transform: translateY(-50%); left: 25px; color: #ccc; }
.authen_form { flex-direction: column }
.authen_form > h3 { padding: 20px 0 }
.authen_form input[type="submit"] { padding: 8px 30px; background-color: var(--primary-color); font-size: 17px }
.dot-flasing {
  display: flex;
  justify-content: center;
}

.dot-flasing > div {
  margin: 0 3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--primary-color);
  animation: dot-flasing .8s infinite alternate;
}
.dot-flasing > div:first-child { animation-delay: 0s; }
.dot-flasing > div:nth-child(2) { animation-delay: .2s; }
.dot-flasing > div:nth-child(3) { animation-delay: .4s; }
.dot-flasing > div:last-child { animation-delay: .6s; }
@media screen and (min-width: 1300px) { .container-big { max-width: 1520px; }
  .container-all { max-width: 1600px; } }
@media screen and (min-width: 1600px) { .container-big { max-width: 1520px; }
  .container-all { max-width: 1300px; } }
@keyframes circleLoading { to { transform: rotate(360deg); } }
@keyframes dot-flasing { 
  0% { background-color: var(--primary-color); }
  50%, 100% { background-color: #fff; }
}
/*# sourceMappingURL=assets/css/main.css.map */