/* ==========================================================================
   HOC247 SHOP MARKETPLACE & PRODUCT STOREFRONT STYLES
   Scope: body.hoc247-shop-marketplace, body.hoc247-product-detail,
          body.post-type-archive-product, body.tax-product_cat, body.tax-product_tag
   Modern Udemy-inspired card design:
   - 16:9 uncropped image frames with contain mode
   - Restrained rounded borders (8px) and subtle shadows
   - 2-line course titles, author/provider subtitle, compact metadata
   - Bold sale prices with muted struck-through regular prices
   - Outlined purple add-to-cart buttons
   - Desktop hover popover preview with viewport collision management
   - Dedicated "Bảng xếp hạng khóa học (HOC247 lựa chọn)" shelf
   - Unified course cards for related products and upsells
   ========================================================================== */

/* 1. Container & Layout rộng (Unified 1680px Storefront Shell) */
body.home #content .ast-container,
body.front-page #content .ast-container,
body.page-template-default #content .ast-container,
body.hoc247-shop-marketplace #content .ast-container,
body.single-product #content .ast-container,
body.tax-product_cat #content .ast-container,
body.tax-product_tag #content .ast-container,
body.post-type-archive-product #content .ast-container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.home #primary,
body.home .site-main,
body.front-page #primary,
body.front-page .site-main,
body.hoc247-shop-marketplace #primary,
body.hoc247-shop-marketplace .site-main,
body.hoc247-shop-marketplace .ast-woocommerce-container,
body.single-product #primary,
body.single-product .site-main,
body.tax-product_cat #primary,
body.tax-product_cat .site-main,
body.tax-product_tag #primary,
body.tax-product_tag .site-main,
body.post-type-archive-product #primary,
body.post-type-archive-product .site-main {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* Eliminate horizontal 100vw breakout offset */
.acx-homepage,
.cflic-news-page,
.cflic-notifications-page,
.cflic-contact-page,
.acx-category-archive-page {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* Unified 1680px Outer Shell with 24px desktop / 16px mobile gutters */
.cflic-marketplace-wrapper,
.acx-container,
.acx-hero-wrap,
.cflic-news-container,
.cflic-notifications-container,
.cflic-contact-container,
.acx-category-archive-page > .acx-container,
body.single-product .ast-woocommerce-container,
body.tax-product_cat .ast-woocommerce-container,
body.tax-product_tag .ast-woocommerce-container,
body.post-type-archive-product:not(.hoc247-shop-marketplace) .ast-woocommerce-container {
  max-width: 1680px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 24px 24px 48px !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  .cflic-marketplace-wrapper,
  .acx-container,
  .acx-hero-wrap,
  .cflic-news-container,
  .cflic-notifications-container,
  .cflic-contact-container,
  .acx-category-archive-page > .acx-container,
  body.single-product .ast-woocommerce-container,
  body.tax-product_cat .ast-woocommerce-container,
  body.tax-product_tag .ast-woocommerce-container,
  body.post-type-archive-product:not(.hoc247-shop-marketplace) .ast-woocommerce-container {
    padding: 16px 16px 36px !important;
  }
}

/* Notices styling */
.cflic-marketplace-wrapper .woocommerce-notices-wrapper {
  margin-bottom: 24px;
}

.cflic-marketplace-wrapper .woocommerce-notices-wrapper:empty {
  display: none !important;
  margin: 0 !important;
}

.cflic-marketplace-wrapper .woocommerce-error,
.cflic-marketplace-wrapper .woocommerce-info,
.cflic-marketplace-wrapper .woocommerce-message {
  margin: 0 0 16px 0 !important;
  border-radius: 6px;
}

.cflic-marketplace-hero {
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e2e8f0;
}

.cflic-marketplace-title {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 26px;
  line-height: 1.3;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 6px 0;
}

.cflic-marketplace-subtitle {
  font-size: 14.5px;
  line-height: 1.5;
  color: #475569;
  margin: 0;
}

.cflic-marketplace-empty {
  font-size: 15px;
  color: #64748b;
  padding: 36px 0;
}

/* 2. Shelf Header */
.cflic-marketplace-shelf {
  margin-bottom: 40px;
  position: relative;
}

.cflic-shelf-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 16px;
}

.cflic-shelf-title-wrap {
  min-width: 0;
}

.cflic-shelf-title-inline {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.cflic-shelf-heading {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 4px 0;
}

.cflic-ranking-choice-badge {
  display: inline-block;
  background: #fef3c7;
  color: #92400e;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 4px;
  border: 1px solid #fde68a;
  line-height: 1.3;
}

.cflic-shelf-desc {
  font-size: 13.5px;
  color: #64748b;
  margin: 0;
  line-height: 1.4;
}

.cflic-shelf-view-all {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 600;
  color: #1d4f91;
  text-decoration: none;
  white-space: nowrap;
  padding: 4px 0;
  transition: color 0.15s ease;
}

.cflic-shelf-view-all:hover {
  color: #0d3268;
  text-decoration: underline;
}

.cflic-arrow-symbol {
  display: inline-block;
  transition: transform 0.15s ease;
}

.cflic-shelf-view-all:hover .cflic-arrow-symbol {
  transform: translateX(3px);
}

/* 3. Shelf Viewport & Horizontal Track */
.cflic-shelf-viewport {
  position: relative;
  width: 100%;
}

.cflic-shelf-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  padding: 6px 2px 16px 2px;
}

.cflic-shelf-track::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

/* 4. Scroll Buttons (Prev/Next) — Neutral Udemy-Style */
.cflic-shelf-nav {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #d1d5db;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
  color: #1e293b;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  padding: 0;
}

.cflic-shelf-prev {
  left: -20px;
}

.cflic-shelf-next {
  right: -20px;
}

.cflic-shelf-nav:hover:not(:disabled) {
  background: #f8fafc;
  color: #0f172a;
  border-color: #94a3b8;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.18);
  transform: translateY(-50%) scale(1.05);
}

.cflic-shelf-nav:focus-visible {
  outline: 2px solid #0796d8;
  outline-offset: 2px;
}

.cflic-shelf-nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
  background: #ffffff;
  border-color: #e2e8f0;
  color: #94a3b8;
  box-shadow: none;
  transform: translateY(-50%);
}

