/*
Theme Name: Flatsome Child (AgentC Safe Edition)
Description: Flatsome Child Theme - Phục hồi tự động Auto Increment & Tối ưu hóa an toàn
Author: AgentC Asia & Thái Việt
Template: flatsome
Version: 2.1.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
/*mophong*/
.thuoc_thi {
  max-width: 100% !important;
}
.show_pt {
  display: none !important;
}
.thi_mo_phong .prev_next_wrap:before {
  background: #fff;
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  z-index: -1;
  width: 100vw;
  margin: 0 0 0 -50vw;
}
.thi_mo_phong .prev_next_wrap {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 9999;
  background: #ffff;
  margin: auto;
  max-width: 1380px;
  padding: 10px;
}
.thi_mo_phong .bo_cau_hoi_wrap.active_pt {
  position: relative;
}
.control_thi {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  margin-bottom: 30px;
}
.control_thi div:first-child {
  background-color: #0fa05e;
  width: 33%;
  max-width: 160px;
  color: #fff;
  display: flex;
  height: 50px;
  align-items: center;
  justify-content: center;
}
.control_thi div {
  cursor: pointer;
}
#video1 {
  margin: 15px 0;
}
.point_thi {
  font-weight: bold;
  font-size: 20px;
  color: red;
}
.control_thi div:nth-child(2) {
  background-color: #0171ec;
  width: 33%;
  max-width: 160px;
  color: #fff;
  display: flex;
  height: 50px;
  align-items: center;
  justify-content: center;
}
.control_thi div:nth-child(3) {
  background-color: #ff9400;
  width: 33%;
  max-width: 160px;
  color: #fff;
  display: flex;
  height: 50px;
  align-items: center;
  justify-content: center;
}
#progressBar {
  width: 100%;
  margin: 10px auto 5px;
  height: 8px;
  background-color: #c1c1c1;
  position: relative;
}
.thuoc_thi {
  width: 0;
  height: 8px;
  background-color: #fff;
  position: relative;
}
.gach_thi {
  height: 100%;
  border-right: 2px solid red;
}
#progressBar .bar {
  height: 100%;
  text-align: right;
  padding: 0;
  line-height: 50px;
  width: 0;
  background-color: #cbea00;
  box-sizing: border-box;
  position: relative;
}
.bar_diem:nth-child(2) {
  background-color: darkgreen;
}
.bar_diem:nth-child(3) {
  background-color: green;
}
.bar_diem:nth-child(4) {
  background-color: yellow;
}
.bar_diem:nth-child(5) {
  background-color: orange;
}
.bar_diem:nth-child(6) {
  background-color: red;
}
.bar_dapan {
  width: 100%;
  margin: 10px auto;
  height: 8px;
  background-color: #fff;
  position: relative;
}
.bar_dapan {
  display: flex;
}
.bar_diem {
  height: 100%;
  display: block;
}
.label {
  overflow: hidden;
  margin-right: 0;
  margin-left: auto;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 3px;
}
#progressBar .label {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%);
  color: #fff;
  font-size: 36px;
  height: 50px;
  display: inline-block;
  line-height: 50px;
}
/*mophong*/
.end_thi {
  text-align: center;
}
.end_thi span {
  display: inline-block;
  padding: 5px 10px;
  background: var(--main);
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  margin-bottom: 15px;
}
.time_thi {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 15px;
}
.countdown_home {
  margin-left: 10px;
}
.answer > div:first-child {
  display: none;
}
.tinhtrang:before {
  content: "";
}
.not_done .tinhtrang:before {
  content: "Chưa trả lời";
  font-weight: bold;
  color: red;
}
.soluong_dapan {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin-bottom: 15px;
  position: sticky;
  top: 0;
  background: #fff;
  padding: 10px;
}
.countdown_home {
  background: #4caf50;
  color: #fff;
  padding: 3px 8px;
}
.ketthuc_thi .answer.correct {
  color: #4caf50;
  font-weight: bold;
}
div[data="false"] .tinhtrang:before {
  content: "\f057";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #f44336;
}
.title_cau {
  display: flex;
  align-items: center;
}
.tinhtrang {
  margin-left: 4px;
}
div[data="true"] .tinhtrang:before {
  content: "\f058";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #4caf50;
}
.done_pt .answer.active {
  color: red;
  font-weight: bold;
}
.done_pt .answer.correct {
  color: #4caf50;
  font-weight: bold;
}
#q-details {
  min-height: 60vh !important;
}
.answer.active:before {
  content: "\f14a";
}
.answer:before {
  content: "\f0c8";
  font-family: "Font Awesome 6 Free";
  font-weight: 400;
  margin-right: 5px;
}
.answer {
  cursor: pointer;
  display: flex;
}
.bo_cau_hoi_wrap {
  display: none;
}
.bo_cau_hoi_wrap.active_pt {
  display: flex;
  position: absolute;
  top: 0;
  z-index: 9;
  background: #fff;
}
.prev_next_wrap > * {
  font-size: 30px;
  cursor: pointer;
}
.prev_next_wrap {
  margin-bottom: 30px;
  display: flex;
  justify-content: space-between;
}
.noidung_cauhoi > div > div:first-child {
  font-size: 20px;
}
.title_ch {
  font-weight: bold;
  color: #000;
  font-size: 20px;
}
.noidung_cauhoi.active_cau {
  display: block;
}
.non_click {
  pointer-events: none;
}
.noidung_cauhoi {
  display: none;
}
.cauhoi_wrap.active_c {
  background: #fff;
}
.cauhoi_wrap {
  padding: 10px;
  padding-bottom: 15px;
  border-bottom: 1px dashed #ddd;
  cursor: pointer;
}
.row_col_thi .icon-box {
  border-radius: 10px;
  background: red;
  padding: 30px 10px;
  width: 100%;
  margin: auto;
  cursor: pointer;
}
.bocauhoi_pt_wrap {
  padding: 15px;
  background: #f1f1f1;
  border-radius: 10px;
}
.thitheobo .bocauhoi {
  height: 65vh;
}
.bocauhoi {
  width: 800px;
  margin: auto;
  overflow: auto;
  height: 70vh;
}
.row_col_thi * {
  color: #fff;
}
.row_col_thi .col:nth-child(1) .icon-box {
  background: green;
}
.row_col_thi .col:nth-child(2) .icon-box {
  background: blue;
}
.row_col_thi .col:nth-child(3) .icon-box {
  background: blueviolet;
}
/*CSS lịch*/
td .label_thi {
  font-size: 10px;
  max-width: calc(100% - 15px);
  word-wrap: break-word;
}
.rel {
  position: relative;
}
.date-picker.has_lich {
  cursor: pointer;
}
.footer-container-calendar {
  display: none;
}
.date-picker {
  cursor: unset;
}
.bg_footer.active {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: #00000099;
  z-index: 99999;
  display: block;
}
.close_this {
  font-size: 30px;
  font-weight: bold;
  position: absolute;
  top: 0;
  right: 0;
  line-height: 1;
  cursor: pointer;
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bg_footer {
  display: none;
}
.qwe.active_show {
  display: block;
  opacity: 1;
  transition: opacity 0.3s;
  position: fixed;
  top: 50%;
}
.qwe {
  display: none;
  opacity: 0;
  position: absolute;
  width: 300px;
  background: #ffeb3b;
  padding: 20px;
  color: #2b2b2b;
  transition: opacity 0.3s;
  left: 50%;
  top: 20%;
  transform: translate(-50%, -50%);
  z-index: 999999;
}
.wrapper {
  margin: 15px auto;
  max-width: 1100px;
}

.container-calendar {
  background: #ffffff;
  padding: 15px;
  max-width: 100%;
  margin: 0 auto;
}
.table-calendar th {
  height: unset !important;
}
.button-container-calendar button {
  cursor: pointer;
  display: inline-block;
  zoom: 1;
  background: #00a2b7;
  color: #fff;
  border: 1px solid #0aa2b5;
  border-radius: 4px;
  padding: 5px 10px;
}
.active_td {
  background: #00a2b7 !important;
  color: #fff !important;
  transition: 0.5s;
}
.table-calendar {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
}
.label_thi {
  color: #78c578;
  border-color: #78c578;
  background: #ebfeeb;
}
.content_thi p {
  margin-bottom: 5px;
}
.content_thi h2 {
  font-size: 30px;
}
.thi_sat_hach {
  color: #e06f6c;
  border-color: #e06f6c;
  background: #ffebea;
}
.table-calendar td,
.table-calendar th {
  padding: 7.5px;
  border: 1px solid #e2e2e2;
  text-align: left;
  vertical-align: top;
  font-size: 18px;
  height: 150px;
  position: relative;
  width: calc(100% / 7);
  max-width: calc(100% / 7);
}
.date-picker span {
  display: block;
  width: max-content;
}
.label_thi {
  display: inline-block !important;
  bottom: 0;
  font-size: 13px;
  left: 0;
  padding: 3px 5px;
  border: 1px solid;
  margin-top: 10px;
  border-radius: 5px;
}
.date-picker.selected {
  font-weight: bold;
  outline: 1px dashed #00bcd4;
}

.date-picker.selected span {
  border-bottom: 2px solid currentColor;
}

/* sunday */
.date-picker:nth-child(1) {
  color: red;
}
#monthAndYear {
  text-align: center;
  margin-top: 0;
}
#monthAndYear {
  -ms-flex-negative: 1;
  -ms-flex-preferred-size: auto !important;
  flex: 1;
}
.button-container-calendar {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.footer-container-calendar {
  margin-top: 1em;
  border-top: 1px solid #dadada;
  padding: 10px 0;
}

.footer-container-calendar select {
  cursor: pointer;
  display: inline-block;
  zoom: 1;
  background: #ffffff;
  color: #585858;
  border: 1px solid #bfc5c5;
  border-radius: 3px;
  padding: 5px 1em;
}
/*CSs lịch*/
:root {
  --main: #233e81;
  --sec: #fdda02;
}
.khoa_hoc {
  color: #6ab0de;
  border-color: #6ab0de;
  background: #ebf5fc;
}
.flex_wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}
.label_thi + .label_thi {
  margin-left: 5px;
}
#monthAndYear {
  color: var(--main);
}
#thead-month th {
  color: var(--main);
}
.row_contact .col-inner {
  padding: 30px;
  background: #f5f5f5;
  border-radius: 10px;
}
.custom_arc.accordion .toggle {
  left: unset;
  right: 0;
}
.custom_arc .icon-angle-down:before {
  content: "\f067";
}
.custom_arc .icon-angle-down {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  font-size: 14px;
}
.custom_arc .accordion-title {
  padding-left: 5px;
}
.row_contact p {
  margin-bottom: 5px;
  font-size: 18px;
}
.col_home_1 .section-title-main {
  font-size: 20px;
}
.col_home_1 .box-vertical .box-text {
  padding-bottom: 5px;
}
.blog_1 + .img,
.blog_1 + .img + .img {
  margin-bottom: 1rem !important;
}
.box-vertical .box-text {
  vertical-align: top;
}
.blog_1.row-small > .col {
  padding-bottom: 1rem;
}
.blog-post-inner .button:after {
  content: "\f061";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}
