/* ============================================
   MSTAR CORP BRAND GUIDELINES v2.0
   Full UI/UX audit fix
   Brand: Mstar Corp
   ============================================ */

/* --- Brand Color Variables --- */
:root {
  --mstar-primary: #09783E;
  --mstar-primary-dark: #065C2E;
  --mstar-primary-light: #0F8744;
  --mstar-accent: #61CE70;
  --mstar-cta: #FA8905;
  --mstar-cta-hover: #E07B00;
  --mstar-text: #3C4043;
  --mstar-text-dark: #202124;
  --mstar-text-muted: #5F6368;
  --mstar-bg-light: #F8F9FA;
  --mstar-border: #E8EAED;
  --mstar-footer-bg: #1A1A2E;
  --mstar-surface: #FFFFFF;
}

/* --- Typography: Match home page fonts --- */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap");

body,
#wrapper-container {
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif !important;
  color: var(--mstar-text) !important;
  line-height: 1.7;
}

h1, h2, h3, h4, h5, h6,
.thim-sc-heading .title,
.sc_heading .title,
.widget-title,
.elementor-heading-title {
  font-family: "Outfit", sans-serif !important;
  color: var(--mstar-text-dark) !important;
  letter-spacing: -0.3px;
}

/* --- Global Links --- */
a { color: var(--mstar-primary); transition: color 0.2s ease; }
a:hover { color: var(--mstar-primary-dark); }

/* --- Header / Nav (Eduma pages) --- */
.site-header {
  background: rgba(255,255,255,0.95) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--mstar-border);
}

.site-header .navigation .width-navigation .inner-navigation > ul > li > a {
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  letter-spacing: 0.3px;
  transition: color 0.2s ease;
}

/* --- Page Heading Banner --- */
.top_heading,
.thim-page-title {
  background: linear-gradient(135deg, #065C2E 0%, #0F8744 100%) !important;
  padding: 60px 0 !important;
}

.top_heading h1,
.thim-page-title h1,
#main-content > .container > .row > h1 {
  font-family: "Outfit", sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -1px;
}

/* --- Breadcrumbs --- */
.thim-breadcrumbs,
.breadcrumbs {
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 14px;
}

.breadcrumbs span a { color: var(--mstar-text-muted); }
.breadcrumbs span a:hover { color: var(--mstar-primary); }
.breadcrumbs span.current { color: var(--mstar-text-dark); font-weight: 500; }

/* --- Buttons --- */
.thim-sc-button .thim-button,
form.search-courses .search-button,
.lp-button,
input[type="submit"],
.elementor-button,
button.button,
.thim-enroll-course-button .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background-color: var(--mstar-primary) !important;
  border-color: var(--mstar-primary) !important;
  color: #ffffff !important;
  border-radius: 8px;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-weight: 600;
  padding: 12px 28px;
  transition: all 0.25s ease;
}

.thim-sc-button .thim-button:hover,
form.search-courses .search-button:hover,
.lp-button:hover,
input[type="submit"]:hover,
.elementor-button:hover,
button.button:hover,
.thim-enroll-course-button .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background-color: var(--mstar-cta) !important;
  border-color: var(--mstar-cta) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(250, 137, 5, 0.3);
}

/* --- Course Cards (Eduma pages) --- */
.thim-course-grid .course-item,
.thim-course-list .course-item {
  border-radius: 12px !important;
  overflow: hidden;
  border: 1px solid var(--mstar-border) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: all 0.3s ease;
}

.thim-course-grid .course-item:hover,
.thim-course-list .course-item:hover {
  box-shadow: 0 8px 24px rgba(9, 120, 62, 0.1) !important;
  transform: translateY(-2px);
  border-color: rgba(9, 120, 62, 0.2) !important;
}

.thim-course-content {
  padding: 20px !important;
}

.thim-course-content .course-title {
  font-family: "Outfit", sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
}

.thim-course-content .course-title a {
  color: var(--mstar-text-dark) !important;
}

.thim-course-content .course-title a:hover {
  color: var(--mstar-primary) !important;
}

.course-meta .course-meta-field .value {
  color: var(--mstar-primary) !important;
  font-weight: 600;
}

/* "Miễn Phí" price tag */
.course-item .course-price .free-course,
.course-item .course-price .price {
  color: var(--mstar-primary) !important;
  font-family: "Outfit", sans-serif !important;
  font-weight: 700;
}