@media (max-width: 1024px) {
  .cflic-shelf-nav {
    display: none !important;
  }
}

/* 4b. Homepage Carousel Arrows — Neutral Udemy-Style Controls */
.acx-slider-outer > .acx-arrows .acx-arrow {
  pointer-events: auto !important;
  flex-shrink: 0 !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: 1px solid #d1d5db !important;
  background: #ffffff !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease !important;
  padding: 0 !important;
  color: #1e293b !important;
}

.acx-slider-outer > .acx-arrows .acx-arrow svg {
  width: 18px !important;
  height: 18px !important;
  stroke: #1e293b !important;
  stroke-width: 2.2 !important;
  fill: none !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.acx-slider-outer > .acx-arrows .acx-arrow:hover:not(:disabled):not(.swiper-button-disabled) {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.18) !important;
  transform: scale(1.06) !important;
}

.acx-slider-outer > .acx-arrows .acx-arrow:hover:not(:disabled):not(.swiper-button-disabled) svg {
  stroke: #0f172a !important;
}

.acx-slider-outer > .acx-arrows .acx-arrow:focus-visible {
  outline: 2px solid #0796d8 !important;
  outline-offset: 2px !important;
}

.acx-slider-outer:has(.acx-slider-wrap.no-prev) > .acx-arrows .acx-arrow-prev,
.acx-slider-outer > .acx-arrows .acx-arrow-prev.swiper-button-disabled,
.acx-slider-outer > .acx-arrows .acx-arrow-prev:disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.acx-slider-outer:has(.acx-slider-wrap.no-prev) > .acx-arrows .acx-arrow-prev svg,
.acx-slider-outer > .acx-arrows .acx-arrow-prev.swiper-button-disabled svg,
.acx-slider-outer > .acx-arrows .acx-arrow-prev:disabled svg {
  stroke: #94a3b8 !important;
}

.acx-slider-outer:has(.acx-slider-wrap.no-next) > .acx-arrows .acx-arrow-next,
.acx-slider-outer > .acx-arrows .acx-arrow-next.swiper-button-disabled,
.acx-slider-outer > .acx-arrows .acx-arrow-next:disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.acx-slider-outer:has(.acx-slider-wrap.no-next) > .acx-arrows .acx-arrow-next svg,
.acx-slider-outer > .acx-arrows .acx-arrow-next.swiper-button-disabled svg,
.acx-slider-outer > .acx-arrows .acx-arrow-next:disabled svg {
  stroke: #94a3b8 !important;
}

/* 5. Reusable Course Card (Udemy-Style) */
.cflic-marketplace-card {
  flex: 0 0 calc((100% - (4 * 16px)) / 5); /* 5 cards on wide desktop */
  min-width: 240px;
  max-width: 320px;
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  display: flex;
  flex-direction: column;
  position: relative;
}

@media (max-width: 1400px) {
  .cflic-marketplace-card {
    flex: 0 0 calc((100% - (3 * 16px)) / 4); /* 4 cards */
  }
}

@media (max-width: 1080px) {
  .cflic-marketplace-card {
    flex: 0 0 calc((100% - (2 * 14px)) / 3); /* 3 cards */
    min-width: 210px;
  }
}

@media (max-width: 680px) {
  .cflic-marketplace-card {
    flex: 0 0 calc(78% - 8px); /* ~1.25 cards on mobile */
    min-width: 210px;
  }
}

/* Swiper Slide Integration: Ensure cards take full width & uniform height inside Swiper */
.swiper-slide .cflic-marketplace-card {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.acx-slider-wrap .swiper-slide {
  height: auto !important;
  display: flex !important;
}

.cflic-marketplace-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.09);
  transform: translateY(-2px);
}

.cflic-card-thumb-link {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
}

.cflic-card-title-link {
  color: #0f172a !important;
  text-decoration: none !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 2.7em;
}

.cflic-card-title-link:hover,
.cflic-card-title-link:focus {
  color: #1d4f91 !important;
  text-decoration: underline !important;
}

/* Card Ranking Tag (#1, #2...) */
.cflic-rank-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 5;
  background: #0f172a;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 4px;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Explicit "Xem nhanh" Course Description Preview Button on Card */
.cflic-card-quickview-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  background: rgba(15, 23, 42, 0.82);
  color: #ffffff !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(4px);
  transition: all 0.18s ease;
  text-decoration: none !important;
}

@media (min-width: 993px) {
  /* On desktop, hover is the primary course preview interaction following the Udemy reference.
     The dark button overlay is removed from desktop presentation so it does not obscure the artwork.
     Keyboard users access course details via tabbing onto the card title, which naturally reveals the popover. */
  .cflic-card-quickview-btn {
    display: none !important;
  }
}

@media (max-width: 992px) {
  /* On mobile/touch viewports, display accessible tap button */
  .cflic-card-quickview-btn {
    opacity: 1;
    pointer-events: auto;
    display: inline-flex !important;
  }
}


.cflic-card-quickview-btn:hover {
  background: #0092e8;
  border-color: #0081cc;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 146, 232, 0.4);
}

.cflic-card-quickview-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0092e8;
}

.cflic-quickview-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  stroke: currentColor;
}

@media (max-width: 768px) {
  .cflic-card-quickview-btn {
    top: 6px;
    right: 6px;
    padding: 5px 8px;
    font-size: 11px;
  }
}

/* 6. Card Thumbnail 16:9 (Uncropped Contain Default) */
.cflic-card-thumb-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #f8fafc;
  overflow: hidden;
  position: relative;
  display: block;
  border-bottom: 1px solid #f1f5f9;
}

.cflic-card-thumb {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #f8fafc;
}

.cflic-card-thumb.cflic-img-contain {
  object-fit: contain !important;
  background: #f8fafc;
}

.cflic-card-thumb.cflic-img-cover {
  object-fit: cover !important;
}

/* Strictly preserve artwork: NO hover scale that crops text */
.cflic-marketplace-card:hover .cflic-card-thumb {
  transform: none !important;
}

/* 7. Card Body */
.cflic-card-body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