.is-divider {
  display: none;
}
.box-vertical .box-image {
  vertical-align: top;
}
.var-sec .section-title-main {
  color: var(--sec);
}
.blog_2 .box-text {
  padding-bottom: 0;
}
.col-inner.dark .section-title-main {
  color: #fff;
}
.col_border .col-inner {
  padding: 35px;
  box-shadow: 4px 10px 25px rgb(0 0 0 / 8%);
  border-radius: 10px;
}
.blog_2 .col.post-item {
  padding-bottom: 10px;
  padding-top: 10px;
  border-bottom: 1px solid #ddd;
}
.row_blog_kienthuc .col {
  padding-bottom: 0;
}
.col_video .col-inner {
  background: #000;
  padding: 10px;
}
.post-title {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin-bottom: 15px !important;
}
.blog_chuongtrinh .col.post-item:hover .box-text {
  background: var(--sec);
}
.blog-post-inner .button {
  color: #6ab0de;
  font-weight: 300;
  margin-right: 0;
  margin-left: auto;
  display: block;
  bottom: 0;
  right: 0;
}
.blog_chuongtrinh .box-text {
  padding: 15px 30px;
  border: 1px solid #ddd;
}
.html_topbar_left {
  color: var(--main);
  font-size: 17px !important;
}
.var-main span {
  color: var(--main);
}
.section-title-container * {
  border-bottom: 0 !important;
}
.section-title-container {
  margin-bottom: 0;
}
body .flickity-page-dots {
  bottom: -30px;
}
.slider-nav-light.slider-nav-dots-simple .flickity-page-dots .dot.is-selected {
  background-color: var(--main);
  border-color: var(--main);
  width: 30px;
  border-radius: 30px;
}
.slider-nav-light .flickity-prev-next-button {
  color: var(--sec);
}
.flickity-prev-next-button {
  width: 50px;
}
.slider-nav-light .flickity-prev-next-button .arrow,
.slider-nav-light .flickity-prev-next-button svg {
  fill: var(--sec);
}
.slider-nav-light.slider-nav-dots-simple .flickity-page-dots .dot {
  background-color: var(--sec);
  border-color: var(--sec);
  height: 8px;
  width: 8px;
}
#masthead .header-nav-main.nav-right {
  height: 110px;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
}
.header-main .nav > li > a {
  padding: 0 20px;
}
.header-main .nav > li:hover > a {
  background: var(--sec);
  color: var(--main);
}
.header-main .nav > li.current-menu-item > a {
  background: var(--sec);
  color: var(--main);
}
#masthead .nav > li {
  margin: 0;
}
.icon_home_2 .icon-box-img {
  background: var(--sec);
  padding: 10px;
  border-radius: 15px;
  object-fit: cover;
  height: 80px;
  display: flex;
  align-items: center;
}
h3.section-title {
  font-size: 27px;
}
.icon_box_home .icon-box-img {
  background: var(--sec);
  padding: 20px;
  border-radius: 30px;
  object-fit: cover;
  height: 125px;
}
.icon_box_home .icon-box-img img {
  width: auto;
  object-fit: cover;
  height: 88px;
}
.section-title-container b {
  opacity: 0;
}
.row_tienich .col {
  padding-bottom: 0;
}
.row_tienich .col-inner {
  padding: 20px 35px;
  border: 1px solid var(--sec);
  border-radius: 5px;
}
.icon_home_2 img {
  width: 60px;
  object-fit: cover;
  height: auto;
}
#footer .section-title-main {
  font-size: 20px;
  color: var(--sec);
}
#footer .col {
  padding-bottom: 0;
}
#footer .section-title {
  margin-bottom: 0;
}
.row_taisao .icon-box-img {
  background: var(--sec);
  padding: 20px;
  border-radius: 30px;
  object-fit: cover;
  height: 125px;
}
.row_taisao .icon-box-img img {
  width: auto;
  object-fit: cover;
  height: 88px;
}
.row_taisao .col-inner {
  padding: 30px 60px;
  border: 1px solid var(--sec);
  border-radius: 5px;
}
.row_taisao h3 {
  font-size: 24px;
}
.form_custom input {
  margin-bottom: 0;
  height: 50px;
  border-radius: 8px;
}
form {
  margin-bottom: 0;
}
.header-main .nav > li > a {
  font-size: 17px;
}
.blog_chuongtrinh .col {
  padding-bottom: 0;
}
.col_home_1 .post-item:hover .box-vertical .box-text,
.blog_2 .post-item:hover .box-text {
  background: var(--sec);
}
.form_custom input:focus {
  box-shadow: 0 0 5px var(--main);
}
.form_custom extarea,
.form_custom select {
  margin-bottom: 0;
  border-radius: 8px;
}
.row_pt_custom * {
  padding-bottom: 0;
  margin-bottom: 0;
}
.row_pt_custom:after {
  background: #f7f8f9;
  content: "";
  height: 100%;
  display: block;
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  z-index: -1;
  width: 100vw;
  margin: 0 0 0 -50vw;
}
.product-breadcrumb-container {
  padding: 10px 0 10px;
}
.page-title.shop-page-title {
  background: #f7f8f9;
  padding-bottom: 10px;
}
.row_pt_custom {
  position: relative;
  z-index: 1;
}
h1.page-title {
  font-size: 40px;
}
.category .box-text {
  padding: 30px;
}
.category .post-item .col-inner {
  box-shadow: 4px 10px 25px rgb(0 0 0 / 8%);
  border-radius: 10px;
}
.category .post-title {
  font-size: 20px;
}
.abs_img {
  width: 300px !important;
  position: absolute;
  top: -30px;
  z-index: -1;
  opacity: 0.1;
  left: 100px;
}
.button-container-calendar button {
  margin: 0 !important;
}
#monthAndYear {
  margin-bottom: 0;
}
@media only screen and (max-width: 48em) {
  /*************** ADD MOBILE ONLY CSS HERE  ***************/
  h1.page-title {
    font-size: 30px;
  }
  .button-container-calendar span {
    display: none;
  }
  .container-calendar {
    padding: 0;
  }
  .table-calendar td,
  .table-calendar th {
    font-size: 12px;
    padding: 4px;
  }
  .table-calendar tr > * {
    width: 100px;
    max-width: 100px;
  }
  .table-calendar td,
  .table-calendar th {
    height: 100px;
  }
  .html_topbar_left {
    font-size: 14px !important;
  }
  .col_border .col-inner {
    padding: 20px;
  }
  .table-calendar {
    width: 800px;
  }
  .label_thi {
    font-size: 10px;
  }
  .table_wrap {
    overflow-x: auto;
    flex-flow: unset;
    display: -webkit-box;
  }
  .row_taisao .col-inner {
    padding: 30px 20px;
  }
  #footer .col {
    padding-bottom: 10px;
  }
  .box.box-vertical {
    display: flex;
  }
  .box-vertical .box-text {
    padding: 10px !important;
    padding-top: 0 !important;
  }
  .box-vertical .box-image {
    width: 30% !important;
  }
  .stack_mb .icon-box {
    display: flex;
    width: 100%;
  }
  .icon_box_home .icon-box-img {
    margin: 0;
    width: 60px !important;
    padding: 10px;
    border-radius: 5px;
    height: 60px;
  }
  .icon_box_home .icon-box-text {
    margin: 0 0 0 15px;
    -ms-flex-negative: 1;
    -ms-flex-preferred-size: auto !important;
    flex: 1;
    text-align: left;
    align-items: center;
    display: flex;
  }
  .icon_box_home .icon-box-text br {
    display: none;
  }
  .icon_box_home .icon-box-img img {
    height: 40px;
  }
  h3.section-title {
    font-size: 23px;
  }
  .blog_chuongtrinh .col {
    padding-bottom: 20px;
  }
  .section {
    padding: 15px 0 !important;
  }
  .blog_2 .col-inner {
    padding: 10px;
  }
  .blog-post-inner .button {
    margin-top: 0;
  }
  .blog_2 .col-inner {
    border-bottom: 1px solid #ddd;
  }
  .post-title {
    margin-bottom: 0;
  }
  .page-id-561 #footer {
    display: none;
  }
  .bocauhoi {
    width: calc(100vw - 25px);
  }
  #q-details {
    min-height: calc(100vh - 220px) !important;
  }
}