/* --- Sidebar --- */
.sidebar .widget-title,
#secondary .widget-title {
  font-family: "Outfit", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--mstar-text-dark) !important;
  text-transform: none !important;
  letter-spacing: 0;
}

.sidebar .widget a,
#secondary .widget a {
  color: var(--mstar-text) !important;
  font-size: 14px;
}

.sidebar .widget a:hover,
#secondary .widget a:hover {
  color: var(--mstar-primary) !important;
}

/* --- Form Focus States --- */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  border-color: var(--mstar-primary) !important;
  box-shadow: 0 0 0 3px rgba(9, 120, 62, 0.1);
  outline: none;
}

/* --- Eduma Footer: match home page footer style --- */
.footer-area {
  background-color: #1A1A2E !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
}

.footer-area .widget-title,
.footer-area h4 {
  font-family: "Outfit", sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: #ffffff !important;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.footer-area,
.footer-area p,
.footer-area li {
  color: #9AA0A6 !important;
  font-size: 14px;
}

.footer-area a {
  color: #9AA0A6 !important;
}

.footer-area a:hover {
  color: var(--mstar-accent) !important;
}

.copyright-area {
  background-color: #141425 !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
}

.copyright-area,
.copyright-area p,
.copyright-area a {
  color: #64748B !important;
  font-size: 13px;
}

/* --- Pagination --- */
.learn-press-pagination ul li .page-numbers,
.navigation.pagination .page-numbers {
  border-radius: 8px !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-weight: 500;
}

.learn-press-pagination ul li .page-numbers.current,
.navigation.pagination .page-numbers.current {
  background-color: var(--mstar-primary) !important;
  border-color: var(--mstar-primary) !important;
  color: #ffffff !important;
}

/* --- Heading Accent Line --- */
.thim-sc-heading .line,
.sc_heading .line {
  background-color: var(--mstar-primary) !important;
}

/* --- Selection --- */
::selection {
  background-color: var(--mstar-primary);
  color: #ffffff;
}

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: var(--mstar-primary); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--mstar-primary-dark); }

/* --- Back to Top --- */
#back-to-top {
  background-color: var(--mstar-primary) !important;
  border-radius: 8px !important;
}
#back-to-top:hover {
  background-color: var(--mstar-cta) !important;
}

/* --- Progress Bar --- */
.learn-press-progress .progress-bg .progress-active,
.lp-course-progress .progress-bg .progress-active {
  background-color: var(--mstar-primary) !important;
}

/* --- LearnPress Course Page --- */
.learn-press-nav-tabs .course-nav.active a,
#learn-press-course-tabs .course-nav.active a {
  color: var(--mstar-primary) !important;
  border-bottom-color: var(--mstar-primary) !important;
}

/* --- Toolbar & Search --- */
form.search-courses input[type="text"],
.thim-search-course-form input {
  font-family: "Plus Jakarta Sans", sans-serif !important;
  border-radius: 8px !important;
}

/* --- Sort dropdown --- */
.courses-sorting .orderby select {
  font-family: "Plus Jakarta Sans", sans-serif !important;
  border-radius: 8px !important;
}