/* Course Title: 2-line clamped space */
.cflic-card-title {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 3px 0;
}

/* Author / Provider */
.cflic-card-author {
  font-size: 12px;
  line-height: 1.3;
  color: #64748b;
  margin: 0 0 5px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Metadata Row: Badge + Rating + Count */
.cflic-card-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 8px 0;
}

.cflic-card-meta-row:empty {
  display: none !important;
  margin: 0 !important;
}

/* Badges */
.cflic-card-badge {
  display: inline-block;
  font-size: 11px !important;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  line-height: 1.25;
  letter-spacing: 0.01em;
  white-space: nowrap;
  vertical-align: middle;
  flex-shrink: 0;
}

.cflic-badge-bestseller {
  background: #eceb98;
  color: #3d3c0a;
}

.cflic-badge-premium {
  background: #ede9fe;
  color: #5b21b6;
}

.cflic-badge-trending {
  background: #e0f2fe;
  color: #0369a1;
}

/* Rating score & stars */
.cflic-rating-number {
  font-size: 13px;
  font-weight: 800;
  color: #b4690e;
  line-height: 1;
}

.cflic-stars-wrap {
  display: inline-flex;
  align-items: center;
}

.cflic-stars-outer {
  position: relative;
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  color: #cbd5e1;
}

.cflic-stars-outer::before {
  content: "★★★★★";
}

.cflic-stars-inner {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  overflow: hidden;
  color: #e59819;
}

.cflic-stars-inner::before {
  content: "★★★★★";
}

.cflic-rating-provenance {
  font-size: 11px;
  color: #475569;
  background: #f1f5f9;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 500;
}

.cflic-rating-count {
  font-size: 12px;
  color: #64748b;
  font-weight: 400;
}

/* Price & Action Row */
.cflic-card-price-action-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid #f1f5f9;
}

.cflic-card-price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.25;
  justify-content: flex-end;
}

/* Sale: Effective price on top (order: 1), original price below (order: 2) */
.cflic-card-price ins {
  order: 1;
  font-size: 15px;
  font-weight: 800;
  color: #1c1d1f;
  text-decoration: none;
  display: block;
  line-height: 1.2;
}

.cflic-card-price ins .amount,
.cflic-card-price > .amount,
.cflic-card-price .cflic-price-current {
  font-size: 15px;
  font-weight: 800;
  color: #1c1d1f;
  text-decoration: none;
  line-height: 1.2;
}

.cflic-card-price del {
  order: 2;
  font-size: 12.5px;
  font-weight: 400;
  color: #6a6f73;
  text-decoration: line-through;
  display: block;
  line-height: 1.2;
}

.cflic-card-price del .amount,
.cflic-card-price .cflic-price-original {
  font-size: 12.5px;
  font-weight: 400;
  color: #6a6f73;
  text-decoration: line-through;
}

.cflic-card-price small {
  order: 3;
  font-size: 11px;
  color: #6a6f73;
}

/* Outlined Brand Add-to-cart Button */
.cflic-card-btn-wrap {
  flex-shrink: 0;
}

.cflic-btn-purple-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #0092e8 !important;
  color: #0092e8 !important;
  background: transparent !important;
  font-family: inherit;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 5px 12px !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  line-height: 1.3 !important;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.cflic-btn-purple-outline:hover {
  background: #0092e8 !important;
  color: #ffffff !important;
  border-color: #0092e8 !important;
  box-shadow: 0 2px 8px rgba(0, 146, 232, 0.25);
}

/* 8. Desktop Hover Popover */
.cflic-popover {
  position: fixed;
  z-index: 999999;
  width: 360px;
  max-width: calc(100vw - 32px);
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.2);
  padding: 18px;
  box-sizing: border-box;
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.18s ease;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Invisible pointer bridge preventing mouseout during travel between card and popover */
.cflic-popover::before {
  content: "";
  position: absolute;
  top: -14px;
  bottom: -14px;
  left: -20px;
  right: -20px;
  z-index: -1;
  pointer-events: auto;
}

.cflic-popover.is-visible {
  opacity: 1;
}

.cflic-popover-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cflic-popover-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cflic-popover-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
}

.cflic-popover-category {
  font-size: 11.5px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.cflic-popover-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: #0f172a;
  margin: 0;
}

.cflic-popover-author-row {
  font-size: 12px;
  color: #64748b;
}

.cflic-popover-rating-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.cflic-popover-desc {
  font-size: 13px;
  line-height: 1.5;
  color: #334155;
  max-height: 180px;
  overflow-y: auto;
}

.cflic-popover-desc.cflic-popover-desc-empty {
  font-style: italic;
  color: #64748b;
}

.cflic-popover-more-wrap {
  margin-top: 2px;
  margin-bottom: 2px;
}

.cflic-popover-more-link {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  color: #0092e8;
  text-decoration: none;
  transition: color 0.15s ease;
}

.cflic-popover-more-link:hover {
  color: #0081cc;
  text-decoration: underline;
}

.cflic-popover-close-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: #64748b;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, background-color 0.15s ease;
  z-index: 2;
}

.cflic-popover-close-btn:hover,
.cflic-popover-close-btn:focus-visible {
  color: #0f172a;
  background: #f1f5f9;
  outline: none;
}

.cflic-popover-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(2px);
  z-index: 999998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.cflic-popover-backdrop.is-visible {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 768px) {
  .cflic-popover {
    position: fixed !important;
    left: 16px !important;
    right: 16px !important;
    bottom: 24px !important;
    top: auto !important;
    width: auto !important;
    max-width: calc(100vw - 32px) !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    margin: 0 auto !important;
    border-radius: 12px !important;
    padding: 20px 20px 24px !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35) !important;
    z-index: 999999 !important;
  }
}

.cflic-popover-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  margin-top: 4px;
  border-top: 1px solid #f1f5f9;
}

.cflic-popover-price {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
}

.cflic-popover-price del {
  font-size: 12.5px;
  font-weight: 400;
  color: #94a3b8;
  margin-right: 4px;
}

.cflic-popover-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0092e8 !important;
  color: #ffffff !important;
  border: 1px solid #0092e8 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 8px 16px !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.cflic-popover-btn:hover {
  background: #0081cc !important;
  border-color: #0081cc !important;
  color: #ffffff !important;
}