/* Responsive table scrolling for search pages.
   Scoped to mobile only: on desktop this forced every td (incl. long addresses)
   to stay on one line + min-width:950px, which made the table overflow and
   require horizontal scrolling even when the viewport had plenty of room. */
@media (max-width: 768px) {
  .tracuu-table-responsive {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin-bottom: 20px !important;
    /* Mobile browsers hide the native scrollbar by default; force a visible
       one so users see the same horizontal drag bar as on desktop. */
    scrollbar-width: thin !important; /* Firefox */
    scrollbar-color: #cbd5e1 #f1f5f9 !important; /* Firefox: thumb / track */
  }
  .tracuu-table-responsive::-webkit-scrollbar {
    display: block !important;
    height: 8px !important;
  }
  .tracuu-table-responsive::-webkit-scrollbar-track {
    background: #f1f5f9 !important;
    border-radius: 10px !important;
  }
  .tracuu-table-responsive::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 10px !important;
  }
  .tracuu-table-responsive::-webkit-scrollbar-thumb:hover {
    background: #94a3b8 !important;
  }
  .tracuu-table-responsive .tracuu-results-table {
    min-width: 950px !important;
    width: 100% !important;
    table-layout: auto !important;
  }
  .tracuu-table-responsive .tracuu-results-table th,
  .tracuu-table-responsive .tracuu-results-table td {
    white-space: nowrap !important;
  }
}