/* Fix: Page heading text contrast on green banner */
.top_heading h1,
.thim-page-title h1,
.top_heading .heading__primary,
.thim-page-title .heading__primary {
  color: #FFFFFF !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

/* Fix: Sub-heading text on banner */
.top_heading .heading__secondary,
.thim-page-title .heading__secondary {
  color: rgba(255,255,255,0.8) !important;
}

/* Fix: Page heading left border accent */
.top_heading .heading__primary::before,
.thim-page-title .heading__primary::before,
.top_heading .container > *:first-child::before {
  background-color: var(--mstar-accent) !important;
}

/* ============================================
   ELON AUDIT FIXES v2.1
   ============================================ */

/* --- 1. HIDE search bar on nav --- */
.site-header .widget_search,
.site-header .search-form,
.site-header .header-search,
.site-header form[role="search"],
.site-header .thim-search-box,
#masthead .widget_search,
.navigation .widget.widget_search,
.menu_right .widget_search,
.menu_right {
  display: none !important;
}

/* --- 2. HIDE "Đăng nhập" button on nav --- */
.site-header .thim-login-popup,
.site-header .thim-link-login,
.site-header .register-login,
.site-header .bp-menu,
.site-header a[href*="dang-nhap"],
.site-header a[href*="login"],
.site-header .thim-widget-login-popup,
.site-header .thim-account {
  display: none !important;
}

/* --- 3. "Liên Hệ" menu item = CTA button --- */
.site-header .navigation .inner-navigation > ul > li:last-child > a {
  background-color: var(--mstar-primary) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  padding: 10px 24px !important;
  font-weight: 600 !important;
  transition: all 0.25s ease !important;
}

.site-header .navigation .inner-navigation > ul > li:last-child > a:hover {
  background-color: var(--mstar-cta) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(250, 137, 5, 0.3);
}

/* Dark mode CTA button */
body.dark-mode .site-header .navigation .inner-navigation > ul > li:last-child > a {
  background-color: var(--mstar-primary) !important;
  color: #ffffff !important;
}

body.dark-mode .site-header .navigation .inner-navigation > ul > li:last-child > a:hover {
  background-color: var(--mstar-cta) !important;
}

/* --- 4. Course cards: match home page style --- */
.thim-course-grid .course-item,
.thim-course-list .course-item {
  border: 1px solid var(--mstar-border) !important;
  border-radius: 16px !important;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--mstar-surface) !important;
}

.thim-course-grid .course-item:hover,
.thim-course-list .course-item:hover {
  box-shadow: 0 12px 32px rgba(9, 120, 62, 0.1) !important;
  transform: translateY(-4px);
  border-color: rgba(9, 120, 62, 0.15) !important;
}

/* Course card thumbnail */
.thim-course-grid .course-item .course-thumbnail,
.thim-course-list .course-item .course-thumbnail {
  border-radius: 16px 16px 0 0 !important;
  overflow: hidden;
}

.thim-course-grid .course-item .course-thumbnail img,
.thim-course-list .course-item .course-thumbnail img {
  transition: transform 0.4s ease;
}

.thim-course-grid .course-item:hover .course-thumbnail img,
.thim-course-list .course-item:hover .course-thumbnail img {
  transform: scale(1.03);
}

/* Course card content area */
.thim-course-content {
  padding: 20px 20px 16px !important;
}

/* Author name */
.thim-course-content .course-author,
.course-item .course-author {
  font-size: 13px !important;
  color: var(--mstar-text-muted) !important;
  font-weight: 500;
  margin-bottom: 6px;
}

/* Course title */
.thim-course-content .course-title {
  font-family: "Outfit", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  margin-bottom: 12px !important;
}

/* Course meta (lessons, students) */
.course-meta {
  border-top: 1px solid var(--mstar-border) !important;
  padding-top: 12px !important;
  margin-top: 12px !important;
}

.course-meta .course-meta-field {
  font-size: 13px !important;
  color: var(--mstar-text-muted) !important;
}