/* 9. Related Products Section on Product Detail */
.cflic-related-section-wrap {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 24px 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

@media (max-width: 992px) {
  .cflic-related-section-wrap {
    margin: 32px 0 24px 0 !important;
  }
}

.cflic-related-shelf .cflic-shelf-heading {
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
}

/* 10. Product Detail Page Hero Enhancement (body.single-product) */
body.single-product div.product {
  position: relative;
}

/* Purposeful 2-column desktop detail layout:
   - Two columns side by side directly beside each other:
     * Media column: calc(58% - 16px) (~680px at 1280px, ~889px at 1600px)
     * Purchase summary column: calc(42% - 16px) (~488px at 1280px, ~639px at 1600px)
     * Column gap: 32px (strictly within 24-40px target, zero artificial spacing)
     * Row gap: 36px (governs distance to full width description tabs)
   - Top-aligned (topDiff == 0px)
   - Stacked layout at tablet/mobile (<= 1024px) with 16px gutters, image first, summary follows
*/
@media (min-width: 1025px) {
  body.single-product div.product {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    row-gap: 36px !important;
    column-gap: 32px !important;
    gap: 36px 32px !important;
  }

  body.single-product div.product div.images {
    flex: 0 0 calc(58% - 16px) !important;
    width: calc(58% - 16px) !important;
    max-width: none !important;
    min-width: 380px !important;
    float: none !important;
    margin: 0 !important;
  }

  body.single-product div.product div.summary {
    flex: 0 0 calc(42% - 16px) !important;
    width: calc(42% - 16px) !important;
    max-width: none !important;
    min-width: 320px !important;
    float: none !important;
    margin: 0 !important;
  }

  body.single-product div.product .woocommerce-tabs,
  body.single-product div.product .cflic-related-section-wrap,
  body.single-product div.product .up-sells,
  body.single-product div.product .related {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.single-product div.product .woocommerce-tabs {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}

@media (max-width: 1024px) {
  body.single-product .ast-woocommerce-container {
    padding: 16px 16px 36px !important;
  }
  body.single-product div.product {
    display: block !important;
  }
  body.single-product div.product div.images,
  body.single-product div.product div.summary {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }
  body.single-product div.product div.images {
    margin: 0 0 24px 0 !important;
  }
  body.single-product div.product div.summary {
    margin: 0 0 24px 0 !important;
  }
  body.single-product div.product .woocommerce-tabs {
    margin-bottom: 0 !important;
  }
  .cflic-related-section-wrap {
    margin: 32px 0 24px 0 !important;
  }
}

/* Hero image frame & sizing: Purposeful 16:9 media frame filling width/height */
body.single-product div.product div.images {
  margin: 0;
}

body.single-product div.product div.images .woocommerce-product-gallery__wrapper,
body.single-product div.product div.images .woocommerce-product-gallery__image {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  background: #0f172a !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  border: 1px solid #e2e8f0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

body.single-product div.product div.images .woocommerce-product-gallery__image a {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.single-product div.product div.images img.wp-post-image,
body.single-product div.product div.images .woocommerce-product-gallery__image img,
body.single-product div.product div.images img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  display: block !important;
  margin: 0 auto !important;
  border-radius: 0 !important;
}

/* Dynamic contain vs cover setting */
body.single-product.cflic-fit-cover div.product div.images img.wp-post-image,
body.single-product.cflic-fit-cover div.product div.images .woocommerce-product-gallery__image img,
body.single-product div.product div.images img.cflic-img-cover {
  object-fit: cover !important;
}

body.single-product.cflic-fit-contain div.product div.images img.wp-post-image,
body.single-product.cflic-fit-contain div.product div.images .woocommerce-product-gallery__image img,
body.single-product div.product div.images img.cflic-img-contain,
body.single-product:not(.cflic-fit-cover) div.product div.images img.wp-post-image {
  object-fit: contain !important;
}

/* Product Summary Typography */
body.single-product div.product .product_title {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 26px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  color: #0f172a !important;
  margin: 0 0 10px 0 !important;
}

.cflic-single-product-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 16px 0;
}

.cflic-single-author {
  font-size: 13.5px;
  color: #64748b;
  margin-left: 4px;
}

.cflic-single-author .cflic-author-name {
  color: #1e293b;
  font-weight: 600;
}

body.single-product div.product .woocommerce-product-details__short-description {
  font-size: 15px;
  line-height: 1.6;
  color: #334155;
  margin-bottom: 18px;
}

/* Single product price */
body.single-product div.product p.price,
body.single-product div.product span.price {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin-bottom: 20px !important;
}

body.single-product div.product p.price del,
body.single-product div.product span.price del {
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #94a3b8 !important;
  margin-right: 8px !important;
}

body.single-product div.product p.price ins,
body.single-product div.product span.price ins {
  text-decoration: none !important;
  color: #0f172a !important;
}

/* Brand Add to Cart CTA on Product Detail */
body.single-product div.product form.cart .single_add_to_cart_button {
  background: #0092e8 !important;
  color: #ffffff !important;
  border: 1px solid #0092e8 !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  padding: 12px 28px !important;
  border-radius: 6px !important;
  transition: all 0.15s ease !important;
}

body.single-product div.product form.cart .single_add_to_cart_button:hover {
  background: #0081cc !important;
  border-color: #0081cc !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 146, 232, 0.25) !important;
}

/* 11. Category & Tag Archives Grid View */
body.tax-product_cat .woocommerce-products-header,
body.tax-product_tag .woocommerce-products-header {
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
}

body.tax-product_cat .woocommerce-products-header .woocommerce-products-header__title,
body.tax-product_tag .woocommerce-products-header .woocommerce-products-header__title {
  margin: 0 0 6px 0 !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
}

body.tax-product_cat .woocommerce-notices-wrapper:empty,
body.tax-product_tag .woocommerce-notices-wrapper:empty {
  display: none !important;
  margin: 0 !important;
}

body.tax-product_cat ul.products,
body.tax-product_tag ul.products,
body.post-type-archive-product ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 20px !important;
  padding: 0 !important;
  margin: 20px 0 !important;
  list-style: none !important;
}

body.tax-product_cat ul.products::before,
body.tax-product_cat ul.products::after,
body.tax-product_tag ul.products::before,
body.tax-product_tag ul.products::after,
body.post-type-archive-product ul.products::before,
body.post-type-archive-product ul.products::after {
  display: none !important;
}

body.tax-product_cat ul.products li.product,
body.tax-product_tag ul.products li.product,
body.post-type-archive-product ul.products li.product,
.woocommerce ul.products li.product.cflic-archive-product-item {
  margin: 0 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.woocommerce ul.products li.product.cflic-archive-product-item .cflic-marketplace-card {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 auto !important;
  height: 100% !important;
}

/* 11. Single Product Page Merchandising Meta Row & Hierarchy */
.cflic-single-product-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 10px 0 16px 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: #1c1d1f;
}

.cflic-single-product-meta-row .cflic-rating-number {
  font-size: 15px;
  font-weight: 800;
  color: #b4690e;
}

.cflic-single-product-meta-row .cflic-stars-outer {
  font-size: 14px;
}

.cflic-single-product-meta-row .cflic-rating-count {
  font-size: 13.5px;
  color: #0092e8;
  font-weight: 500;
}

.cflic-single-product-meta-row .cflic-single-author {
  font-size: 13.5px;
  color: #6a6f73;
}

.cflic-single-product-meta-row .cflic-author-name {
  color: #0092e8;
  font-weight: 600;
}

.hoc247-product-detail .summary .price {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #1c1d1f !important;
  margin-bottom: 16px !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 12px !important;
}

.hoc247-product-detail .summary .price del {
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #6a6f73 !important;
}

.hoc247-product-detail .summary .single_add_to_cart_button {
  background: #0092e8 !important;
  border-color: #0092e8 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
  padding: 12px 28px !important;
  font-size: 15px !important;
  transition: all 0.2s ease !important;
}

.hoc247-product-detail .summary .single_add_to_cart_button:hover {
  background: #0081cc !important;
  border-color: #0081cc !important;
}

/* ==========================================================================
   Udemy-Style Course Includes & Curriculum Breakdown (HOC247 Practice Tests)
   ========================================================================== */

.cflic-udemy-curriculum-wrap {
  margin-top: 36px;
  font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #1c1d1f;
}

/* Snippet 43 Override: Ensure curriculum wrap is visible */
body.single-product .cflic-udemy-curriculum-wrap {
  display: block !important;
}

body.single-product .cflic-udemy-curriculum-wrap .cflic-includes-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 18px 32px !important;
}

body.single-product .cflic-udemy-curriculum-wrap .cflic-includes-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 14px !important;
}

