/* =======================================================
   BIẾN MÀU THƯƠNG HIỆU (BRAND VARIABLES)
   ======================================================= */
:root {
  --brand-1: #020165; /* Xanh tím đậm */
  --brand-2: #F1280D; /* Cam đỏ */
  --brand-grad: linear-gradient(270deg, var(--brand-2) 0%, var(--brand-1) 100%);
  --brand-grad-135: linear-gradient(135deg, var(--brand-2) 0%, var(--brand-1) 100%);
}

/* =======================================================
   1. GỠ UNDERLINE MENU & CÁC LINK TIÊU ĐỀ
   ======================================================= */

/* Menu các cấp (Header, Dropdown, Mobile) */
.header-nav-main .nav > li > a,
.nav-dropdown > li > a,
.mobile-nav li > a {
  text-decoration: none !important;
  border: none !important;
  box-shadow: none !important;
  background: none !important;
}
/* Xoá pseudo line animation của Flatsome */
.header-nav-main .nav > li > a::after,
.nav-dropdown > li > a::after {
  content: none !important;
  display: none !important;
}
/* Đổi màu chữ khi hover/active trên menu */
.header-nav-main .nav > li > a:hover,
.header-nav-main .nav > li.active > a,
.header-nav-main .nav > li.current-menu-item > a {
  color: var(--brand-2) !important;
}

/* Tiêu đề bài viết và các link khác (KHÔNG áp dụng cho .button) */
.entry-title a,
.post-title a:not(.button),
.widget a:not(.button) {
  text-decoration: none !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--brand-1) !important;
}
.entry-title a:hover,
.post-title a:not(.button):hover,
.widget a:not(.button):hover {
  color: var(--brand-2) !important;
}

/* =======================================================
   2. BUTTONS & MORE-LINKS (FIX TRIỆT ĐỂ)
   ======================================================= */

/* Nút mặc định (Primary) */
.button.primary,
.button:not(.is-outline):not(.is-link),
a.more-link,
input[type="submit"] {
  background: var(--brand-grad) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Nút Outline */
.button.is-outline {
  background: transparent !important;
  color: var(--brand-2) !important;
  border: 2px solid var(--brand-2) !important;
  border-radius: 6px !important;
  transition: all 0.2s ease;
}

/* Hover cho tất cả các loại button */
.button.primary:hover,
.button:not(.is-outline):not(.is-link):hover,
a.more-link:hover,
input[type="submit"]:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}
.button.is-outline:hover {
  background: var(--brand-grad) !important;
  color: #fff !important;
  border-color: transparent !important;
  transform: translateY(-1px);
}

/* =======================================================
   3. SIDEBAR WIDGETS
   ======================================================= */
.post-sidebar .widget .widget-title {
  color: #fff !important;
  background: var(--brand-grad) !important;
  border: none !important;
  padding: 10px 15px;
  line-height: normal;
  height: auto;
}
.post-sidebar .widget img {
  border-radius: 8px;
}

/* =======================================================
   4. CÁC STYLE RIÊNG (KHÓA HỌC, TABS...)
   ======================================================= */

/* ----- TABS ACF TRÊN TRANG KHOÁ HỌC ----- */
.single-khoa-hoc ul.tabs {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 3px solid #ddd;
}
.single-khoa-hoc ul.tabs li a {
  display: inline-block;
  padding: 12px 22px;
  border: 1px solid #ddd !important;
  border-bottom: none !important;
  border-radius: 6px 6px 0 0;
  background: #f9f9f9;
  font-weight: 600;
  transition: all .25s ease;
}
.single-khoa-hoc ul.tabs li a:hover {
  background: var(--brand-2) !important;
  color: #fff !important;
  border-color: var(--brand-2) !important;
}
.single-khoa-hoc ul.tabs li a.active {
  background: var(--brand-1) !important;
  color: #fff !important;
  border-color: var(--brand-1) !important;
}
.single-khoa-hoc .tabcontent {
  display: none;
  padding: 25px;
  border: 1px solid #ddd;
  border-top: none;
  background: #fff;
}
.single-khoa-hoc .tabcontent:first-of-type { display: block; }
@media (max-width: 768px) {
  .single-khoa-hoc ul.tabs { flex-direction: column; }
  .single-khoa-hoc ul.tabs li a {
    border-radius: 6px;
    margin-bottom: 5px;
    border-bottom: 1px solid #ddd !important;
  }
}

/* ----- CARD KHÓA HỌC ----- */
.khoa-hoc-item .box .box-image {
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
}
.khoa-hoc-item .box .box-image img {
  transition: transform .45s ease;
}
.khoa-hoc-item .box .box-image:hover img {
  transform: scale(1.06);
}
.khoa-hoc-item .box .box-image::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .35s ease;
  background: var(--brand-grad-135);
}
.khoa-hoc-item .box .box-image:hover::before {
  opacity: 1;
}
.khoa-hoc-item .box .box-image .course_readmore {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  opacity: 0;
  transition: all .28s ease;
}
.khoa-hoc-item .box .box-image:hover .course_readmore {
  opacity: 1;
}
.khoa-hoc-item .box .box-image .course_readmore a {
  border: 2px solid #fff;
  background: transparent;
  color: #fff;
  font-weight: 700;
}
.khoa-hoc-item .box .box-image .course_readmore a:hover {
  background: #fff;
  color: var(--brand-2);
}