/* Price badge */
.course-item .course-price .free-course {
  background: rgba(9, 120, 62, 0.08) !important;
  color: var(--mstar-primary) !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* Divider line under title (Eduma default) → match brand */
.thim-course-content .course-title::after {
  background-color: var(--mstar-primary) !important;
}

/* --- 5. Toolbar / Sort bar cleanup --- */
.thim-course-top {
  border: 1px solid var(--mstar-border) !important;
  border-radius: 12px !important;
  padding: 12px 20px !important;
  background: var(--mstar-surface) !important;
  margin-bottom: 24px !important;
}

.thim-course-top select {
  border-radius: 8px !important;
  border-color: var(--mstar-border) !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
}

.thim-course-top input[type="text"] {
  border-radius: 8px !important;
  border-color: var(--mstar-border) !important;
}

/* --- 6. Sidebar categories: modern style --- */
.sidebar .thim-course-categories li,
.sidebar .widget_course_categories li,
.sidebar .widget_categories li {
  padding: 8px 0 !important;
  border-bottom: 1px solid var(--mstar-border);
  font-size: 14px;
}

.sidebar .thim-course-categories li:last-child,
.sidebar .widget_course_categories li:last-child,
.sidebar .widget_categories li:last-child {
  border-bottom: none;
}

.sidebar .thim-course-categories li a,
.sidebar .widget_course_categories li a,
.sidebar .widget_categories li a {
  color: var(--mstar-text) !important;
  font-weight: 500;
  transition: color 0.2s ease;
}

.sidebar .thim-course-categories li a:hover,
.sidebar .widget_course_categories li a:hover,
.sidebar .widget_categories li a:hover {
  color: var(--mstar-primary) !important;
  padding-left: 4px;
}

/* Category count badge */
.sidebar .thim-course-categories li .count,
.sidebar .widget_course_categories li .count,
.sidebar .widget_categories li .count {
  background: var(--mstar-bg-light) !important;
  color: var(--mstar-text-muted) !important;
  border-radius: 20px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
}

/* --- 7. Dark mode: course cards consistent --- */
body.dark-mode .thim-course-grid .course-item,
body.dark-mode .thim-course-list .course-item {
  background: #1E293B !important;
  border-color: #334155 !important;
}

body.dark-mode .thim-course-grid .course-item:hover,
body.dark-mode .thim-course-list .course-item:hover {
  box-shadow: 0 12px 32px rgba(0,0,0,0.4) !important;
  border-color: #475569 !important;
}

body.dark-mode .course-meta {
  border-top-color: #334155 !important;
}

body.dark-mode .course-item .course-price .free-course {
  background: rgba(97, 206, 112, 0.1) !important;
  color: var(--mstar-accent) !important;
}

body.dark-mode .thim-course-top {
  background: #1E293B !important;
  border-color: #334155 !important;
}

body.dark-mode .sidebar .thim-course-categories li,
body.dark-mode .sidebar .widget_categories li {
  border-bottom-color: #334155;
}

body.dark-mode .sidebar .thim-course-categories li .count,
body.dark-mode .sidebar .widget_categories li .count {
  background: #334155 !important;
  color: #94A3B8 !important;
}

/* --- 8. Hide broken instructor avatars in course cards --- */
.thim-course-content .course-author img,
.course-item .course-author img,
.course-item .course-author .author-avatar,
.thim-course-content .author-avatar {
  display: none !important;
}

/* --- 9. Hide BuddyPress "ae" icon on header --- */
.site-header .thim-widget-login-popup,
.site-header #wp-admin-bar-bp-notifications,
.site-header .bp-menu,
.site-header .thim-account,
.site-header a.thim-login-popup,
#header-login-popup-form,
.navigation .menu_right {
  display: none !important;
}

/* --- 10. "LIÊN HỆ" CTA: also target by link text --- */
.site-header .navigation .inner-navigation > ul > li > a[href*="contact"],
.site-header .navigation .inner-navigation > ul > li > a[href*="lien-he"] {
  background-color: var(--mstar-primary) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  padding: 10px 24px !important;
  font-weight: 600 !important;
}

.site-header .navigation .inner-navigation > ul > li > a[href*="contact"]:hover,
.site-header .navigation .inner-navigation > ul > li > a[href*="lien-he"]:hover {
  background-color: var(--mstar-cta) !important;
  box-shadow: 0 4px 12px rgba(250, 137, 5, 0.3);
}


/* --- 11. Hide empty menu-right + stray icons --- */
.site-header .width-navigation > .menu-right {
  display: none !important;
}

/* --- 12. Hide broken instructor avatars --- */
.thim-course-content .course-author img,
.course-item .course-author img {
  display: none !important;
}

/* --- 13. LIÊN HỆ CTA button (by href) --- */
.site-header .navigation .inner-navigation > ul > li > a[href*="#contact"] {
  background-color: var(--mstar-primary) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  padding: 10px 24px !important;
  font-weight: 600 !important;
  transition: all 0.25s ease !important;
}

.site-header .navigation .inner-navigation > ul > li > a[href*="#contact"]:hover {
  background-color: var(--mstar-cta) !important;
  box-shadow: 0 4px 12px rgba(250, 137, 5, 0.3);
}

body.dark-mode .site-header .navigation .inner-navigation > ul > li > a[href*="#contact"] {
  background-color: var(--mstar-primary) !important;
  color: #ffffff !important;
}

/* --- 14. Hide floating chat widget that overlaps nav --- */
.TnITTtw-fp-collapsed-button,

[class*="fp-collapsed-button"] {
  display: none !important;
}

/* --- 14b. Hide TranslatePress floating widget (274 elements!) --- */
[class*="TnITTtw"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -9999px !important;
}