body.single-product .cflic-udemy-curriculum-wrap .cflic-includes-icon {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #005bbb !important;
}

body.single-product .cflic-udemy-curriculum-wrap .cflic-includes-text {
  flex: 1 !important;
  display: block !important;
}

body.single-product .cflic-udemy-curriculum-wrap .cflic-question-label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

body.single-product .cflic-udemy-curriculum-wrap .cflic-question-input {
  width: auto !important;
  min-width: 170px !important;
  display: inline-block !important;
}

body.single-product .cflic-udemy-curriculum-wrap .cflic-curriculum-subheader,
body.single-product .cflic-udemy-curriculum-wrap .cflic-section-header,
body.single-product .cflic-udemy-curriculum-wrap .cflic-curriculum-item-row,
body.single-product .cflic-udemy-curriculum-wrap .cflic-item-info,
body.single-product .cflic-udemy-curriculum-wrap .cflic-item-meta,
body.single-product .cflic-udemy-curriculum-wrap .cflic-preview-badge-row,
body.single-product .cflic-udemy-curriculum-wrap .cflic-player-controls,
body.single-product .cflic-udemy-curriculum-wrap .cflic-player-times,
body.single-product .cflic-udemy-curriculum-wrap .cflic-quiz-header,
body.single-product .cflic-udemy-curriculum-wrap .cflic-quiz-actions,
body.single-product .cflic-udemy-curriculum-wrap .cflic-success-badge {
  display: flex !important;
}

body.single-product .cflic-udemy-curriculum-wrap [hidden],
body.single-product .cflic-udemy-curriculum-wrap [style*="display: none"],
body.single-product .cflic-udemy-curriculum-wrap [style*="display:none"] {
  display: none !important;
}

body.single-product:has(.cflic-udemy-curriculum-wrap) .flic-description-toggle,
body.single-product .flic-description-content:has(.cflic-udemy-curriculum-wrap) ~ .flic-description-toggle {
  display: none !important;
}

body.single-product:has(.cflic-udemy-curriculum-wrap) .flic-description-content::after,
body.single-product .flic-description-content:has(.cflic-udemy-curriculum-wrap)::after {
  display: none !important;
}

/* 1. Box "Khóa thi thử này bao gồm:" (Udemy 2-column feature highlight card) */
.cflic-course-includes-box {
  border: 1px solid #d1d7dc;
  border-radius: 8px;
  padding: 24px 28px;
  margin-bottom: 36px;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.cflic-includes-title {
  font-size: 20px;
  font-weight: 700;
  color: #1c1d1f;
  margin: 0 0 20px 0;
  letter-spacing: -0.2px;
}

.cflic-includes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 32px;
}

.cflic-includes-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.cflic-includes-icon {
  color: #005bbb;
  flex-shrink: 0;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cflic-includes-icon svg {
  display: block;
}

.cflic-includes-text {
  flex: 1;
}

.cflic-includes-item-title {
  font-size: 14.5px;
  font-weight: 700;
  color: #1c1d1f;
  display: block;
  line-height: 1.4;
}

.cflic-includes-item-desc {
  font-size: 13px;
  color: #6a6f73;
  margin: 4px 0 0 0;
  line-height: 1.45;
}

/* 2. Box "Nội dung khóa thi thử" (Udemy-style curriculum breakdown) */
.cflic-curriculum-wrap {
  margin-bottom: 32px;
}

.cflic-curriculum-title {
  font-size: 22px;
  font-weight: 700;
  color: #1c1d1f;
  margin: 0 0 8px 0;
  letter-spacing: -0.3px;
}

.cflic-curriculum-subheader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  font-size: 14px;
  color: #2d2f31;
}

.cflic-curriculum-stats {
  color: #6a6f73;
  font-size: 14px;
  font-weight: 500;
}

.cflic-curriculum-toggle-all {
  background: none;
  border: none;
  padding: 0;
  font-size: 14px;
  font-weight: 700;
  color: #005bbb;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  transition: color 0.15s ease;
}

.cflic-curriculum-toggle-all:hover {
  color: #003b82;
  text-decoration: underline;
}

.cflic-curriculum-accordion {
  border: 1px solid #d1d7dc;
  border-radius: 6px;
  overflow: hidden;
  background: #ffffff;
}

.cflic-curriculum-section {
  border-bottom: 1px solid #d1d7dc;
}

.cflic-curriculum-section:last-child {
  border-bottom: none;
}

.cflic-section-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: #f7f9fa;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease;
}

.cflic-section-header:hover {
  background: #f0f3f5;
}

.cflic-section-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cflic-section-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #2d2f31;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.cflic-curriculum-section.is-open .cflic-section-chevron {
  transform: rotate(180deg);
}

.cflic-section-heading {
  font-size: 15px;
  font-weight: 700;
  color: #1c1d1f;
  line-height: 1.4;
}

.cflic-section-summary {
  font-size: 13.5px;
  color: #6a6f73;
  flex-shrink: 0;
  margin-left: 16px;
}

.cflic-section-content {
  background: #ffffff;
}

.cflic-section-items-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cflic-curriculum-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px 12px 36px;
  border-bottom: 1px solid #f2f4f7;
  font-size: 14px;
}

.cflic-curriculum-item-row:last-child {
  border-bottom: none;
}

.cflic-curriculum-item-row.has-preview {
  background: #fdfefe;
}

.cflic-item-info {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #2d2f31;
  flex: 1;
}

.cflic-item-icon {
  color: #6a6f73;
  display: inline-flex;
  flex-shrink: 0;
}

.cflic-item-title {
  font-size: 14px;
  color: #2d2f31;
  line-height: 1.4;
}

.cflic-item-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  margin-left: 16px;
}

.cflic-item-preview-badge {
  font-size: 12px;
  font-weight: 700;
  color: #005bbb;
  background: rgba(0, 91, 187, 0.08);
  padding: 3px 10px;
  border-radius: 4px;
}

.cflic-item-duration {
  font-size: 13px;
  color: #6a6f73;
  font-variant-numeric: tabular-nums;
}

/* 3. Interactive Preview Card & Audio Player */
.cflic-preview-wrapper-item {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cflic-interactive-preview {
  background: #f8fafc;
  border: 1.5px solid #005bbb;
  border-radius: 8px;
  padding: 22px 24px;
  margin: 8px 20px 20px 20px;
  box-shadow: 0 4px 16px rgba(0, 91, 187, 0.08);
}

.cflic-preview-card-header {
  margin-bottom: 16px;
}

.cflic-preview-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.cflic-pulse-dot {
  width: 8px;
  height: 8px;
  background: #10b981;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: cflicPulse 1.8s infinite;
}

@keyframes cflicPulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

.cflic-preview-live-tag {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #005bbb;
  background: #e0f2fe;
  padding: 3px 10px;
  border-radius: 12px;
  text-transform: uppercase;
}

.cflic-preview-card-title {
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  letter-spacing: -0.2px;
}

/* Audio Player */
.cflic-audio-player-wrapper {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 14px 20px;
  margin: 16px 0 20px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.cflic-player-controls {
  display: flex;
  align-items: center;
  gap: 16px;
}

.cflic-play-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #005bbb;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.15s ease, background 0.15s ease;
}

.cflic-play-btn:hover {
  background: #004b99;
  transform: scale(1.05);
}

.cflic-play-btn:active {
  transform: scale(0.96);
}

.cflic-player-progress-area {
  flex: 1;
}

.cflic-player-times {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  color: #64748b;
  margin-bottom: 6px;
  font-weight: 500;
}

.cflic-player-track-name {
  font-weight: 600;
  color: #1e293b;
}

.cflic-progress-bar-wrap {
  width: 100%;
  height: 6px;
  background: #e2e8f0;
  border-radius: 3px;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

.cflic-progress-bar {
  height: 100%;
  background: #005bbb;
  border-radius: 3px;
  width: 0%;
  transition: width 0.1s linear;
}

.cflic-player-extra-controls {
  flex-shrink: 0;
}

.cflic-speed-btn {
  font-size: 12px;
  font-weight: 700;
  color: #005bbb;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 5px 9px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.cflic-speed-btn:hover {
  background: #e2e8f0;
}

/* Sample Interactive Practice Box */
.cflic-sample-quiz-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 18px 22px;
  margin-top: 14px;
}

.cflic-quiz-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.cflic-quiz-icon {
  font-size: 18px;
}

.cflic-quiz-title {
  font-size: 15.5px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.cflic-quiz-instruction {
  font-size: 14px;
  color: #475569;
  margin: 0 0 10px 0;
}

.cflic-quiz-context {
  background: #f8fafc;
  border-left: 3px solid #005bbb;
  padding: 8px 14px;
  font-size: 13.5px;
  color: #1e293b;
  margin-bottom: 16px;
  border-radius: 0 4px 4px 0;
}

.cflic-quiz-questions-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cflic-quiz-question-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cflic-question-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 14.5px;
  color: #1e293b;
  font-weight: 500;
}

.cflic-question-input {
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 4px !important;
  padding: 6px 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  min-width: 170px !important;
  outline: none !important;
  transition: border-color 0.2s, background 0.2s !important;
}

.cflic-question-input:focus {
  border-color: #005bbb !important;
  box-shadow: 0 0 0 2px rgba(0, 91, 187, 0.15) !important;
}

.cflic-question-input.is-correct {
  border-color: #10b981 !important;
  background: #ecfdf5 !important;
  color: #065f46 !important;
}

.cflic-question-input.is-wrong {
  border-color: #f59e0b !important;
  background: #fffbeb !important;
  color: #92400e !important;
}

.cflic-question-hint {
  font-size: 13px;
  color: #92400e;
  background: #fef3c7;
  border-radius: 4px;
  padding: 6px 12px;
  line-height: 1.4;
}

.cflic-quiz-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}

.cflic-check-answer-btn {
  background: #005bbb;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  transition: background 0.2s ease, transform 0.1s ease;
}

.cflic-check-answer-btn:hover {
  background: #004b99;
  transform: translateY(-1px);
}

.cflic-check-answer-btn:active {
  transform: translateY(0);
}

.cflic-retry-btn {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 9px 18px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease;
}

.cflic-retry-btn:hover {
  background: #e2e8f0;
}

.cflic-quiz-success-box {
  background: #ecfdf5;
  border: 1.5px solid #10b981;
  border-radius: 6px;
  padding: 16px 20px;
  margin-top: 16px;
  animation: cflicFadeIn 0.3s ease;
}

@keyframes cflicFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.cflic-success-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: #065f46;
  margin-bottom: 6px;
}

.cflic-success-text {
  font-size: 13.5px;
  color: #047857;
  line-height: 1.5;
  margin: 0 0 12px 0;
}

.cflic-success-cta-btn {
  background: #005bbb;
  color: #ffffff !important;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: background 0.2s ease;
}

.cflic-success-cta-btn:hover {
  background: #004b99;
}

/* Text, Writing and Speaking Preview Cards */
.cflic-reading-passage-quote {
  font-style: italic;
  font-size: 14px;
  color: #334155;
  border-left: 3px solid #005bbb;
  padding: 8px 14px;
  background: #ffffff;
  margin: 12px 0 16px 0;
  line-height: 1.6;
}

.cflic-prompt-content {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 16px 18px;
}

.cflic-prompt-text {
  font-size: 14px;
  color: #1e293b;
  line-height: 1.55;
  margin: 0 0 10px 0;
}

.cflic-prompt-requirement {
  font-size: 13.5px;
  color: #475569;
  margin: 0 0 12px 0;
}

.cflic-ai-rubric-box,
.cflic-recorder-feature-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #f1f5f9;
  border-radius: 4px;
  padding: 10px 14px;
  font-size: 13px;
  color: #0f172a;
  line-height: 1.45;
}

.cflic-speaking-questions-list {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 14px 18px 14px 34px;
  margin: 0 0 14px 0;
  font-size: 14px;
  color: #1e293b;
}

.cflic-speaking-questions-list li {
  margin-bottom: 8px;
  line-height: 1.45;
}

.cflic-speaking-questions-list li:last-child {
  margin-bottom: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .cflic-includes-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .cflic-course-includes-box {
    padding: 18px 20px;
  }

  .cflic-curriculum-subheader {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .cflic-section-header {
    padding: 14px 16px;
  }

  .cflic-section-heading {
    font-size: 14px;
  }

  .cflic-curriculum-item-row {
    padding: 10px 16px 10px 24px;
  }

  .cflic-interactive-preview {
    margin: 8px 10px 16px 10px;
    padding: 16px;
  }

  .cflic-player-controls {
    flex-wrap: wrap;
  }

  .cflic-player-progress-area {
    width: 100%;
    order: 3;
    margin-top: 8px;
  }

  .cflic-question-label {
    flex-direction: column;
    align-items: flex-start;
  }

  .cflic-question-input {
    width: 100% !important;
  }
}


/* Clean WooCommerce Reviews Display & Hide System Notices */
body.single-product .woocommerce-noreviews,
body.single-product .woocommerce-verification-required {
  display: none !important;
}


/* Fix Avatar Position & Overlap */
body.single-product #reviews #comments .comment_container {
            display: flex !important;
            flex-direction: row !important;
            align-items: flex-start !important;
            position: relative !important;
        }
        body.single-product #reviews #comments ol.commentlist li img.avatar,
        body.single-product #reviews #comments .comment_container img.avatar {
            position: static !important;
            float: none !important;
            display: block !important;
            width: 44px !important;
            height: 44px !important;
            min-width: 44px !important;
            max-width: 44px !important;
            border-radius: 50% !important;
            margin: 0 16px 0 0 !important;
            padding: 0 !important;
            border: 1px solid #e2e8f0 !important;
            background-color: #f8fafc !important;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
            flex-shrink: 0 !important;
        }
        body.single-product #reviews #comments ol.commentlist li .comment-text,
        body.single-product #reviews #comments .comment_container .comment-text {
            flex: 1 1 auto !important;
            margin: 0 !important;
            padding: 0 !important;
            border: none !important;
            overflow: hidden !important;
        }
        body.single-product #reviews #comments .comment-text .meta {
            font-size: 13.5px !important;
            color: #64748b !important;
            margin: 0 0 4px 0 !important;
            line-height: 1.4 !important;
            display: flex !important;
            align-items: baseline !important;
            gap: 8px !important;
        }
        body.single-product #reviews #comments .comment-text .woocommerce-review__author {
            font-size: 14.5px !important;
            font-weight: 600 !important;
            color: #1e293b !important;
            margin: 0 !important;
        }
        body.single-product #reviews #comments .comment-text .woocommerce-review__published-date {
            font-size: 12px !important;
            color: #94a3b8 !important;
            font-weight: 400 !important;
            margin: 0 !important;
        }
        body.single-product #reviews #comments .comment-text .description p {
            font-size: 13.5px !important;
            line-height: 1.6 !important;
            color: #334155 !important;
            margin: 6px 0 0 0 !important;
        }
        body.single-product #reviews #comments .star-rating {
            font-size: 12px !important;
            margin: 4px 0 6px 0 !important;
            float: none !important;
        }


        /* Modern WooCommerce Product Tab Buttons (Mô tả & Đánh giá) */
        body.single-product .woocommerce-tabs ul.tabs,
        body.single-product div.product .woocommerce-tabs ul.tabs,
        .woocommerce div.product .woocommerce-tabs ul.tabs {
            display: flex !important;
            flex-direction: row !important;
            align-items: center !important;
            flex-wrap: wrap !important;
            gap: 14px !important;
            margin: 0 0 28px 0 !important;
            padding: 0 0 16px 0 !important;
            border-bottom: 2px solid #e2e8f0 !important;
            list-style: none !important;
            overflow: visible !important;
            background: transparent !important;
        }
        body.single-product .woocommerce-tabs ul.tabs::before,
        body.single-product .woocommerce-tabs ul.tabs::after,
        body.single-product div.product .woocommerce-tabs ul.tabs::before,
        body.single-product div.product .woocommerce-tabs ul.tabs::after {
            display: none !important;
            content: none !important;
            height: 0 !important;
            border: none !important;
        }
        body.single-product .woocommerce-tabs ul.tabs li,
        body.single-product div.product .woocommerce-tabs ul.tabs li {
            display: inline-flex !important;
            margin: 0 !important;
            padding: 0 !important;
            border: none !important;
            background: transparent !important;
            position: relative !important;
            z-index: 1 !important;
        }
        body.single-product .woocommerce-tabs ul.tabs li::before,
        body.single-product .woocommerce-tabs ul.tabs li::after,
        body.single-product div.product .woocommerce-tabs ul.tabs li::before,
        body.single-product div.product .woocommerce-tabs ul.tabs li::after {
            display: none !important;
            content: none !important;
            height: 0 !important;
            border: none !important;
            box-shadow: none !important;
        }
        body.single-product .woocommerce-tabs ul.tabs li a,
        body.single-product div.product .woocommerce-tabs ul.tabs li a {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 8px !important;
            padding: 10px 22px !important;
            font-size: 14.5px !important;
            font-weight: 600 !important;
            line-height: 1.4 !important;
            color: #475569 !important;
            background-color: #f8fafc !important;
            border: 1.5px solid #e2e8f0 !important;
            border-radius: 8px !important;
            text-decoration: none !important;
            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
            cursor: pointer !important;
            user-select: none !important;
        }
        body.single-product .woocommerce-tabs ul.tabs li:not(.active) a:hover {
            background-color: #f1f5f9 !important;
            color: #0081cc !important;
            border-color: #cbd5e1 !important;
            transform: translateY(-1px) !important;
            box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06) !important;
        }
        body.single-product .woocommerce-tabs ul.tabs li.active a,
        body.single-product div.product .woocommerce-tabs ul.tabs li.active a {
            background: linear-gradient(135deg, #0092e8 0%, #0073be 100%) !important;
            color: #ffffff !important;
            border-color: #0073be !important;
            font-weight: 700 !important;
            box-shadow: 0 4px 14px rgba(0, 146, 232, 0.32) !important;
            transform: translateY(-1px) !important;
        }
        body.single-product .woocommerce-tabs ul.tabs li.active a:hover {
            background: linear-gradient(135deg, #0081cc 0%, #005bbb 100%) !important;
            color: #ffffff !important;
            border-color: #005bbb !important;
        }
        body.single-product .woocommerce-tabs ul.tabs li a::before {
            content: "" !important;
            display: inline-block !important;
            width: 17px !important;
            height: 17px !important;
            flex-shrink: 0 !important;
            background-color: currentColor !important;
            transition: transform 0.2s ease !important;
        }
        body.single-product .woocommerce-tabs ul.tabs li.description_tab a::before {
            -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'/%3E%3C/svg%3E") no-repeat center / contain !important;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'/%3E%3C/svg%3E") no-repeat center / contain !important;
        }
        body.single-product .woocommerce-tabs ul.tabs li.reviews_tab a::before {
            -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat center / contain !important;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat center / contain !important;
        }
        body.single-product .woocommerce-tabs ul.tabs li .cflic-tab-badge {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 2px 8px !important;
            font-size: 12px !important;
            font-weight: 700 !important;
            border-radius: 9999px !important;
            line-height: 1.2 !important;
            margin-left: 5px !important;
            background-color: #e2e8f0 !important;
            color: #334155 !important;
            transition: all 0.2s ease !important;
        }
        body.single-product .woocommerce-tabs ul.tabs li:not(.active) a:hover .cflic-tab-badge {
            background-color: #e0f2fe !important;
            color: #0073be !important;
        }
        body.single-product .woocommerce-tabs ul.tabs li.active a .cflic-tab-badge {
            background-color: rgba(255, 255, 255, 0.22) !important;
            color: #ffffff !important;
            border: 1px solid rgba(255, 255, 255, 0.35) !important;
        }
        @media (max-width: 640px) {
            body.single-product .woocommerce-tabs ul.tabs {
                gap: 10px !important;
                margin-bottom: 20px !important;
                padding-bottom: 12px !important;
            }
            body.single-product .woocommerce-tabs ul.tabs li a {
                padding: 9px 16px !important;
                font-size: 14px !important;
            }
        }


/* Exam Guidelines & Preparation Callout Card */
body.single-product .cflic-exam-guidelines {
    margin-top: 28px !important;
    margin-bottom: 24px !important;
}
body.single-product .cflic-exam-guidelines .cflic-guidelines-box {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-left: 4px solid #0092e8 !important;
    border-radius: 8px !important;
    padding: 20px 24px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03) !important;
}
body.single-product .cflic-exam-guidelines h3 {
    margin: 0 0 14px 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.4 !important;
}
body.single-product .cflic-exam-guidelines p {
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    color: #334155 !important;
    margin-bottom: 12px !important;
}
body.single-product .cflic-exam-guidelines ul {
    margin: 0 0 16px 0 !important;
    padding-left: 20px !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: #475569 !important;
}
body.single-product .cflic-exam-guidelines li {
    margin-bottom: 8px !important;
}
body.single-product .cflic-exam-guidelines a {
    color: #0092e8 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}
body.single-product .cflic-exam-guidelines a:hover {
    text-decoration: underline !important;
}
@media (max-width: 640px) {
    body.single-product .cflic-exam-guidelines .cflic-guidelines-box {
        padding: 16px 14px !important;
    }
    body.single-product .cflic-exam-guidelines h3 {
        font-size: 15px !important;
    }
    body.single-product .cflic-exam-guidelines p,
    body.single-product .cflic-exam-guidelines ul {
        font-size: 13.5px !important;
    }
}