/*
Theme Name: ECE By RealDev
Theme URI: https://realdev.vn
Author URI: https://realdev.vn
Description: Child theme Flatsome — framework RealDev (WooCommerce, UX Builder, modules). Yêu cầu theme cha Flatsome đã cài và kích hoạt.
Author: RealDev
Version: 1.260719.9
Template: flatsome
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.2
WC requires at least: 8.3
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: designed-by-realdev
Domain Path: /languages
Tags: full-width-template, theme-options, e-commerce, rtl-language-support, translation-ready, custom-menu, featured-images, threaded-comments
Copyright (C) 2026 RealDev (Đạo Trần). https://realdev.vn
ECE By RealDev is distributed under the terms of the GNU GPL v2 or later.
*/
/* Marquee = JS-driven (user chốt 2026-07-18: keyframe SAI — translateX(-100%) với track min-width:100%
   trôi cả track ra ngoài rồi giật về, và 2 track block xếp dọc thành 2 hàng). JS: modules "real-marquee". */
.real-marquee-container {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  padding: 10px 0;
}
.real-marquee-rail {
  will-change: transform;
}
.real-marquee-content {
  flex-shrink: 0;
}
/* Tốc độ px/s cho JS (đọc qua getComputedStyle biến --rm-pps). */
.real-marquee-container.speed-slow {
  --rm-pps: 36;
}
.real-marquee-container.speed-normal {
  --rm-pps: 72;
}
.real-marquee-container.speed-fast {
  --rm-pps: 144;
}
.real-marquee-item {
  padding: 0 15px;
}
.real-marquee-item a {
  color: inherit;
}
.real-marquee-item img {
  max-height: 40px;
  width: auto;
  object-fit: contain;
}
.real-related-posts__title,
.most-viewed-widget .real-related-posts__title,
.featured-posts-widget .real-related-posts__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.real-related-posts__list {
  gap: 15px;
  list-style: none;
}
.real-related-posts__link {
  overflow: hidden;
  padding: 10px 5px;
  background: var(--white);
  gap: 8px;
  border: 1px solid var(--border);
  width: 100%;
}
.real-related-posts__link img {
  width: 74px;
  height: 74px;
  object-fit: cover;
  padding: 0 3px;
  border-radius: unset;
}
.real-related-posts__title {
  color: #101828;
  line-height: 20px;
}
.real-related-posts__meta {
  color: var(--ion-color-6, #666);
  margin-top: 5px;
}
.real-related-posts__info {
  max-width: calc(100% - 100px);
  flex-basis: calc(100% - 100px);
}
.featured-posts-widget .real-related-posts__list {
  gap: 12px;
}
.featured-posts-widget .real-related-posts__link:hover .real-related-posts__title {
  color: var(--primary);
}
.featured-posts-widget .real-related-posts__meta {
  margin-top: 4px;
}
.most-viewed-widget .real-most-viewed__list.real-related-posts__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.most-viewed-widget .top-viewed-item .real-top-rank {
  width: 28px;
  height: 28px;
  font-size: 0.8rem;
  flex-shrink: 0;
  background: var(--border);
  color: #64748b;
  top: -6px;
  left: -6px;
}
.most-viewed-widget .top-rank-gold .real-top-rank {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: var(--white);
  box-shadow: 0 2px 6px rgba(217, 119, 6, 0.35);
}
.most-viewed-widget .top-rank-silver .real-top-rank {
  background: linear-gradient(135deg, #94a3b8, #64748b);
  color: var(--white);
  box-shadow: 0 2px 6px rgba(100, 116, 139, 0.3);
}
.most-viewed-widget .top-rank-bronze .real-top-rank {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: var(--white);
  box-shadow: 0 2px 6px rgba(180, 83, 9, 0.3);
}
.most-viewed-widget .top-viewed-item .real-related-posts__link {
  border-radius: 8px;
  overflow: hidden;
  padding: 10px 5px;
  background: var(--white);
  font-size: 14px;
  gap: 8px;
  border: 1px solid var(--border);
}
.most-viewed-widget .real-related-posts__link:hover .real-related-posts__title {
  color: var(--primary);
}
.real-related-post__more {
  margin: 14px 0 0;
}
.real-related-post__more .button {
  margin: 0;
}
@media (max-width: 551px) {
  .featured-posts-widget {
    padding: 15px;
  }}
/**
 * Khóa học (product) — thông tin vận hành, địa điểm, video và tư liệu hiển thị
 * trong tab single-product. Chỉ bổ sung phần theme chưa có; giữ UI/token hiện tại.
 */
/* Bảng thông tin khóa học (WC attributes) */
.real-course-spec {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid #e2e8f0;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 12px 28px -24px rgba(20, 36, 92, 0.45);
}
@media (max-width: 900px) {
  .real-course-spec {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }}
.real-course-spec__row {
  grid-template-rows: auto auto;
  min-height: 92px;
  background: #fff;
  transition: background 0.18s ease;
}
.real-course-spec__row:hover {
  background: #f8fbff;
}
.real-course-spec__icon {
  grid-column: 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--fs-color-primary, var(--link-color));
  background: color-mix(in srgb, var(--fs-color-primary, var(--link-color)) 11%, #fff);
}
.real-course-spec__icon .real-rd-icon,
.real-course-spec__icon svg {
  width: 17px;
  height: 17px;
}
.real-course-spec__label {
  grid-column: 2;
  grid-row: 1;
}
.real-course-spec__value {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  word-break: break-word;
}
@media (min-width: 550px) and (max-width: 900px) {
  .real-course-spec__row:nth-child(2n) {
    border-right: 0;
  }
  .real-course-spec__row:nth-child(3n) {
    border-right: 1px solid #edf1f6;
  }
  .real-course-spec__row:nth-last-child(-n + 3) {
    border-bottom: 1px solid #edf1f6;
  }
  .real-course-spec__row:nth-last-child(-n + 2) {
    border-bottom: 0;
  }}
@media (max-width: 549px) {
  .real-course-spec {
    grid-template-columns: 1fr;
  }
  .real-course-spec__row {
    min-height: auto;
    border-right: 0;
  }
  .real-course-spec__row:nth-last-child(-n + 4) {
    border-bottom: 1px solid #edf1f6;
  }
  }
/* Địa điểm học (chi nhánh) */
.real-branch {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.real-branch__card {
  border: 1px solid #e6e8ec;
  padding: 18px 20px;
  background: #fff;
}
.real-branch__name {
  font-size: 17px;
  color: var(--heading-navy);
  margin: 0 0 12px;
}
.real-branch__list {
  list-style: none;
  margin: 0 0 14px;
}
.real-branch__row {
  align-items: flex-start;
  padding: 4px 0;
  line-height: 1.5;
  color: #374151;
}
.real-branch__ico {
  flex-shrink: 0;
  color: var(--fs-color-primary, var(--link-color));
  margin-top: 2px;
}
.real-branch__map {
  overflow: hidden;
  line-height: 0;
}
.real-branch__map iframe {
  width: 100%;
  min-height: 220px;
  border: 0;
}
/**
 * CPT Thành tích (achievement). Card + Feedback dùng markup Flatsome native
 * (.box/.box-image/.image-cover/.box-text) → thừa kế hover/shadow/aspect 1:1 (padding-top).
 * File này chỉ bổ sung phần Flatsome KHÔNG có sẵn: huy hiệu chứng chỉ, khối điểm,
 * header kiểu Facebook, quote, skill grid, social, section.
 */
/* ===== Element achievements (real-ach) — card blog_posts native; HTML dàn sạch:
   tên (title) + lớp trái, điểm/overall phải. Không excerpt/divider (không render). ===== */
.real-ach {
  background: transparent;
  box-shadow: none;
}
.real-ach .box-image {
  border-radius: 10px;
  overflow: hidden;
  background: #f3f4f6;
}
.real-ach .box-image .image-cover {
  border-radius: inherit;
}
.real-ach .box-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.real-ach__cert {
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 38px;
  height: 38px;
  color: #fff;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.18));
  pointer-events: none;
}
.real-ach__cert .real-rd-icon,
.real-ach__cert svg {
  width: 34px;
  height: 34px;
  stroke-width: 1.8;
}
.real-ach .box-text-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  column-gap: 16px;
}
.real-ach .post-title {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  font-size: 19px;
  line-height: 1.25;
  font-weight: 800;
  color: #111;
}
.real-ach .post-title a {
  color: inherit;
}
.real-ach .real-ach__class {
  grid-column: 1;
  grid-row: 2;
  margin: 5px 0 0;
  color: #111;
  line-height: 1.25;
  opacity: 1;
}
.real-ach .real-ach-score {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.real-ach-score__num {
  font-size: clamp(36px, 5vw, 48px);
  line-height: 0.9;
  color: #f15a22;
}
.real-ach-score__label {
  line-height: 1.25;
  letter-spacing: 0;
  color: #111;
}
@media (max-width: 549px) {
  .real-ach .box-text-inner {
    column-gap: 12px;
  }
  .real-ach-score__num {
    font-size: 36px;
  }
  .real-ach-score__label {
    font-size: 12px;
  }}
/* ---------- Skill grid (single detail: L/R/W/S) ---------- */
.real-achv-skill-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.real-achv-skill {
  flex-direction: column;
  padding: 12px 8px;
  background: var(--primary-soft-color, var(--primary-soft-color));
}
.real-achv-skill__num {
  line-height: 1;
  color: var(--fs-color-primary);
}
.real-achv-skill__label {
  color: #475569;
  letter-spacing: 0.02em;
}
/* ---------- Link socials (single sidebar) ---------- */
.real-achv-social__title {
  display: block;
  color: var(--color-text-muted, var(--real-text-muted));
  margin-bottom: 8px;
}
.real-achv-social__link {
  width: 38px;
  height: 38px;
  background: var(--primary-soft-color, var(--primary-soft-color));
  color: var(--fs-color-primary);
  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}
.real-achv-social__link:hover {
  background: var(--fs-color-primary);
  color: #fff;
  transform: translateY(-2px);
}
.real-achv-social__link .real-rd-icon {
  width: 18px;
  height: 18px;
}
/* ---------- Section cuối single ---------- */
.real-achv-suggest,
.real-achv-related {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid #ececf1;
}
/* ---------- Element headings + view-all ---------- */
.real-achv-section-heading {
  font-size: 40px;
  line-height: 1.15;
  color: var(--heading-navy);
  margin: 0 0 30px;
}
@media (max-width: 768px) {
  .real-achv-section-heading {
    font-size: 28px;
  }}
.real-achv-viewall {
  margin-top: 22px;
}
/* ---------- Hero (Hall of Fame) ---------- */
.hof-hero__title {
  font-size: 52px;
  line-height: 1.15;
  font-weight: 800;
  color: var(--heading-navy);
  margin: 0 0 16px;
}.hof-hero__title mark{
  background: linear-gradient(transparent 62%, var(--fs-color-secondary) 62%);
  color: inherit;
}
.hof-hero__sub {
  font-size: 17px;
  line-height: 1.7;
  color: #4b5563;
  margin: 0 0 24px;
}
@media (max-width: 768px) {
  .hof-hero__title {
    font-size: 34px;
  }}
/* Ảnh hero: crop tròn đặt trên vòng tròn vàng */
.hof-hero__photo {
  position: relative;
  width: min(100%, 440px);
  margin: 0 auto;
}
.hof-hero__photo::before {
  content: "";
  display: block;
  padding-top: 100%;
  background: var(--fs-color-secondary);
  border-radius: 50%;
}
.hof-hero__photo .img {
  position: absolute;
  inset: 5%;
  z-index: 1;
  margin: 0;
}
.hof-hero__photo .img .img-inner,
.hof-hero__photo .img img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}
.hof-hero__photo .img img {
  object-fit: cover;
  object-position: 50% 20%;
}
/* Nút hero navy đặc */
.hof-hero__btn.button {
  background-color: var(--heading-navy);
  background-image: none;
  border-color: var(--heading-navy);
  color: #fff;
}
.hof-hero__btn.button:hover {
  background-color: #0d1840;
  background-image: none;
  border-color: #0d1840;
  color: #fff;
}
/* ---------- Stats bar (navy nổi, 3 item icon tròn) ---------- */
.hof-stats {
  background: var(--heading-navy);
  border-radius: 16px;
  color: #fff;
  padding: 22px 10px;
  box-shadow: 0 20px 40px -20px rgba(20, 36, 92, 0.5);
}
.hof-stats__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 18px;
}
.hof-stats__icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--fs-color-secondary);
  font-size: 24px;
}
.hof-stats__num {
  display: block;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
}
.hof-stats__desc {
  display: block;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.8);
}
/* ---------- Leaderboard (pill trái + bảng phải) ---------- */
.real-hof-lb__pills {
  flex-direction: column;
}
.real-hof-pill {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 4px 12px;
  padding: 16px 20px;
  color: #fff;
}
.real-hof-pill__note {
  grid-column: 1;
  grid-row: 1 / span 2;
  line-height: 1.25;
  opacity: 0.95;
}
.real-hof-pill__num {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: 46px;
  line-height: 1;
}
.real-hof-pill__label {
  grid-column: 3;
  grid-row: 1 / span 2;
  line-height: 1.15;
  white-space: nowrap;
}
.hof-pill--hot {
  background: #f15a22;
}
.hof-pill--b1 {
  background: #1560c4;
}
.hof-pill--b2 {
  background: #2f7fdc;
}
.hof-pill--b3 {
  background: #5aa0e8;
}
.hof-pill--b4 {
  background: #86bdf0;
}
.real-hof-lb__table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #e6e8ec;
  overflow: hidden;
}
.real-hof-lb__table th,
.real-hof-lb__table td {
  padding: 13px 16px;
  text-align: center;
  border-bottom: 1px solid #eceef2;
}.real-hof-lb__table thead th{
  color: #fff;
  background: #1560c4;
  border-bottom: none;
}
.real-hof-lb__table tbody td:first-child {
  text-align: left;
  font-weight: 600;
}
.real-hof-lb__table td a.plain {
  color: var(--heading-navy);
}
.real-hof-lb__table tbody tr:hover {
  background: #f6f9fe;
}
.real-opening-schedule-archive {
  padding: 32px 0 56px;
}
.real-opening-schedule-hero {
  margin: 0 auto 24px;
  max-width: 760px;
}
.real-opening-schedule-hero h1 {
  margin: 10px 0 8px;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1.08;
}.real-opening-schedule-hero p{
  color: var(--color-text-muted, #667085);
}
.real-opening-schedule-breadcrumb {
  color: var(--color-text-muted, #667085);
  font-size: 0.9rem;
}
.real-opening-schedule-filter {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) repeat(4, minmax(140px, 1fr)) auto;
  margin: 0 0 24px;
  padding: 14px;
  border: 1px solid var(--color-border, #e1e7ef);
  background: #fff;
}
.real-opening-schedule-filter input,
.real-opening-schedule-filter select,
.real-opening-schedule-filter button {
  height: 42px;
  margin: 0;
  border-radius: 6px;
}.real-opening-schedule-filter button{
  padding: 0 18px;
  border: 0;
  background: var(--primary, var(--link-color));
  color: #fff;
}
.real-course-opening-schedules .flickity-slider > .col {
  max-width: 50%;
}
.real-opening-schedule-card {
  overflow: hidden;
  height: 100%;
  border: 1px solid var(--color-border, #e1e7ef);
  background: #fff;
}
.real-opening-schedule-card__image {
  display: block;
  overflow: hidden;
  background: #eef4fb;
}
.real-opening-schedule-card__image::before {
  display: block;
  padding-top: 70%;
  content: "";
}
.real-opening-schedule-card__image img,
.real-opening-schedule-card__placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.real-opening-schedule-card__body {
  padding: 14px;
}
.real-opening-schedule-card h3 {
  margin: 0 0 10px;
  font-size: 1rem;
  line-height: 1.35;
}
.real-opening-schedule-card__meta {
  display: grid;
  color: var(--color-text-muted, #667085);
  font-size: 0.9rem;
}.real-opening-schedule-card__meta span{
  min-width: 0;
}.real-opening-schedule-card__meta i{
  width: 16px;
  min-width: 16px;
  color: var(--primary, var(--link-color));
}
.real-opening-schedule-card-courses {
  margin: 0 0 0.6em;
  font-size: 0.92em;
  line-height: 1.45;
}.real-opening-schedule-card-courses span{
  color: var(--primary, var(--link-color));
}
.opening-schedule-single {
  margin: 0;
}
.real-opening-schedule-single__table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border, #e1e7ef);
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}
.real-opening-schedule-single__table-wrap h2 {
  margin: 0;
  padding: 16px 18px;
  border-bottom: 1px solid var(--color-border, #e1e7ef);
  font-size: 18px;
  line-height: 1.35;
}
.real-opening-schedule-single__table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}
.real-opening-schedule-single__table th,
.real-opening-schedule-single__table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--color-border, #e1e7ef);
  text-align: left;
  vertical-align: top;
}.real-opening-schedule-single__table th{
  background: #f8fafc;
  color: var(--color-text-muted, #667085);
  font-size: 0.88rem;
}
.real-opening-schedule-single__table td {
  color: var(--color-text, #101828);
  line-height: 1.45;
}
.real-opening-schedule-single__table tbody tr:last-child td {
  border-bottom: 0;
}
.real-course-opening-table {
  margin-top: 0;
  margin-bottom: 0;
}
.single-product #tab-course_content .entry-content,
.single-product #tab-course_opening_schedule .entry-content {
  margin-bottom: 0;
}
@media (max-width: 849px) {
  .real-opening-schedule-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .real-opening-schedule-filter input,
  .real-opening-schedule-filter button {
    grid-column: span 2;
  }
  .real-course-opening-schedules .flickity-slider > .col {
    max-width: 100%;
  }}
.real-rd-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  color: inherit;
  flex-shrink: 0;
  line-height: 1;
  overflow: visible;
}
.real-rd-icon.is-filled use,
.is-filled > .real-rd-icon use {
  fill: currentColor;
}
:root {
  /* ===== Bảng màu CỦA SITE (reset.css chỉ dùng var — mang sang site khác vẫn chạy).
     Màu brand DẪN XUẤT từ --fs-color-* ⇒ đổi Customizer là chảy ra toàn site. ===== */
  --white: #fff;
  --footer-bg: #192131;
  --body-bg: #f2f4f7;
  --wp-focus: #21759b;
  --shadow-primary: color-mix(in srgb, var(--fs-color-primary) 50%, transparent);
  --primary-tint-1: #f0f7ff;   /* tint chọn tay — không dẫn xuất được từ primary */
  --primary-tint-2: #d3e3f3;
  --primary-tint-3: #ddecff;
  --primary-tint-4: rgba(13, 84, 252, 0.08);
  --border-light: #f1f1f1;
  --overlay-light: rgba(255, 255, 255, 0.75);
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-veil: rgba(255, 255, 255, 0.4);
  --shadow-sm: rgba(0, 0, 0, 0.15);
  --shadow-md: rgba(0, 0, 0, 0.2);
  --shadow-strong: rgba(0, 0, 0, 0.6);

  /* ===== Màu: alias ngắn → biến Flatsome THẬT (get_theme_mod / UX Customizer). Đổi màu site = sửa Customizer, không hardcode ở đây. ===== */
  --primary-color: var(--fs-color-primary);
  --second-color: var(--fs-color-secondary);
  --success-color: var(--fs-color-success);
  --alert-color: var(--fs-color-alert);
  --base-color: var(--fs-color-base);
  --link-color: var(--fs-experimental-link-color);
  --link-hover-color: var(--fs-experimental-link-color-hover);
  /* Sắc dẫn xuất soft/dark (Flatsome không cấp) */
  --primary-dark-color: #0089bf;
  --primary-soft-color: #d7f1fc;
  --heading-navy: #14245c; /* heading brand ECE — Flatsome không model slot này */
  --second-soft-color: #fff3cc;
  /* Alias cũ dùng ở nhiều module → trỏ vào biến Flatsome */
  --primary: var(--fs-color-primary);
  --primary-dark: var(--primary-dark-color);
  --accent: var(--fs-color-secondary);
  --secondary: var(--fs-color-secondary);
  --heading: var(--fs-color-base);
  /* ===== Neutral + scale (KHÔNG phải màu brand — spacing/radius/typography/shadow/z/motion). Giữ vì dùng khắp module + JS. ===== */
  --real-text: #1f2937;
  --real-text-muted: #6b7280;
  --real-text-soft: #9ca3af;
  --real-bg: #f3f4f6;
  --real-surface: #ffffff;
  --real-surface-alt: #f9fafb;
  --real-border: #e5e7eb;
  --real-border-strong: #d1d5db;
  --text: var(--real-text);
  --muted: var(--real-text-muted);
  --bg: var(--real-bg);
  --surface: var(--real-surface);
  --border-color: var(--real-border);
  --real-space-0: 0;
  --real-space-xs: 4px;
  --real-space-sm: 8px;
  --real-space-md: 12px;
  --real-space-lg: 16px;
  --real-space-xl: 24px;
  --real-space-2xl: 32px;
  --real-space-3xl: 48px;
  --real-radius-sm: 4px;
  --real-radius-md: 6px;
  --real-radius-lg: 8px;
  --real-radius-xl: 12px;
  --real-radius-pill: 999px;
  --real-font-family: inherit;
  --real-font-size-xs: 11px;
  --real-font-size-sm: 12px;
  --real-font-size-md: 14px;
  --real-font-size-lg: 16px;
  --real-font-size-xl: 18px;
  --real-font-size-2xl: 20px;
  --real-font-weight-regular: 400;
  --real-font-weight-medium: 500;
  --real-font-weight-semibold: 600;
  --real-font-weight-bold: 700;
  --real-line-height-tight: 1.25;
  --real-line-height-base: 1.5;
  --real-shadow-xs: 0 1px 2px rgba(17, 24, 39, 0.04);
  --real-shadow-sm: 0 1px 3px rgba(17, 24, 39, 0.06), 0 1px 2px rgba(17, 24, 39, 0.04);
  --real-shadow-md: 0 4px 12px rgba(17, 24, 39, 0.08);
  --real-shadow-lg: 0 12px 28px rgba(17, 24, 39, 0.1);
  --real-transition-fast: 120ms ease;
  --real-transition: 160ms ease;
  --real-transition-slow: 240ms ease;
  --real-z-dropdown: 100;
  --real-z-sticky: 200;
  --real-z-modal: 1000;
  --real-z-toast: 1100;
}
@keyframes realdevToastProgress {
  0% {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}
@keyframes realdevToastInRight {
  0% {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes realdevToastOutRight {
  0% {
    opacity: 1;
    transform: translateX(0);
    max-height: 200px;
    margin-top: 0;
  }
  to {
    opacity: 0;
    transform: translateX(24px);
    max-height: 0;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
}
@keyframes realdevToastInLeft {
  0% {
    opacity: 0;
    transform: translateX(-24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes realdevToastOutLeft {
  0% {
    opacity: 1;
    transform: translateX(0);
    max-height: 200px;
  }
  to {
    opacity: 0;
    transform: translateX(-24px);
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
}
@keyframes realdevToastInBottomRight {
  0% {
    opacity: 0;
    transform: translate(24px, 12px);
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes realdevToastOutBottomRight {
  0% {
    opacity: 1;
    transform: translate(0, 0);
    max-height: 200px;
  }
  to {
    opacity: 0;
    transform: translate(24px, 12px);
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
}
@keyframes realdevToastInBottomLeft {
  0% {
    opacity: 0;
    transform: translate(-24px, 12px);
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes realdevToastOutBottomLeft {
  0% {
    opacity: 1;
    transform: translate(0, 0);
    max-height: 200px;
  }
  to {
    opacity: 0;
    transform: translate(-24px, 12px);
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
}
.real-toast-region {
  position: fixed;
  flex-direction: column;
  max-width: calc(100vw - 48px);
  pointer-events: none;
}
.real-toast-region[data-real-corner="bl"],
.real-toast-region[data-real-corner="br"] {
  flex-direction: column-reverse;
}
.real-admin-page #real-toast-region[data-real-corner="tl"],
.real-admin-page #real-toast-region[data-real-corner="tr"],
body.admin-bar #real-toast-region[data-real-corner="tl"],
body.admin-bar #real-toast-region[data-real-corner="tr"] {
  top: 48px !important;
}
@media screen and (max-width: 782px) {
  .real-admin-page #real-toast-region[data-real-corner="tl"],
  .real-admin-page #real-toast-region[data-real-corner="tr"],
  body.admin-bar #real-toast-region[data-real-corner="tl"],
  body.admin-bar #real-toast-region[data-real-corner="tr"] {
    top: 58px !important;
  }}
.real-toast {
  pointer-events: auto;
  overflow: hidden;
  border-left: 4px solid var(--primary-color);
  padding-bottom: calc(12px + 4px);
  line-height: 1.5;
  align-items: flex-start;
  animation-duration: 240ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: both;
}
.real-toast--success {
  border-left-color: var(--success-color);
}
.real-toast--error {
  border-left-color: var(--alert-color);
}
.real-toast__content {
  min-width: 0;
}
.real-toast__message {
  color: inherit;
  word-wrap: break-word;
}
.real-toast-action,
.real-toast__dismiss {
  background: 0 0;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.real-toast-action {
  text-decoration: none;
}
.real-toast-action:hover {
  opacity: 0.75;
}
.real-toast__dismiss {
  line-height: 1;
  transition:
    opacity 160ms ease,
    color 160ms ease;
}
.real-toast__dismiss:hover {
  opacity: 1;
  color: var(--color-text);
}
.real-toast__progress {
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: currentColor;
  opacity: 0.35;
  transform-origin: left center;
  animation: realdevToastProgress 3500ms linear forwards;
}
.real-toast-region[data-real-corner="br"] .real-toast__progress,
.real-toast-region[data-real-corner="tr"] .real-toast__progress {
  transform-origin: right center;
}
.real-toast--success .real-toast__progress {
  color: var(--success-color);
}
.real-toast--error .real-toast__progress {
  color: var(--alert-color);
}
.real-toast:not([class*="--"]) .real-toast__progress {
  color: var(--primary-color);
}
.real-toast[data-persistent="true"] .real-toast__progress {
  display: none;
}
.real-toast,
.real-toast-region[data-real-corner="tr"] .real-toast {
  animation-name: realdevToastInRight;
}
.real-toast-region[data-real-corner="tr"] .real-toast.is-dismissing,
.real-toast.is-dismissing {
  animation-name: realdevToastOutRight;
}
.real-toast-region[data-real-corner="tl"] .real-toast {
  animation-name: realdevToastInLeft;
}
.real-toast-region[data-real-corner="tl"] .real-toast.is-dismissing {
  animation-name: realdevToastOutLeft;
}
.real-toast-region[data-real-corner="br"] .real-toast {
  animation-name: realdevToastInBottomRight;
}
.real-toast-region[data-real-corner="br"] .real-toast.is-dismissing {
  animation-name: realdevToastOutBottomRight;
}
.real-toast-region[data-real-corner="bl"] .real-toast {
  animation-name: realdevToastInBottomLeft;
}
.real-toast-region[data-real-corner="bl"] .real-toast.is-dismissing {
  animation-name: realdevToastOutBottomLeft;
}
@media (prefers-reduced-motion: reduce) {
  .real-toast,
  .real-toast.is-dismissing,
  .real-toast__progress {
    animation: none;
  }}
@media screen and (max-width: 600px) {
  .real-toast-region {
    width: min(280px, calc(100vw - 20px));
    max-width: calc(100vw - 20px);
    gap: 6px;
  }
  .real-toast {
    padding: 10px 12px;
    padding-bottom: calc(10px + 4px);
    font-size: 13px;
    line-height: 1.35;
    gap: 8px;
    border-radius: 10px;
    border-left-width: 3px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
  }
  .real-toast__actions {
    margin-top: 6px;
    gap: 6px;
  }
  .real-toast-action {
    font-size: 12px;
  }
  .real-toast__dismiss {
    font-size: 16px;
  }}
/* Tone gần wp-admin — chỉ trong admin (không đè storefront bên dưới). */
body.wp-admin .real-toast-region .real-toast {
  border-color: #c3c4c7;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
  font-size: 13px;
  line-height: 1.45;
  padding: 10px 14px;
  padding-bottom: calc(10px + 4px);
  border-radius: 2px;
}
body.wp-admin .real-toast-region .real-toast__message {
  font-size: inherit;
}
body.wp-admin .real-toast-region .real-toast__progress {
  height: 2px;
  opacity: 0.28;
}
/* -----------------------------------------------------------------------------
   Storefront (theme front) — gộp từ assets/frontend/css/reset.css
   Phụ thuộc --text và biến theme; load sau engine minified phía trên.
   ----------------------------------------------------------------------------- */
@keyframes real-toast-enter {
  0% {
    opacity: 0;
    transform: translate3d(0, -10px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes real-toast-exit {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -8px, 0);
  }
}
.real-toast-region {
  top: 24px;
  right: 24px;
  z-index: 99999;
  gap: 12px;
  width: min(380px, calc(100vw - 32px));
}
/* Vùng toast upsell «Đã mua»: PC gọn hơn toast hệ thống để không chặn layout shop. */
#real-toast-region--purchased.real-toast-region {
  width: min(332px, calc(100vw - 32px));
}
body.admin-bar .real-toast-region {
  top: 56px;
}
.real-toast {
  gap: 12px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(34, 43, 79, 0.12);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 40px rgba(22, 34, 61, 0.14);
  color: var(--text);
  backdrop-filter: blur(12px);
  transform: translate3d(0, -10px, 0);
  opacity: 0;
  animation: real-toast-enter 0.22s ease forwards;
}
.real-toast.is-dismissing {
  animation: real-toast-exit 0.2s ease forwards;
}
@media (prefers-reduced-motion: reduce) {
  .real-toast {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .real-toast.is-dismissing {
    animation: none;
    opacity: 0;
    transform: none;
  }}
.real-toast--success {
  border-color: rgba(61, 181, 113, 0.28);
}
.real-toast__content {
  flex: 1 1 auto;
}
.real-toast__message {
  line-height: 1.5;
}
.real-toast__actions {
  gap: 8px;
  margin-top: 10px;
}
.real-toast-action {
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid rgba(13, 84, 252, 0.16);
  background: rgba(13, 84, 252, 0.08);
  color: var(--link);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}
.real-toast-action:focus-visible,
.real-toast-action:hover {
  background: rgba(13, 84, 252, 0.14);
  border-color: rgba(13, 84, 252, 0.28);
  color: var(--link-hover);
}
.real-toast__dismiss {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  margin: -4px -6px 0 0;
  color: inherit;
  opacity: 0.72;
}
.real-toast__dismiss:focus-visible,
.real-toast__dismiss:hover {
  background: rgba(34, 43, 79, 0.08);
  opacity: 1;
}.real-toast__dismiss span{
  line-height: 1;
}
.real-toast--purchased .real-toast__content {
  display: block;
}
.real-purchased-toast {
  align-items: center;
  gap: 12px;
}
.real-purchased-toast__media {
  width: 48px;
  height: 48px;
  overflow: hidden;
  flex: 0 0 auto;
  background: rgba(148, 163, 184, 0.18);
}
.real-purchased-toast__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.real-purchased-toast__body {
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}
.real-purchased-toast__title {
  line-height: 1.25;
  color: inherit;
}
.real-purchased-toast__product {
  line-height: 1.35;
  color: var(--link);
  text-decoration: none;
}
.real-purchased-toast__product:focus-visible,
.real-purchased-toast__product:hover {
  color: var(--link-hover);
  text-decoration: underline;
}
.real-purchased-toast__meta {
  line-height: 1.35;
  color: color-mix(in srgb, currentColor 72%, transparent);
}
.real-toast--purchased {
  background: color-mix(in srgb, #fff 94%, transparent);
  backdrop-filter: saturate(1.1) blur(4px);
  border-left-width: 4px;
}
.real-toast--purchased[style*="--real-toast-bg"] {
  background: #fff !important;
}
.real-toast--purchased[style*="--real-toast-accent"] {
  border-left-color: var(--color-primary) !important;
}
.real-toast--purchased[style*="--real-toast-accent"] .real-purchased-toast__title {
  color: color-mix(in srgb, var(--color-primary) 78%, #111 22%);
}
.real-toast--purchased[style*="--real-toast-accent"] .real-toast__progress {
  color: var(--color-primary);
}
@media (max-width: 849px) {
  /* Toast hệ thống: đáy — giữ neo trái/phải như trước. */
  #real-toast-region.real-toast-region,
  #real-toast-region--purchased.real-toast-region {
    bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    gap: 8px;
  }
  #real-toast-region.real-toast-region {
    top: auto !important;
    right: 12px !important;
    left: 12px !important;
    transform: none !important;
    max-width: min(360px, calc(100vw - 24px));
  }
  /* Toast «Đã mua»: đáy + căn giữa — JS đặt corner/top/right inline nên cần !important; trước đây chỉ #real-toast-region được chỉnh nên upsell chiếm mép trên màn hình. */
  #real-toast-region--purchased.real-toast-region {
    top: auto !important;
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    max-width: min(328px, calc(100vw - 24px));
    align-items: stretch;
  }
  body.admin-bar #real-toast-region.real-toast-region,
  body.admin-bar #real-toast-region--purchased.real-toast-region {
    top: auto !important;
  }
  .real-toast {
    padding: 9px 11px;
    gap: 8px;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(22, 34, 61, 0.11);
  }
  .real-toast__message {
    font-size: 13px;
    line-height: 1.4;
  }
  .real-toast__actions {
    margin-top: 6px;
    gap: 6px;
  }
  .real-toast-action {
    min-height: 30px;
    padding: 5px 10px;
    font-size: 12px;
  }
  .real-toast__dismiss {
    width: 28px;
    height: 28px;
    margin: -2px -4px 0 0;
  }
  .real-toast__dismiss span {
    font-size: 18px;
  }
  .real-purchased-toast {
    gap: 8px;
    align-items: flex-start;
  }
  .real-purchased-toast__body {
    gap: 2px;
  }
  .real-purchased-toast__media {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }
  .real-purchased-toast__title {
    font-size: 12px;
    line-height: 1.2;
  }
  .real-purchased-toast__product {
    font-size: 13px;
    line-height: 1.3;
  }
  .real-purchased-toast__meta {
    font-size: 11px;
    line-height: 1.3;
  }
  .real-toast--purchased {
    border-left-width: 3px;
  }
  #real-toast-region--purchased.real-toast-region .real-toast--purchased {
    box-shadow: 0 8px 22px rgba(22, 34, 61, 0.12);
  }}
@media (max-width: 520px) {
  /* Upsell «Đã mua»: mobile tối giản — bỏ ảnh, một dòng meta, tiêu đề/product không xuống nhiều dòng. */
  #real-toast-region--purchased.real-toast-region {
    max-width: min(300px, calc(100vw - 20px));
    bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
    gap: 6px;
  }
  #real-toast-region--purchased.real-toast-region .real-toast--purchased {
    padding: 7px 9px;
    gap: 6px;
    border-radius: 11px;
  }
  #real-toast-region--purchased.real-toast-region .real-purchased-toast__media {
    display: none;
  }
  #real-toast-region--purchased.real-toast-region .real-purchased-toast {
    align-items: flex-start;
    gap: 4px;
  }
  #real-toast-region--purchased.real-toast-region .real-purchased-toast__title {
    font-size: 11px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #real-toast-region--purchased.real-toast-region .real-purchased-toast__product {
    font-size: 12px;
    line-height: 1.3;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #real-toast-region--purchased.real-toast-region .real-purchased-toast__meta {
    font-size: 10px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  #real-toast-region--purchased.real-toast-region .real-toast__dismiss {
    width: 26px;
    height: 26px;
    margin: -4px -6px 0 0;
  }
  #real-toast-region--purchased.real-toast-region .real-toast__dismiss span {
    font-size: 17px;
  }}
@media (max-width: 480px) {
  #real-toast-region.real-toast-region {
    bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
    left: 10px !important;
    right: 10px !important;
    transform: none !important;
    width: auto !important;
    gap: 6px;
    max-width: calc(100vw - 20px);
  }
  /* Purchased vẫn căn giữa qua translate — không stretch full bleed như toast hệ thống. */
  #real-toast-region--purchased.real-toast-region {
    max-width: min(292px, calc(100vw - 20px));
    bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
  }
  .real-toast {
    padding: 8px 10px;
    gap: 7px;
    border-radius: 11px;
  }
  .real-purchased-toast__media {
    width: 36px;
    height: 36px;
    border-radius: 9px;
  }
  .real-purchased-toast__title {
    font-size: 11px;
  }
  .real-purchased-toast__product {
    font-size: 12px;
  }}
@media (max-width: 380px) {
  #real-toast-region--purchased.real-toast-region .real-purchased-toast__meta {
    display: none;
  }
  #real-toast-region--purchased.real-toast-region .real-toast--purchased {
    padding: 6px 8px;
  }}
body.wp-admin #real-toast-region.real-toast-region {
  z-index: 100000;
}
body.wp-admin.real-admin-page #real-toast-region.real-toast-region[data-real-corner="br"] {
  bottom: 24px;
  right: 16px;
}
@keyframes rdFieldErrorIn {
  0% {
    opacity: 0;
    transform: translateY(-3px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.real-field-error {
  top: 1px;
  left: 8px;
  z-index: 2;
  padding: 8px;
  background: var(--white);
  font-size: 11.5px;
  color: var(--alert);
  pointer-events: none;
  animation: rdFieldErrorIn 0.22s ease both;
}
.real-field-error.is-fading {
  opacity: 0;
  transform: translateY(-3px);
  transition:
    opacity 0.28s ease,
    transform 0.28s ease;
}
.real-options-wrapper .button.button-primary,
.real-admin-page .button.button-primary {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}
.real-options-wrapper .button.button-primary,
.real-admin-page .button.button-primary {
  text-shadow: none;
  box-shadow: none;
}
.real-options-wrapper .button.button-primary:focus,
.real-options-wrapper .button.button-primary:hover,
.real-admin-page .button.button-primary:focus,
.real-admin-page .button.button-primary:hover {
  background: var(--primary-dark-color);
  border-color: var(--primary-dark-color);
  color: #fff;
  outline: 0;
  box-shadow: 0 0 0 3px var(--primary-soft-color);
}
@keyframes animate-arrow-1 {
  0% {
    transform: translateY(-40px);
    opacity: 0;
  }
  70%,
  to {
    transform: translateY(0);
    opacity: 0.3;
  }
}
@keyframes animate-arrow-2 {
  0% {
    transform: translateY(-20px);
    opacity: 0;
  }
  70%,
  to {
    transform: translateY(0);
    opacity: 0.5;
  }
}
@keyframes animate-arrow-3 {
  0% {
    transform: translateY(-10px);
    opacity: 0;
  }
  70%,
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.real-readmore {
  z-index: 10;
}
.real-expand {
  bottom: -7px;
  width: 100%;
  background: #fff;
  height: 100px;
}
.real-readmore:before {
  content: "";
  position: absolute;
  bottom: 100%;
  height: 200px;
  left: 0;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff);
  width: 100%;
}
.real-readmore .arrow:after {
  content: "";
  top: 2px;
  opacity: 0.5;
  animation: animate-arrow-2 1s ease-in-out infinite 0.1s;
}
.real-readmore .arrow span,
.real-readmore .arrow:after,
.real-readmore .arrow:before {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAMCAYAAAAH4W+EAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDc5LjE2NDQ4OCwgMjAyMC8wNy8xMC0yMjowNjo1MyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDc3NEIyN0EyRDY0MTFFQjkzMDRBMjIxNzc0RTBDODQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MDc3NEIyNzkyRDY0MTFFQjkzMDRBMjIxNzc0RTBDODQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIyLjAgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozNjdCMUQ3OTJDQUIxMUVCOENCRERGNDFFOTA1OTlERCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozNjdCMUQ3QTJDQUIxMUVCOENCRERGNDFFOTA1OTlERCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Ph5ikagAAAGHSURBVHjaYmAAAg8Pj14vLy87Bjzg////JGFPT09GHx8fNnxmguwE2Q1iMwI1eAI1bgPZxcjIOJ+Dg6Ns/fr1b3E5hhjg7e3NuG3bNpyKAwMDhX/8+NEFNC8J7AhGRi8mHh6evUBGHRD/AkkAFVwHujQWmwFANWCMx4eMYWFheB0BMhtkB8guoFk/QXaD3QBTAAxG1b9//84AKnCCWrqPmZk5Y8uWLbfxRRdSKDADHfAXl1pC5jNiczFQcS8Qi4JcDBRqBbq4c/Xq1b+wWRAaGgoygxEo/w+HPNuXL1/KgcxqoJnsQDNfA3Ex0NGLUUIbh2YhoOZuoMZEqJobTExM6UDNhxhIAKDE+O/fv5lApgYsDQI9VQp09DuMaKeWQZR6hBmfgbdv335oaGg4+zcQAB1hDTTYFMhMUlNTewGUu4QrMf769WszUK0NKAMAcRMvL2/Mxo0b7+Gzi5HYYCaU2MhJ7GQ5BF9ihkrhTYxUdwhagZSIZAbRaYhqDsGSmBnIyVXIACDAAM34JXWPolNhAAAAAElFTkSuQmCC);
  width: 25px;
  height: 15px;
  background-size: contain;
  background-repeat: no-repeat;
  display: block;
  right: 0;
  left: 0;
  margin: auto;
  position: absolute;
}
.real-readmore .arrow:before {
  content: "";
  top: -5px;
  opacity: 1;
  animation: animate-arrow-3 1s ease-in-out infinite 0.2s;
}
.real-readmore .arrow span {
  animation: animate-arrow-1 1s ease-in-out infinite;
  top: 9px;
  opacity: 0.3;
}
.real-readmore .arrow {
  position: absolute;
  left: 0;
  z-index: 10000;
  width: 100%;
  margin: 0;
  top: 18px;
  height: 60px;
  overflow: unset;
}
.real-collapse,
.real-expand,
.real-readmore {
  display: flex;
  align-items: center;
  justify-content: center;
}.real-readmore button{
  top: 40px;
  color: var(--primary-color);
  background: 0 0;
  border: 0;
  cursor: pointer;
}.real-collapse button{
  transform: rotate(180deg);
  top: -10px;
}
.real-collapse button .label {
  display: inline-block;
  transform: rotate(180deg);
}
.real-collapse {
  margin-top: 40px;
  flex-direction: column;
  color: var(--primary-color);
  cursor: pointer;
}
.real-collapse::before {
  height: 40px !important;
  bottom: -100%;
  z-index: -1;
}
.real-collapse span.arrow {
  margin-left: -8px;
}
.header-vertical-menu .header-vertical-menu__title {
  font-weight: 400;
}
.header-vertical-menu a,
.real-home-menu li a {
  color: var(--text);
}
.header-vertical-menu .header-vertical-menu__opener i,
.header-vertical-menu a i,
.hidden-topic,
.real-home-menu li a i {
  display: none;
}
.header-vertical-menu a,
.real-home-menu li a {
  padding: 7px 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  font-size: 15px;
}
.header-vertical-menu .header-vertical-menu__opener {
  background: 0 0;
  padding: 0;
  width: max-content !important;
  height: max-content;
  gap: 6px;
}
/* native-miss: fly-out do Flatsome vertical-menu sinh — override, không class từ theme */
.header-vertical-menu .header-vertical-menu__fly-out {
  top: 38px;
  border-radius: 5px;
}
.header-vertical-menu .header-vertical-menu__icon {
  width: 23px;
  height: 23px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.real-home-menu img.ux-menu-icon {
  filter: unset !important;
}
.header-vertical-menu a img,
.real-home-menu li a img {
  width: 22px;
  height: 22px;
}
.real-home-menu .nav-dropdown {
  border: 0 !important;
  border-radius: 0;
  overflow: hidden;
  min-width: 1080px;
  top: 0;
  bottom: 0;
  min-height: 367px;
  left: 220px !important;
  z-index: 99;
  box-shadow: unset !important;
  border-left: 1px solid rgba(207, 207, 207, 0.23) !important;
  padding: 20px 5px !important;
}
.menu-title,
.menu-title .menu-icon {
  color: var(--primary);
}
.menu-title .menu-icon {
  width: 23px;
  height: 23px;
}
.header-vertical-menu li a:after,
.real-home-menu li a:after {
  content: var(--icon-chevron-right, "\f054");
  font-family: var(--icon-chevron-font, var(--icon-family, "Font Awesome 6 Pro"));
  font-weight: var(--icon-weight, 900);
  font-size: 12px;
  margin-left: auto;
}
.footer-menu-list .ux-menu-link__link {
  padding: 0;
  font-size: 15px;
}
.form-ssl-btn .form-ssl-des {
  font-size: 12px;
  opacity: 0.7;
}
.upload-button:focus-within,
.upload-button:hover {
  color: var(--primary);
  border-color: var(--primary);
}.form-ssl-btn a{
  display: flex;
  justify-content: center;
  align-items: center;
}.form-ssl-btn a{
  flex-direction: column;
  width: 100%;
  background: var(--primary);
  color: var(--white);
  padding: 10px;
  line-height: 1.2;
}
.form-ssl-btn .form-ssl-title {
  font-weight: 700;
  font-size: 18px;
  text-transform: capitalize;
}
.form-sll .form-title {
  text-transform: capitalize;
  font-weight: 700;
  font-size: 22px;
}
.form-sll .form-des {
  font-size: 13px;
}
.form-ssl-btn a:hover {
  background: linear-gradient(360deg, var(--fs-color-primary) 0%, var(--fs-color-secondary) 100%);
  border: transparent;
}
.form-sll .wpcf7-submit {
  margin-left: auto;
  display: block;
  margin-bottom: 0px;
  border-radius: 10px 10px 0px;
}
input.wpcf7-submit {
  font-size: 14px;
  height: 46px;
  font-weight: 700;
  border-width: 1px;
  border-style: solid;
  border-image: initial;
  transition: 0.3s;
}
@media (max-width: 551px) {
  .home-row-feature-banner .flickity-page-dots,
  .home-second-banners .flickity-page-dots {
    bottom: 8px !important;
  }}
.page-title-inner .last {
  font-weight: 400;
}
/* Strategy row — accordion: rest đều 3 cột, hover 1 cột rộng ra, còn lại thu hẹp.
   Dùng tỉ lệ flex-grow (flex-basis:0) nên không bao giờ tràn quá container. */
.home-row-stragety {
  flex-wrap: nowrap !important;
}
.home-row-stragety .col {
  flex: 15 1 0% !important;
  max-width: none !important;
  min-width: 0;
  transition: flex-grow 0.75s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: flex-grow;
  backface-visibility: hidden;
  overflow: hidden;
}
/* Cột được kích hoạt (.active, do JS gán — sticky theo hover) = 70%; còn lại 15%. */
.home-row-stragety .col.active {
  flex-grow: 70 !important;
}
/* Text: cột hẹp = dọc (gộp); cột .active = ngang. */
.home-row-stragety .col .banner-layers .text-inner,
.home-row-stragety .col .stragety-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  transition: none;
}
.home-row-stragety .col.active .banner-layers .text-inner,
.home-row-stragety .col.active .stragety-text {
  writing-mode: horizontal-tb;
  transform: none;
  white-space: normal;
}
/* Cột không active: chỉ hiện h3 (dọc), ẩn p. Active: hiện cả p. */
.home-row-stragety .col:not(.active) .banner-layers .text-inner p {
  display: none;
}
.stragety-text {
  font-size: 18px;
}
/* ==========================================================================
   home-row-why — hàng 6 icon-box "Vì sao chọn" trên trang chủ.
   Row class: home-row-why | Col class: item item-1 ... item-6.
   Builder: đặt Columns 6 (large) / 3 (medium) / 2 (small).
   Card sang trọng (kem→trắng, accent nâu–vàng), nhiều hiệu ứng, hover hiện đại.
   ========================================================================== */
.home-row-why .col {
  padding: 10px;
}
.home-row-why .col .col-inner {
  height: 100%;
}
/* Thẻ icon-box = card */
.home-row-why .col .icon-box {
  position: relative;
  height: 100%;
  margin: 0;
  padding: 30px 20px 26px;
  border-radius: 18px;
  background: linear-gradient(165deg, #fffaf2 0%, #ffffff 60%);
  border: 1px solid rgba(17, 24, 39, 0.12);
  box-shadow: 0 14px 34px -20px rgba(40, 30, 15, 0.28);
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.5s ease,
    border-color 0.5s ease,
    background 0.5s ease;
}
/* Dải accent nâu–vàng trượt ra ở đỉnh khi hover */
.home-row-why .col .icon-box::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--fs-color-primary) 0%,
    var(--fs-color-secondary) 50%,
    var(--fs-color-primary) 100%
  );
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 2;
}
/* Số thứ tự watermark mờ ở góc — gán theo item-1..6 */
.home-row-why .col .icon-box::after {
  position: absolute;
  top: 8px;
  right: 14px;
  font-size: 46px;
  font-weight: 800;
  line-height: 1;
  color: rgba(17, 24, 39, 0.07);
  transition:
    color 0.5s ease,
    transform 0.5s ease;
  z-index: 0;
  pointer-events: none;
}
.home-row-why .col.item-1 .icon-box::after {
  content: "01";
}
.home-row-why .col.item-2 .icon-box::after {
  content: "02";
}
.home-row-why .col.item-3 .icon-box::after {
  content: "03";
}
.home-row-why .col.item-4 .icon-box::after {
  content: "04";
}
.home-row-why .col.item-5 .icon-box::after {
  content: "05";
}
.home-row-why .col.item-6 .icon-box::after {
  content: "06";
}
.home-row-why .col .icon-box:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 202, 8, 0.55);
  background: linear-gradient(165deg, #fff6e6 0%, #ffffff 65%);
  box-shadow: 0 30px 56px -24px rgba(17, 24, 39, 0.42);
}
.home-row-why .col .icon-box:hover::before {
  transform: scaleX(1);
}
.home-row-why .col .icon-box:hover::after {
  color: rgba(255, 202, 8, 0.22);
  transform: translateY(-2px) scale(1.05);
}
/* Icon: vòng tròn gradient, glow + scale + xoay nhẹ khi hover */
.home-row-why .col .icon-box .icon-box-img {
  position: relative;
  z-index: 1;
  margin: 0 auto 16px;
}
.home-row-why .col .icon-box .icon-box-img .icon {
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff6d6 0%, #ffe9a3 100%);
  box-shadow: 0 8px 20px -10px rgba(17, 24, 39, 0.5);
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.55s ease,
    background 0.55s ease;
}
.home-row-why .col .icon-box:hover .icon-box-img .icon {
  transform: scale(1.1) rotate(-6deg);
  background: radial-gradient(circle at 30% 30%, #ffe28a 0%, var(--fs-color-secondary) 100%);
  box-shadow: 0 16px 30px -10px rgba(255, 202, 8, 0.6);
}
.home-row-why .col .icon-box .icon-box-img .icon img,
.home-row-why .col .icon-box .icon-box-img .icon svg,
.home-row-why .col .icon-box .icon-box-img .icon i {
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.home-row-why .col .icon-box:hover .icon-box-img .icon img,
.home-row-why .col .icon-box:hover .icon-box-img .icon svg,
.home-row-why .col .icon-box:hover .icon-box-img .icon i {
  transform: scale(1.08);
}
/* Chữ */
.home-row-why .col .icon-box .icon-box-text {
  position: relative;
  z-index: 1;
}
.home-row-why .col .icon-box .icon-box-text h3,
.home-row-why .col .icon-box .icon-box-text h4 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #2b2b2b;
  transition:
    color 0.4s ease,
    letter-spacing 0.4s ease;
}
.home-row-why .col .icon-box:hover .icon-box-text h3,
.home-row-why .col .icon-box:hover .icon-box-text h4 {
  color: var(--fs-color-primary);
  letter-spacing: 0.2px;
}
.home-row-why .col .icon-box .icon-box-text p {
  font-size: 13.5px;
  line-height: 1.65;
  color: #6a6a6a;
  margin: 0;
}
/* Hiệu ứng xuất hiện so le theo item-1..6 */
@keyframes whyFadeUp {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.home-row-why .col {
  opacity: 0;
  animation: whyFadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.home-row-why .col.item-1 {
  animation-delay: 0.05s;
}
.home-row-why .col.item-2 {
  animation-delay: 0.12s;
}
.home-row-why .col.item-3 {
  animation-delay: 0.19s;
}
.home-row-why .col.item-4 {
  animation-delay: 0.26s;
}
.home-row-why .col.item-5 {
  animation-delay: 0.33s;
}
.home-row-why .col.item-6 {
  animation-delay: 0.4s;
}
@media (max-width: 849px) {
  .home-row-why .col .icon-box {
    padding: 24px 16px 22px;
  }
  .home-row-why .col .icon-box::after {
    font-size: 38px;
  }}
@media (prefers-reduced-motion: reduce) {
  .home-row-why .col {
    opacity: 1;
    animation: none;
  }
  .home-row-why .col .icon-box,
  .home-row-why .col .icon-box::before,
  .home-row-why .col .icon-box::after,
  .home-row-why .col .icon-box .icon-box-img .icon {
    transition: none;
  }}
.real-author-tabs li.active a,
.real-author-tabs li.active button,
.real-author-topics-list li a:hover {
  color: var(--primary);
}
.real-author-tab-content {
  display: none;
}
.real-author-tab-content.active {
  display: flex;
}
.real-author-post-cover {
  inset: 0;
  z-index: 1;
  display: block;
}
.real-author-post-card .real-author-card-head a,
.real-author-post-card .real-author-card-head button {
  position: relative;
  z-index: 2;
}
.real-author-about-section:last-child,
.real-author-topics-section:last-child,
.entry-author.author-box .real-author-link {
  margin-bottom: 0;
}
.real-author-detail .author-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.real-author-tab-content .real-post-list {
  background: var(--white);
  padding: 15px 5px;
}
.blog-author-image {
  flex-basis: 100px;
  max-width: 100px;
}
.real-blog-author-avatar-fallback {
  width: 100px;
  height: 100px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 84, 252, 0.08);
  color: var(--primary);
  font-size: 38px;
}
.entry-author.author-box .author-name {
  text-transform: capitalize;
}
.entry-author.author-box .real-author-detail .author-desc {
  color: var(--text-second);
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 10px;
}
.real-content-attribution {
  margin: 18px 0;
}
.real-content-attribution__sections {
  align-items: stretch;
}
.real-content-attribution__col > .col-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.real-content-attribution__col .real-related-title {
  margin-bottom: 12px;
}
.real-content-attribution__cards {
  display: grid;
}
.entry-author.author-box.real-person-card,
.real-person-card {
  display: block;
  gap: 0;
  box-sizing: border-box;
  height: 100%;
  margin: 0;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.045);
}
.real-content-attribution .entry-author.author-box.real-person-card {
  display: block !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 14px !important;
}
.entry-author.author-box.real-content-attribution__author-box {
  gap: 14px;
  box-sizing: border-box;
  height: 100%;
  margin: 0;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.045);
}
.real-content-attribution .entry-author.author-box.real-content-attribution__author-box {
  margin: 0 !important;
  padding: 14px !important;
}
.real-content-attribution__author-box .real-author-detail {
  min-width: 0;
}
.real-content-attribution__author-box .author-name {
  margin: 0 0 8px;
}
.real-content-attribution__author-box .real-author-link {
  margin-top: 10px;
}
.real-person-card__inner {
  align-items: flex-start;
  gap: 14px;
}
.real-person-card__media {
  flex: 0 0 88px;
}
.real-person-card .blog-author-image {
  width: 86px;
  height: 86px;
  max-width: 86px;
  flex-basis: 86px;
  padding: 6px;
  overflow: hidden;
  border-radius: 50%;
  background: rgba(13, 84, 252, 0.07);
}
.real-person-card .blog-author-image img,
.real-person-card .real-blog-author-avatar-fallback {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 50%;
}
.real-person-card .real-blog-author-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
}
.real-person-card__body {
  flex-direction: column;
  min-width: 0;
}
.real-person-card .author-name {
  margin: 0 0 4px;
  color: var(--text);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
  text-transform: none;
}
.real-person-card .author-name a {
  color: inherit;
  text-decoration: none;
}
.real-person-card .author-name a:hover {
  color: var(--primary);
}
.real-person-card .real-author-title {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}
.real-person-card .author-desc {
  margin: 0 0 10px;
  color: var(--text-second);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.real-content-attribution .real-author-detail .author-desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.real-course-teacher-card__skills {
  margin: 0 0 12px;
}.real-course-teacher-card__skills span{
  min-height: 26px;
  padding: 4px 9px;
  background: rgba(13, 84, 252, 0.07);
  color: var(--primary);
  line-height: 1.2;
}
.real-person-card__socials {
  margin: 0 0 10px;
}.real-person-card__socials a{
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid rgba(13, 84, 252, 0.14);
  background: rgba(13, 84, 252, 0.04);
  color: var(--text);
  line-height: 1;
  text-decoration: none;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}
.real-person-card__socials a:hover {
  border-color: var(--primary);
  background: rgba(13, 84, 252, 0.09);
  color: var(--primary);
}
.real-person-card__socials svg,
.real-person-card__socials i,
.real-person-card__socials .real-rd-icon {
  width: 14px;
  height: 14px;
  color: var(--primary);
}.real-person-card__cta a{
  display: inline;
  min-height: 0;
  border-radius: 0;
  background: transparent;
  color: var(--primary) !important;
  line-height: inherit;
  text-decoration: none;
}
.real-person-card__cta a:hover {
  text-decoration: underline;
}
.author-card h3 #reply-title {
  font-size: 18px;
  display: block;
  font-weight: 600;
  color: var(--heading);
  margin-bottom: 20px;
  text-transform: capitalize;
}
.real-author-meta-list li .real-meta-label {
  color: var(--text-second);
}
.real-author-tabs li a,
.real-author-tabs li button {
  display: flex;
  align-items: center;
  color: var(--text-second);
}
.real-author-profile {
  background: var(--background);
  min-height: 100vh;
}
.real-author-cover {
  width: 100%;
  height: 320px;
  background: linear-gradient(135deg, var(--primary) 0, var(--secondary) 100%);
  background-size: cover;
  background-position: center;
  position: relative;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}
.real-author-cover::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.55) 100%);
  pointer-events: none;
}
.real-author-header {
  margin-top: calc(-168px - 36px);
  padding: 0 24px 28px;
  position: relative;
  z-index: 2;
}
.real-author-avatar {
  flex-shrink: 0;
}
.real-author-avatar img,
.real-author-avatar-fallback {
  width: 168px;
  height: 168px;
  border: 5px solid var(--white);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  background: var(--white);
}
.real-author-avatar img {
  object-fit: cover;
}
.real-author-avatar-fallback {
  color: var(--primary);
  font-size: calc(168px * 0.38);
}
.author-info {
  margin-left: 20px;
  padding-bottom: 12px;
}
.author-info h1 {
  font-size: 30px;
  font-weight: 900;
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.5px;
}
.author-info .real-author-title {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.88);
  margin: 4px 0 0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.real-author-stats {
  margin-left: auto;
  gap: 24px;
  padding-bottom: 4px;
}
.author-info h1,
.real-author-stat .real-stat-number {
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}
.real-author-stat .real-stat-number {
  display: block;
}
.real-author-stat .real-stat-label {
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.real-author-tabs-wrapper {
  border-top: 1px solid var(--border);
  background: var(--white);
  border-radius: 0 0 8px 8px;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  margin-top: 8px;
}
.real-author-tabs {
  list-style: none;
  padding: 0 16px;
  margin: 0;
  gap: 4px;
}
.real-author-tabs li a,
.real-author-tabs li button {
  gap: 8px;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  background: 0 0;
  border: 0;
  cursor: pointer;
  border-radius: 8px;
  transition:
    background 0.2s,
    color 0.2s;
  white-space: nowrap;
}
.real-author-tabs li a:hover,
.real-author-tabs li button:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text);
}
.real-author-tabs li.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 12px;
  right: 12px;
  height: 3px;
  background: var(--primary);
  border-radius: 3px 3px 0 0;
}
.real-author-tabs li a i,
.real-author-tabs li button i {
  font-size: 16px;
}
.author-card,
.real-author-section-title {
  background: var(--white);
  border-radius: 8px;
  padding: 15px;
  border: 1px solid var(--border);
}
.real-author-section-title {
  color: var(--text);
  margin: 0 0 16px;
  padding: 16px 20px;
}
.real-author-section-title--inline {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin-bottom: 16px;
}
.real-teacher-profile-courses,
.teacher-profile-reviews__panel {
  padding: 20px;
}
.teacher-profile-videos h3 {
  margin-bottom: 14px;
}
/* Real Teacher — featured card (mockup #24). type vertical: ảnh trái|info phải; normal: info xuống dưới.
   Màu đo pixel: name #151515, subtitle cyan #54ade9, star #fcca37, IELTS badge #fed42d. */
.real-teacher-list .post-item { margin-bottom: 0; }

/* Real Teacher — skeleton NATIVE .box(-vertical)/.box-image/.box-text (luật 2026-07-17).
   vertical: table native ảnh trái|body phải; normal: box-text-bottom; avatar: modifier riêng. */
/* VERTICAL = slide 1 row 2 col native (old site: .row > .col-6 + .col-6, khung trắng 488×555 r48). */
.real-teacher-media { position: relative; display: inline-block; max-width: 488px; width: 100%; }
/* native-miss: khung trắng bo 48px theo mockup (đo old cards-wr) */
.real-teacher-frame { position: relative; aspect-ratio: 488 / 555; border-radius: 48px; border: 1px solid #ececec; background: #f6f8fc; box-shadow: 0 24px 54px rgba(13, 48, 122, .10); overflow: hidden; }
.real-teacher-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; }
.real-teacher.row .post-title { margin-top: 0; font-size: 32px; }
/* native-miss: khung ảnh bo góc + viền + shadow theo mockup — CHIỀU CAO do att image_height
   (image-cover native, UX Builder chỉnh), KHÔNG aspect-ratio CSS cứng */
.real-teacher .box-image { border-radius: 22px; border: 1px solid #ececec; background: #f6f8fc; box-shadow: 0 24px 54px rgba(13, 48, 122, .10); }
.real-teacher .box-image .image-cover img { object-position: 50% 8%; }
/* native-miss: navy brand mockup trên placeholder */
.real-teacher-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #0d307a; font-size: 64px; }
/* badge xoay: vòng chữ (::before, xoay) + logo mark (::after) — CSS var từ attr ring/mark.
   Ring tràn góc phải-trên, overflow:hidden NATIVE của .box-image cắt theo bo góc (đo site cũ). */
.real-teacher .box-image::before, .real-teacher-frame::before,
.real-teacher .box-image::after, .real-teacher-frame::after { content: ''; position: absolute; z-index: 2; background: center / contain no-repeat; pointer-events: none; }
/* ring/mark 50% (user chốt 2026-07-17 — bản 288/72 chiếm 59% khung, quá to) */
.real-teacher .box-image::before, .real-teacher-frame::before { top: -55px; right: -55px; width: 144px; height: 144px; background-image: var(--real-badge-ring); animation: real-spin 20s linear infinite; }
.real-teacher .box-image::after, .real-teacher-frame::after { top: -1px; right: -1px; width: 36px; height: 36px; background-image: var(--real-badge-mark); }
@media (prefers-reduced-motion: reduce) { .real-teacher .box-image::before, .real-teacher-frame::before { animation: none; } }
/* native-miss: huy hiệu IELTS hộp vàng viền kép neo đáy khung — mockup riêng */
.real-teacher-badge { position: absolute; z-index: 3; left: 50%; bottom: 24px; transform: translateX(-50%); padding: 12px 24px; border-radius: 8px; background: #fed42d; box-shadow: inset 0 0 0 3px #fed42d, inset 0 0 0 5px #fff, inset 0 0 0 8px #fed42d; color: #151515; font-size: 18px; font-weight: 700; white-space: nowrap; }
.real-teacher-badge strong { font-weight: 800; }
/* vertical: badge đè mép dưới khung (media relative, badge ngoài frame khỏi bị overflow cắt) */
.real-teacher-media > .real-teacher-badge { bottom: -27px; }
/* body: post-title native + size mockup; job cyan brand; bullets sao */
.real-teacher .post-title { margin: 0 0 8px; font-size: 30px; line-height: 1.2; }
.real-teacher .post-title a { color: #151515; font-weight: 800; }
/* native-miss: phụ đề cyan brand mockup */
.real-teacher-job { margin: 0 0 24px; color: #54ade9; font-size: 16px; font-weight: 700; line-height: 1.4; }
.real-teacher ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.real-teacher li { display: flex; gap: 12px; text-align: left; }
/* native-miss: sao vàng brand mockup */
.real-teacher li i { flex: none; margin-top: 3px; color: #fcca37; font-size: 15px; }
.real-teacher li span { color: #282828; font-size: 16px; line-height: 1.55; }
/* native-miss: khoảng cách 40px theo mockup (utility chỉ có bước 30/15) */
.real-teacher-more { margin-top: 40px; }

@media (max-width: 849px) {
  .real-teacher-media { max-width: 420px; }
  .real-teacher.row .col-inner.text-left { padding-top: 40px; }
  .real-teacher .post-title, .real-teacher.row .post-title { font-size: 24px; }
}

/* Real Achievements — featured card (mockup #28) trên skeleton NATIVE .box/.box-image/.box-text.
   .box-vertical native lo layout ảnh trái|text phải; custom CHỈ: navy brand + badge + số đo mockup. */
.real-ach-list .post-item { margin-bottom: 0; }
/* native-miss: depth attr chỉ áp col; card cần radius+shadow riêng theo mockup */
.real-ach { border-radius: 20px; overflow: hidden; box-shadow: 0 24px 54px rgba(13, 48, 122, .12); }
/* native-miss: equal-height slider — flickity cell absolute không stretch */
.real-ach.box-vertical { height: 468px; }
/* native-miss: mockup đo ảnh 42% ≠ 50% native của box-vertical */
.real-ach.box-vertical .box-image { width: 42%; }
.real-ach.box-vertical .box-image,
.real-ach.box-vertical .box-text { height: 100%; }
.real-ach .box-image { min-height: 360px; }
.real-ach .box-image > a, .real-ach .box-image img { height: 100%; }
.real-ach .box-image img { object-fit: cover; object-position: 50% 12%; }
.real-ach:not(.box-vertical) .box-image { aspect-ratio: 4 / 3; min-height: 0; }
/* native-miss: navy brand mockup trên placeholder */
.real-ach-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #eef2fb; color: #0d307a; font-size: 60px; }
/* badge xoay ECE: vòng chữ (::before, quay) + mark (::after) — CSS var từ attr ring/mark */
.real-ach .box-image::before,
.real-ach .box-image::after { content: ''; position: absolute; z-index: 2; background: center / contain no-repeat; pointer-events: none; }
.real-ach .box-image::before { top: 16px; left: 16px; width: 108px; height: 108px; background-image: var(--real-badge-ring); animation: real-spin 20s linear infinite; filter: drop-shadow(0 4px 10px rgba(13, 48, 122, .28)); }
.real-ach .box-image::after { top: 44px; left: 44px; width: 52px; height: 52px; background-image: var(--real-badge-mark); }
@media (prefers-reduced-motion: reduce) { .real-ach .box-image::before { animation: none; } }

/* native-miss: navy brand mockup — theme_mod primary=#00adef không có navy. KHÔNG đè display: box-vertical dựng table → box-text là
   anonymous table-cell; đè flex là phá cell (bug đo được: cell co 181px). */
.real-ach .box-text {
  padding: 52px 48px;
  background: linear-gradient(158deg, #14409a 0%, #0d307a 55%, #0a2662 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), inset 0 -40px 80px rgba(0, 0, 0, .18);
}
/* native-miss: badge IELTS pill riêng của mockup, không có class native tương đương */
.real-ach-badge { align-self: flex-start; margin-bottom: 26px; padding: 10px 22px; border-radius: 8px; background: #fecb00; color: #0d307a; font-size: 20px; font-weight: 800; letter-spacing: .02em; }
/* native-miss: line-clamp 5 dòng theo mockup */
/* inner (pattern real-box-text-inner của Repeater): flex TRONG cell — không phá table native */
.real-ach .real-box-text-inner { display: flex; flex-direction: column; height: 100%; }
.real-ach .real-ach-quote { margin: 0 0 auto; color: rgba(255, 255, 255, .92); font-size: 16px; line-height: 1.68; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.real-ach .post-title { margin: 28px 0 0; font-size: 22px; }
.real-ach .post-title a { color: #fff; font-weight: 800; }
.real-ach .box-text .is-xsmall { margin: 8px 0 0; color: rgba(255, 255, 255, .72); }
/* native-miss: pill + vàng brand mockup (không có var theme cho #fecb00) — nút vẫn là .button native */
.real-ach .box-text .button { margin-top: 22px; margin-right: 8px; border-radius: 99px; }
/* native-miss: vàng brand mockup, không có var theme */
.real-ach .button.primary { background: #fecb00; background-image: none; border-color: #fecb00; color: #0d307a; }
/* native-miss: hover vàng sáng theo mockup */
.real-ach .button.primary:hover { background: #ffd733; }

@media (max-width: 849px) {
  .real-ach.box-vertical { display: block; height: auto; }
  .real-ach.box-vertical .box-image { width: 100%; aspect-ratio: 4 / 3; min-height: 0; }
  .real-ach .box-text { padding: 32px 26px; }
  .real-ach-quote { -webkit-line-clamp: 8; }
}


.author-card h4 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}.author-card h4 i{
  color: var(--text-second);
}
.author-card .real-author-bio {
  line-height: 1.6;
  color: var(--text);
  margin: 0 0 16px;
}
.real-author-contact-list,
.real-author-meta-list,
.real-author-social-list,
.real-author-topics-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.real-author-meta-list li,
.real-author-social-list li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  font-size: 15px;
  color: var(--text);
}
.real-author-meta-list li i {
  width: 20px;
  color: var(--text-second);
  text-align: center;
  font-size: 16px;
}
.real-teacher-entry-content {
  margin-top: 24px;
}
.real-teacher-entry-content.has-toggle .real-teacher-entry-content__body {
  max-height: 180px;
  overflow: hidden;
  position: relative;
}
.real-teacher-entry-content.has-toggle:not(.is-expanded) .real-teacher-entry-content__body::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 64px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
}
.real-teacher-entry-content.is-expanded .real-teacher-entry-content__body {
  max-height: none;
}
.real-teacher-entry-content__toggle {
  margin-top: 10px;
}
.real-author-social-list li {
  padding: 6px 0;
}.real-author-social-list li a{
  padding: 6px 8px;
  text-decoration: none;
  transition: background 0.15s;
}
.real-author-social-list li a:hover,
.real-toggle-topics-btn:hover {
  background: rgba(0, 0, 0, 0.04);
}
.real-author-social-list li a i {
  width: 24px;
  text-align: center;
  font-size: 18px;
  color: var(--primary);
}
.real-author-topics-section {
  margin-bottom: 16px;
}
.real-author-topics-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.real-author-contact-list li:last-child,
.real-author-topics-list li:last-child {
  border-bottom: none;
}.real-author-topics-list li a{
  color: var(--text);
  text-decoration: none;
  transition: color 0.15s;
}
.real-author-topics-list .real-views-count {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: var(--text-second);
  white-space: nowrap;
}
.real-toggle-topics-btn {
  background: 0 0;
  border: 0;
  cursor: pointer;
  color: var(--primary);
  padding: 6px 8px;
  margin-top: 4px;
  transition: background 0.15s;
}
.author-card .image-cover {
  border-radius: 8px;
  background-size: cover;
  background-position: center;
}
.real-author-contact-list li a:hover {
  text-decoration: underline;
}
.real-author-card-head {
  flex-wrap: nowrap;
  margin-bottom: 12px;
  width: 100%;
}
.real-author-card-time {
  color: var(--text-second);
  line-height: 1.2;
  white-space: nowrap;
}.real-author-card-time i{
  line-height: 1;
}
.real-author-card-actions {
  justify-content: flex-end;
}
.button-comment,
.button-share,
.button-view {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: var(--text-second);
  background: 0 0;
  text-decoration: none;
  margin: 0;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}
.button-comment:focus-visible,
.button-comment:hover,
.button-share:focus-visible,
.button-share:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: var(--primary);
  color: var(--primary);
  outline: 0;
}
.button-view {
  padding: 4px 2px;
}
.button-comment i,
.button-share i,
.button-view i {
  font-size: 14px;
}
.button-comment.is-icon,
.button-share.is-icon,
.button-view.is-icon {
  padding: 8px;
  min-width: 34px;
  justify-content: center;
}
.button-view.is-icon {
  border: 1px solid transparent;
}.real-author-tabs button{
  background: 0 0;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.real-author-about-full,
.real-author-contact {
  background: var(--white);
  border-radius: 8px;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  padding: 24px;
}
.real-author-about-full h3,
.real-author-contact h3 {
  background: 0 0;
  padding: 0;
  box-shadow: none;
  margin-bottom: 16px;
}
.real-author-about-section {
  margin-bottom: 24px;
}
.real-author-about-section h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}.real-author-about-section p{
  line-height: 1.7;
  color: var(--text);
}
.real-author-contact-list li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
}/* native-miss: icon FA sinh runtime ở <i> — không class trực tiếp */
.real-author-contact-list li i {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* native-miss: icon FA sinh runtime ở <i> — không class trực tiếp */
.real-author-contact-list li i {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e7f3ff;
  color: var(--primary);
  font-size: 16px;
  flex-shrink: 0;
}
.real-author-contact-list li a {
  color: var(--primary);
  text-decoration: none;
}
@media (max-width: 768px) {
  #author-posts-tab > .col.large-4 > .col-inner {
    position: static;
  }
  .real-person-card {
    padding: 16px;
  }
  .real-person-card__inner {
    gap: 14px;
  }
  .real-person-card__media,
  .real-person-card .blog-author-image,
  .real-person-card .blog-author-image img,
  .real-person-card .real-blog-author-avatar-fallback {
    width: 88px;
    height: 88px;
    max-width: 88px;
    flex-basis: 88px;
  }
  .real-person-card .author-name {
    font-size: 17px;
  }
  .real-author-cover {
    height: 240px;
  }
  .real-author-header {
    margin-top: calc(-168px - 36px);
    padding: 0 24px 28px;
    position: relative;
    z-index: 2;
  }
  .author-info,
  .real-author-stats {
    margin-left: auto;
    gap: 24px;
    padding-bottom: 4px;
  }
  .author-info h1 {
    font-size: 22px;
  }
  .real-author-tabs {
    list-style: none;
    padding: 0 16px;
    margin: 0;
    gap: 4px;
  }}
@media (max-width: 551px) {
  .real-person-card__inner {
    flex-direction: column;
  }
  .real-person-card__media,
  .real-person-card .blog-author-image,
  .real-person-card .blog-author-image img,
  .real-person-card .real-blog-author-avatar-fallback {
    width: 96px;
    height: 96px;
    max-width: 96px;
    flex-basis: auto;
  }
  .real-person-card__socials {
    margin-top: 2px;
  }
  .real-author-avatar img,
  .real-author-avatar-fallback {
    width: 60px;
    height: 60px;
  }}
@media (max-width: 480px) {
  .real-author-tabs li a {
    padding: 12px 14px;
    font-size: 14px;
  }}
.real-author .col-inner ul,
.real-author .col-inner ul li {
  margin: 0;
}
.real-content-attribution .col:not(:only-child):first-child {
  padding-left: 0 !important;
}
.real-content-attribution .col:not(:only-child):last-child {
  padding-right: 0 !important;
}
.gallery-thumb {
  width: 40px;
  height: 40px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.15s ease;
  flex-shrink: 0;
}
.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 1px solid var(--border);
}
.real-loop-gallery-more {
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  color: var(--white);
}
.real-filter-options[hidden] {
  display: none !important;
}
.real-filter-toggle[aria-expanded="false"] .real-filter-toggle-icon--open,
.real-filter-toggle[aria-expanded="true"] .real-filter-toggle-icon--closed {
  display: none;
}
.real-recent-search .real-recent-item:hover {
  color: var(--text);
  font-weight: 700;
}
form.header-search-form {
  position: relative;
}
.live-search-results .real-discount-percent {
  display: none;
}
#cta-search {
  padding: 10px !important;
  height: calc(100vh - 86px);
  margin: 3px 3px 86px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#cta-search button.ux-search-submit {
  position: absolute;
  right: 0;
  top: 3px;
  bottom: 3px;
  background: transparent;
  color: var(--heading);
  border: none;
  margin: 0;
}
#cta-search .search-field {
  min-height: 3rem;
}
#cta-search /* native-miss: nút do JS live-search chèn */
button.close-live-search {
  display: none;
}
.real-search-group {
  margin-bottom: 2.5rem;
}
.real-search-group__summary {
  margin: 0 0 1.25rem;
  opacity: 0.88;
  font-size: 0.95em;
}
.spinner {
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid var(--black);
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite;
}
/* native-miss: trạng thái do JS live-search render động */
.searching {
  margin-top: 2rem;
}
.real-recent-search {
  cursor: pointer;
}
/* native-miss: nút do JS live-search chèn */
button.close-live-search {
  min-height: unset;
  line-height: 0;
  right: 5px;
  top: 5px;
  z-index: 99;
  padding: 12px 8px;
  background: #ececec;
  color: #333;
}
button.close-live-search:hover {
  background: #111;
  color: var(--white);
}
#cta-search button.ux-search-submit {
  padding: 0;
}
.searchform-wrapper:not(.form-flat) button.ux-search-submit.submit-button {
  background: 0 0;
  border: 0;
  box-shadow: unset;
  color: #333;
  position: absolute;
  right: 0;
  top: 6px;
  min-height: unset;
  height: unset;
  padding: unset;
}
.real-page-category .page-title,
.real-page-wishlist .page-title {
  padding: 15px 15px 0;
  font-size: 25px;
}
.product-attributes,
.product-attributes li {
  list-style: none;
  margin: 0;
  margin-left: 0 !important;
}
.product-attributes {
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  background: var(--white);
}
.attribute-item {
  display: grid;
  grid-template-columns: minmax(108px, 36%) 1fr;
  border: 0;
  border-bottom: 1px solid #e8edf3;
  width: 100%;
  background: var(--white);
}
.attribute-label {
  color: #64748b;
  background-color: #f8fafc;
  max-width: none;
  flex-basis: auto;
  min-height: 44px;
  border-right: 1px solid #e8edf3;
}
.single-product .page-breadcrumb .col {
  padding-left: 0;
}
.product-attributes-wrapper,
.product-box-sidebar:last-child {
  margin-bottom: 0 !important;
}
.attribute-value {
  color: var(--heading-navy);
  min-width: 0;
  word-break: break-word;
}
.attribute-item:last-child {
  border-bottom: 0;
}
.attribute-item span {
  padding: 11px 12px;
}
.real-product-short-description {
  --short-desc-line-height: 1.6;
  margin: 10px 0 18px;
  color: var(--text);
  line-height: var(--short-desc-line-height);
}
.real-product-short-description__content p {
  margin: 0;
}
.real-product-short-description__content p + p {
  margin-top: 6px;
}
.real-product-short-description.is-collapsed .real-product-short-description__content {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  max-height: calc(6em * var(--short-desc-line-height));
}
.real-product-short-description.is-expanded .real-product-short-description__content {
  max-height: none;
}
.real-product-short-description__toggle {
  right: 0;
  bottom: 0;
  padding-left: 34px;
  color: var(--primary);
  line-height: var(--short-desc-line-height);
  text-decoration: none;
  background: linear-gradient(90deg, transparent, var(--white) 28%, var(--white));
}
.real-product-short-description__toggle:hover {
  color: var(--secondary);
  text-decoration: underline;
}
.real-product-short-description__toggle[hidden] {
  display: none !important;
}
.real-product-short-description.is-expanded {
  padding-bottom: 24px;
}
.real-product-short-description.is-expanded .real-product-short-description__toggle {
  bottom: 0;
  background: var(--white);
}
.product-attributes-wrapper,
.most-viewed-widget,
.featured-posts-widget,
#products-recently-viewed,
#related-products,
.real-shop-results,
.real-product-videos {
  background: var(--white);
  padding: 15px;
  border-radius: 10px;
  margin-bottom: 20px;
}
.real-product-videos .real-product-videos__item {
  padding-bottom: 0 !important;
}
.product-suggest {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--primary) 10%, var(--white)) 0%,
    color-mix(in srgb, var(--secondary) 8%, var(--white)) 100%
  ) !important;
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
}
.product-suggest {
  padding: 30px;
  margin: 1rem auto;
  border-radius: 10px;
  border-left: unset;
  font-style: normal;
}
.product-suggest .col {
  padding: 0 !important;
}
.real-shop-results {
  padding-left: 5px;
  padding-right: 5px;
}
#products-recently-viewed,
#related-products,
.real-shop-results {
  position: relative;
}
.shop-filter-panel.active {
  display: block;
}
.product-list {
  border: 1px solid #d9d9d9;
  border-right: unset;
}
.product-category.normal .real-box-category {
  flex-direction: column;
}
.review-extra-fields {
  width: 100% !important;
}
.review-extra-fields label,
.review-extra-fields .upload-hint {
  font-weight: normal;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  margin: 0;
}
.review-extra-fields .upload-hint {
  margin-left: 10px;
  font-size: 13px;
}
.review-upload {
  gap: 8px 12px;
}
.comment_image {
  gap: 0;
}
.upload-remove {
  top: 8px;
  right: 8px;
}
.review_reply {
  padding-left: 1rem !important;
}
.live-search-results .product_list_widget .real-search-item-meta {
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.live-search-results .product_list_widget .real-search-price-rating {
  flex-direction: row;
  width: 100%;
}
.live-search-results .product_list_widget .real-search-price-rating .real-search-rating {
  margin: 0;
}
.live-search-results .product_list_widget .real-search-rating {
  line-height: 1;
  margin: 2px 0;
}
.real-shop-results.is-loading .products {
  opacity: 0.45;
}
.real-shop-loading {
  top: 50%;
  left: 50%;
  z-index: 10;
  transform: translate(-50%, -50%);
}
.real-recent-view__clear {
  top: 18px;
  right: 18px;
  color: var(--text-second);
  cursor: pointer;
}
.real-recent-view__list,
.real-related-products__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.real-recent-view__item,
.real-related-products__item {
  position: relative;
  margin: 0 !important;
  width: 100%;
}
.real-recent-view__remove {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #64748b;
  z-index: 2;
  cursor: pointer;
}
.real-recent-view__remove:after,
.real-recent-view__remove:before {
  position: absolute;
  content: "";
  top: 10px;
  right: 5px;
  width: 10px;
  height: 1px;
  border-radius: 8px;
  background-color: var(--white);
}
.real-recent-view__remove:before {
  transform: rotate(45deg);
}
.real-recent-view__remove:after {
  transform: rotate(-45deg);
}
.real-recent-view__link,
.real-related-products__link {
  display: flex !important;
  align-items: flex-start;
  border-radius: 8px;
  overflow: hidden;
  padding: 10px;
  background: var(--white);
  font-size: 14px;
  gap: 12px;
  border: 1px solid #dbe3ee;
  width: 100%;
  min-height: 104px;
  color: var(--text);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}
.real-recent-view__link:hover,
.real-related-products__link:hover {
  border-color: color-mix(in srgb, var(--primary) 35%, #dbe3ee);
  box-shadow: 0 10px 24px -22px rgba(20, 36, 92, 0.55);
  transform: translateY(-1px);
}
.real-recent-view__link img,
.real-related-products__link img {
  flex: 0 0 76px;
  width: 76px;
  height: 76px;
  object-fit: cover;
  padding: 0;
  border-radius: 4px;
  background: #f8fafc;
}
.real-recent-view__title,
.real-related-products__title {
  color: #101828;
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.real-recent-view__price,
.real-related-products__price,
.real-recent-view__price bdi,
.real-related-products__price bdi {
  margin-top: 5px;
  color: var(--alert);
  font-weight: 700;
  margin-bottom: 0;
  font-size: 15px;
  line-height: 1.25;
}
.real-related-products__rating {
  margin: 4px 0 0;
  line-height: 1;
  min-height: 16px;
}
.real-course-quality {
  margin-top: 5px;
  color: #64748b;
  line-height: 1.35;
}
.real-course-quality__badge {
  max-width: 100%;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  white-space: nowrap;
}
.real-course-quality__badge + .real-course-quality__badge::before {
  content: "·";
  margin: 0 6px;
  color: #cbd5e1;
  font-weight: 700;
}
.real-recent-view__info,
.real-related-products__info {
  min-width: 0;
  max-width: calc(100% - 88px);
  flex: 1 1 auto;
  padding-right: 18px;
}
.real-related-products__link .star-rating,
.real-recent-view__link .star-rating {
  float: none;
  margin: 0 !important;
  font-size: 12px;
  width: 5.4em;
}
#related-products .widget-title,
#products-related .widget-title,
#products-recently-viewed .widget-title,
.real-course-gallery-sidebar .widget-title {
  display: block;
  margin: 0 0 14px;
  color: var(--heading);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  text-transform: none;
}
.single-product #related-products > .widget-title,
.single-product #products-related > .widget-title,
.single-product #products-recently-viewed > .widget-title,
.single-product .real-course-gallery-sidebar > .widget-title,
.single-product #related-products > .widget-title span,
.single-product #products-related > .widget-title span,
.single-product #products-recently-viewed > .widget-title span,
.single-product .real-course-gallery-sidebar > .widget-title span {
  text-transform: none !important;
}
#related-products,
#products-related,
#products-recently-viewed,
.real-course-gallery-sidebar {
  position: relative;
}
.price .real-discount-percent {
  color: var(--red);
  background: var(--red-light);
  padding: 3px 5px;
}
.col.post-item > .col-inner,
.product-categories-items .col-inner,
.product-suggest .col-inner {
  padding: 0 !important;
}
.box-promotion-title {
  gap: 8px;
  color: var(--primary);
  font-size: 15px;
  font-weight: 700;
  padding: 10px 15px;
}.box-promotion-title i{
  flex-shrink: 0;
  width: 1.1em;
  font-size: 1.1em;
  line-height: 1;
  opacity: 0.95;
}
.box-promotion-list {
  font-size: 14px;
  line-height: 1.7;
  color: var(--heading);
  padding: 12px 15px;
}.box-promotion-list li{
  color: var(--text);
}
.product-category .cat-label {
  top: 3px;
  right: 3px;
  padding: 3px 6px;
  font-size: 10px;
  z-index: 999;
}
.product-category .cat-label.label-hot {
  background: var(--red-light);
  color: var(--red);
}
.product-category .cat-label.label-best-seller {
  background: var(--yellow-light);
  color: #8a6800;
}
.product-category .cat-label.label-new {
  background: var(--green-light);
  color: var(--green);
}
.product-category .cat-label.label-sale {
  background: var(--red-light);
  color: var(--red);
}
.product-category .cat-label.label-trending {
  background: var(--yellow-light);
  color: #b35c00;
}
@media (max-width: 768px) {
  .real-recent-view__list,
  .real-related-products__list {
    grid-template-columns: 1fr;
  }}
@media (max-width: 551px) {
  .product-small.box .box-text-products {
    padding: 10px;
  }
  .real-loop-actions a,
  .woocommerce-loop-product__link {
    font-size: 14px;
  }
  /* native-miss: col-inner của product-card Flatsome — override */
.product-list .product-small .col-inner {
    border: 1px solid #d9d9d9;
    border-radius: 5px;
    height: 100%;
    overflow: hidden;
  }
  .product-list .product-small.col {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  .product-list,
  .product-list .product-small.col {
    border: 0;
  }
  .home .product-techincal {
    display: none;
  }
  /* native-miss: target #id đơn nhất */
#review_form_wrapper {
    padding-right: 0;
    margin-bottom: 30px;
  }
  .woocommerce-review__actions {
    gap: 10px;
  }
  .woocommerce-review__action {
    padding: 4px 10px;
    font-size: 13px;
  }
  .product-list .box-text-products {
    padding: 5px 10px;
  }
  .review-extra-fields {
    flex-direction: column;
  }}
@media (min-width: 850px) {
  .product-list,
  .product-list .col {
    height: 100%;
  }
  .product-list .flickity-viewport {
    height: 100% !important;
  }}
.real-product-videos__slider {
  --product-video-gap: 12px;
}
.real-product-videos__slider .slider {
  margin-left: calc(var(--product-video-gap) / -2);
  margin-right: calc(var(--product-video-gap) / -2);
}
.real-product-videos__item {
  padding-left: calc(var(--product-video-gap) / 2) !important;
  padding-right: calc(var(--product-video-gap) / 2) !important;
  padding-bottom: var(--product-video-gap);
}
.real-product-videos__frame {
  width: 100%;
  overflow: hidden;
  background: #000;
  aspect-ratio: 9/16;
}
.real-product-videos__frame embed,
.real-product-videos__frame iframe,
.real-product-videos__frame object,
.real-product-videos__frame video {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
  display: block;
}
.real-product-videos__slider .slider.flickity-enabled .real-product-videos__item,
.real-product-videos__slider .slider.flickity-enabled .real-product-videos__item .col-inner {
  height: auto;
}
.real-product-videos__slider .slider.flickity-enabled .real-product-videos__item .col-inner {
  padding: 0 !important;
}
.real-product-videos__frame--facade {
  cursor: pointer;
  background-color: #111;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.real-product-videos__frame--facade:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -2px;
}
.real-product-videos__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  margin: -32px 0 0-32px;
  background: rgba(0, 0, 0, 0.55);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(2px);
  transition:
    transform 0.15s ease,
    background 0.15s ease;
  pointer-events: none;
}
.real-product-videos__play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  margin-top: -11px;
  margin-left: -6px;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 18px solid #fff;
}
.real-product-videos__frame--facade:hover .real-product-videos__play {
  transform: scale(1.06);
  background: rgba(0, 0, 0, 0.7);
}
.real-product-videos__frame--raw::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: grab;
  background: 0 0;
}
.real-product-videos__slider.is-dragging .real-product-videos__frame--raw::after {
  cursor: grabbing;
}
form.cart .buttons-quickbuy {
  margin-top: 10px;
}
.real-product-videos__frame--raw.is-active::after {
  display: none;
}
.real-rating-breakdown {
  flex-direction: column;
}
.real-rating-breakdown__row {
  line-height: 1.4;
  color: var(--text);
}
.real-rating-breakdown__label {
  flex: 0 0 auto;
  color: var(--heading, var(--text));
  white-space: nowrap;
  min-width: 44px;
}
.real-rating-breakdown__label-value {
  font-variant-numeric: tabular-nums;
}
.real-rating-breakdown__bar {
  flex: 1 1 auto;
  height: 8px;
  background: var(--border, #e5e5e5);
  overflow: hidden;
  min-width: 80px;
}
.real-rating-breakdown__fill {
  display: block;
  height: 100%;
  background: var(--star, var(--second-color));
  transition: width 0.3s ease;
}
.real-rating-breakdown__meta {
  flex: 0 0 auto;
  min-width: 130px;
  color: var(--text-second);
  white-space: nowrap;
}
@media (max-width: 849px) {
  .real-rating-summary .button {
    width: 100%;
  }
  .real-rating-summary {
    padding: 16px;
  }
  .real-rating-breakdown__label {
    flex: 0 0 42px;
    font-size: 12px;
  }
  .real-rating-breakdown__meta {
    min-width: 110px;
    font-size: 12px;
  }
  ul.real-review-filter-nav.nav {
    gap: 6px;
  }
  /* native-miss: tab-link sinh trong ul.nav — không class từng <a> */
ul.real-review-filter-nav.nav > li > a {
    padding: 6px 14px;
    font-size: 13px;
  }}
.real-quickbuy-form .form-row.woocommerce-invalid input,
.real-quickbuy-form .form-row.woocommerce-invalid select,
.real-quickbuy-form .form-row.woocommerce-invalid textarea {
  border-color: var(--border);
}
.product-categories-items .col-inner:hover {
  transform: translateY(-10px);
}
@media (prefers-reduced-motion: reduce) {
  .product-small .box-image::after {
    display: none;
  }}
.real-shop-results {
  background: transparent;
  padding: 0 !important;
}
.most-viewed-widget--products .real-related-posts__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.most-viewed-widget--products .real-related-products__rating {
  margin-top: 2px;
}
@media (max-width: 551px) {
  .product-box-sidebar:last-child {
    margin-bottom: 0;
  }
  .real-rating-summary {
    border: none;
    padding: 0;
  }
  .wishlist-style--button {
    padding: 3px !important;
    border: none !important;
  }
  .most-viewed-widget {
    padding: 15px;
  }
  .most-viewed-widget .top-viewed-item .real-top-rank {
    width: 24px;
    height: 24px;
    font-size: 0.7rem;
  }
  .comment-list li .meta .woocommerce-review__meta-actions,
  .commentlist li .meta .woocommerce-review__meta-actions {
    margin-left: unset;
  }}
.select2-container .select2-selection {
  border-color: var(--border);
  box-shadow: unset;
}
.woocommerce-message.message-wrapper,
.woocommerce-message.message-wrapper a {
  font-size: 14px !important;
}
.real-price-contact,
.woocommerce-Price-amount.amount {
  font-weight: 700;
  font-size: 16px;
  color: var(--alert);
  display: inline-block;
}
.product-page-price .real-price-contact {
  color: var(--alert);
  font-size: 24px;
}
.product-page-price .real-price-contact {
  font-weight: 700;
  margin-bottom: 10px;
}
.live-search-results .product_list_widget .search-price .woocommerce-Price-amount {
  font-weight: inherit;
}
.cart-item .nav-dropdown {
  right: 0 !important;
  left: unset !important;
}
.woocommerce-cart-form .product-quantity .buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.woocommerce-cart-form .product-quantity .buttons .button {
  margin-bottom: 0;
}
.real-flickity-autoplay .flickity-page-dots .dot {
  position: relative;
  overflow: hidden;
}
.real-flickity-autoplay .flickity-page-dots .dot.is-selected {
  width: 26px;
  border-radius: 999px;
}
.real-flickity-autoplay .flickity-page-dots .dot.is-selected::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  animation: realFlickityDotProgress var(--real-slider-autoplay, 5000ms) linear forwards;
}.real-marquee-container:hover .real-marquee-content,
.real-toast:hover .real-toast__progress,
.real-flickity-autoplay:hover .flickity-page-dots .dot.is-selected::after {  animation-play-state: paused;
}
@keyframes realFlickityDotProgress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
#product-related-posts {
  position: relative;
}
#related-posts-heading {
  font-size: 18px;
  display: block;
  font-weight: 600;
  color: var(--heading);
  margin-bottom: 20px;
  text-transform: capitalize;
}
.real-sale-progress .inner {
  padding: 10px 12px;
}
.real-sale-progress progress::-webkit-progress-bar {
  background: #ececec;
  border-radius: 999px;
}
.real-sale-progress progress::-moz-progress-bar,
.real-sale-progress progress::-webkit-progress-value {
  background: linear-gradient(90deg, var(--second-color) 0, #ff6b00 100%);
  border-radius: 999px;
}
.real-loop-actions a,
.real-loop-actions button {
  color: var(--text);
  padding: 10px;
  line-height: 1 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 16px;
  margin: 0 !important;
  vertical-align: unset;
  border: 0 !important;
}
.real-loop-actions a:hover,
.real-loop-actions button:hover {
  background: unset;
  border: unset !important;
  color: var(--alert);
}
@media (max-width: 551px) {
  .real-loop-actions a,
  .real-loop-actions button {
    padding: 0;
  }}
@media (max-width: 551px) {
  .sale-cta-commit .icon-box-text {
    font-size: 14px;
  }}
/* WooCommerce product — load only on relevant page. */
.product-box-sidebar {
  margin-bottom: 18px;
}
.product-box-shipping-list strong {
  color: var(--primary);
}.product-box-shipping-list li:nth-child(2) span{
  justify-content: space-between;
}
.product-box-shipping-list li,
.product-box-guaranty li {
  border-bottom: 1px solid #d9d9d9;
  padding: 10px 0;
  margin: 0;
}
.product-box-shipping-list li:last-child,
.product-box-guaranty li:last-child {
  border: none;
  padding-bottom: 5px;
}.product-box-guaranty li:last-child sub{
  max-width: 100%;
  flex-basis: 100%;
  padding-left: 30px;
  color: #9c9d9e;
}
.product-box-guaranty li:last-child {
  flex-wrap: wrap;
}
.single .product-techincal i {
  display: none;
}
.product-techincal {
  overflow: hidden;
  margin-bottom: 15px;
  font-size: 12px;
}
.single .product-techincal {
  border: 1px dashed var(--border);
  padding: 8px;
  border-radius: 6px;
  margin: 20px 0;
  font-size: 14px;
  color: var(--heading);
}.techincal-list li{
  color: var(--text);
}.techincal-label i{
  width: 18px;
  height: 18px;
  margin-right: 5px;
  top: -1px;
}
.wishlist-toggle {
  border: 1px solid var(--border) !important;
  width: max-content !important;
  flex: unset !important;
}
.shop-archive-header-row {
  margin-bottom: 18px;
}
.real-shop-archive-header {
  padding: 14px 0 10px;
}
.real-shop-archive-title {
  margin: 0 0 8px;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.04;
  letter-spacing: 0;
}
.real-shop-archive-header .real-shop-breadcrumb,
.real-shop-archive-header .breadcrumbs {
  display: flex;
  justify-content: center;
}
.real-course-summary-spec {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 4px 0 16px;
}
.real-course-summary-spec__item {
  gap: 8px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--border, #e5e5e5);
  background: #fff;
}
.real-course-summary-spec__icon,
.real-course-spec__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  color: var(--primary-color);
  background: color-mix(in srgb, var(--primary-color) 12%, #fff);
}
.real-course-summary-spec__text {
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}
.real-course-summary-spec__label {
  color: var(--muted, var(--real-text-muted));
}
.real-course-summary-spec__value {
  color: var(--heading);
  overflow-wrap: anywhere;
}
.real-loop-course-summary .real-course-summary-spec {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 8px 0 10px;
}
.real-loop-course-summary .real-course-summary-spec__item {
  gap: 6px;
  padding: 6px 7px;
  border-radius: 6px;
  background: #f8fafc;
}
.real-loop-course-summary .real-course-summary-spec__icon {
  width: 22px;
  height: 22px;
}
.real-loop-course-summary .real-course-summary-spec__label {
  font-size: 10px;
}
.real-loop-course-summary .real-course-summary-spec__value {
  font-size: 11px;
  line-height: 1.2;
}
.real-course-spec {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--border, #e5e5e5);
  overflow: hidden;
  background: #fff;
}
.real-course-spec__row {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 6px 10px;
  min-width: 0;
  padding: 16px;
  border-right: 1px solid var(--border, #e5e5e5);
  border-bottom: 1px solid var(--border, #e5e5e5);
}
.real-course-spec__row:nth-child(3n) {
  border-right: 0;
}
.real-course-spec__row:nth-last-child(-n + 3) {
  border-bottom: 0;
}
.real-course-spec__icon {
  grid-row: span 2;
}
.real-course-spec__label {
  color: var(--muted, var(--real-text-muted));
  line-height: 1.25;
}
.real-course-spec__value {
  color: var(--heading);
  line-height: 1.25;
  overflow-wrap: anywhere;
}
@media (max-width: 849px) {
  .real-course-summary-spec,
  .real-course-spec {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .real-course-spec__row:nth-child(n) {
    border-right: 1px solid var(--border, #e5e5e5);
    border-bottom: 1px solid var(--border, #e5e5e5);
  }
  .real-course-spec__row:nth-child(2n) {
    border-right: 0;
  }
  .real-course-spec__row:nth-child(3n) {
    border-right: 1px solid var(--border, #e5e5e5);
  }
  .real-course-spec__row:nth-last-child(-n + 3) {
    border-bottom: 1px solid var(--border, #e5e5e5);
  }
  .real-course-spec__row:nth-last-child(-n + 2) {
    border-bottom: 0;
  }}
@media (max-width: 549px) {
  .real-course-summary-spec,
  .real-course-spec {
    grid-template-columns: 1fr;
  }
  .real-course-spec__row:nth-child(n) {
    border-right: 0;
  }
  .real-course-spec__row:last-child {
    border-bottom: 0;
  }}
.most-viewed-widget .widget-title,
.featured-posts-widget .real-related-title,
.featured-posts-widget .widget-title,
.product-section .tab-title,
.product-suggest__label {
  font-size: 18px;
  display: block;
  font-weight: 600;
  color: var(--heading);
  margin-bottom: 20px;
  text-transform: capitalize;
}
.product-list .product-small.col {
  border-right: 1px solid #d9d9d9;
  padding-top: 7.5px !important;
}
.home .product-small .box-image img {
  height: 100% !important;
  object-fit: cover;
  border-radius: 3px;
}
.real-sale-progress progress {
  width: 100%;
  height: 8px;
  vertical-align: middle;
}
.product-small.col .col-inner {
  padding: 0px !important;
}
/* native-miss: product-card Flatsome — override */
.product-small.box {
  background: var(--white);
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.product-box-promotion {
  margin: 15px 0px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--white);
}
.product-categories-items .col-inner,
.product-small.col {
  transition:
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, box-shadow;
}
.product-small.col:hover {
  transform: translateY(-5px);
  border-radius: 6px;
  overflow: hidden;
}
.product-small .box-image {
  position: relative;
  overflow: hidden;
}
.product-small .box-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 35%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 65%,
    transparent 100%
  );
  transform: translateX(-120%);
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.product-small.col:hover .box-image::after,
.product-small.has-hover:hover .box-image::after {
  transform: translateX(120%);
}
/* Nền nút do Flatsome `.button` + `.is-outline`/`.circle`/`.icon` lo (markup đã có class native). */
.real-loop-quickbuy-btn,
.loop-wishlist-btn {
  position: relative;
  gap: 4px;
}
.loop-wishlist-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.loop-wishlist-btn.primary i {
  color: var(--green, var(--success-color));
}
/* native-miss: badge count + radius do JS render động */
.real-loop-quickbuy-btn .btn-count,
.loop-wishlist-btn .btn-count {
  position: absolute;
  top: 3px;
  right: -3px;
  min-width: 13px;
  height: 13px;
  padding: 0;
  border-radius: 99px;
  background: var(--green, var(--success-color));
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 13px;
  text-align: center;
  pointer-events: none;
}
.real-shop-results .product-small.col {
  padding: 3px;
}
.row .col-inner .row .product-small.col {
  padding: 0 3px;
}
.real-rating-summary .box-text,
.real-review-gallery .box-text {
  padding-top: 0;
}
/* native-miss: target #id đơn nhất */
#review_form_wrapper {
  padding: 0;
}
.comment_container .meta .real-comment-actions,
.real-filter-options li:last-child,
.real-rating-summary .shop_table,
.review-edit .button,
.real-review-filter-nav.nav,
.real-review-gallery .row,
.real-review-pagination .real-page-number,
.techincal-list li:last-child,
:is(#real-product-comment,
.real-product-comment) .real-comment-actions {
  margin-bottom: 0;
}
:is(#real-product-comment, .real-product-comment) .comment_container .meta {
  flex-wrap: wrap;
}
.real-product-feature-information .star-rating {
  margin: 0;
}
.current-product-rating .star-rating {
  max-width: 86px;
}
.real-rating-summary,
.real-review-filter-nav,
.real-review-gallery,
:is(#real-product-comment, .real-product-comment) .commentlist {
  margin-bottom: 20px;
}
:is(#real-product-comment, .real-product-comment) .commentlist > li {
  list-style: none;
  margin-left: 0;
}
:is(#real-product-comment, .real-product-comment) .commentlist > li + li {
  border-top: 1px dashed var(--border, #e5e5e5);
  padding-top: 20px;
  margin-top: 20px;
}
:is(#real-product-comment, .real-product-comment) .comment_container {
  background: var(--white);
  border-radius: 12px;
}
#product-comment-submit,
button#toggle-review-form {
  width: max-content !important;
  display: flex;
  margin-left: auto !important;
  padding: 5px 20px !important;
  min-width: 15rem;
  align-items: center;
  justify-content: center;
}
/* native-miss: target #id đơn nhất (#real-product-comment/#reviews) */
#real-product-comment,
#reviews {
  border: 1px solid var(--border);
  padding: 15px;
  border-radius: 5px;
  background: var(--white);
}
/* native-miss: comment-reply-link do WP core sinh — không class từ theme */
.woocommerce-review__meta-actions .comment-reply-link,
.woocommerce-review__meta-actions .real-review-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  color: var(--text-second, #888);
  background: 0 0;
  border: 1px solid transparent;
  font: inherit;
  cursor: pointer;
  transition:
    color 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  line-height: 1;
}
.woocommerce-review__meta-actions .comment-reply-link:focus-visible,
.woocommerce-review__meta-actions .comment-reply-link:hover,
.woocommerce-review__meta-actions .real-review-action:focus-visible,
.woocommerce-review__meta-actions .real-review-action:hover {
  color: var(--heading, #111);
  text-decoration: none;
}
.woocommerce-review__meta-actions .comment-reply-link i,
.woocommerce-review__meta-actions .comment-reply-link svg,
.woocommerce-review__meta-actions .real-review-action i,
.woocommerce-review__meta-actions .real-review-action svg {
  font-size: 13px;
  width: 13px;
  height: 13px;
  line-height: 1;
  color: currentColor;
  fill: currentColor;
}
.woocommerce-review__meta-actions .review-action--like.is-active {
  color: var(--primary, #2563eb);
}
.woocommerce-review__meta-actions .review-action--love.is-active {
  color: #ef4444;
}
.woocommerce-review__meta-actions .real-review-action .real-review-action__count {
  display: none;
}
.woocommerce-review__meta-actions .real-review-action .real-review-action__count:not(:empty) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 14px;
  height: 14px;
  padding: 0 4px;
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  color: var(--white, #fff);
  background: var(--primary, #2563eb);
  border-radius: 999px;
  pointer-events: none;
}
.woocommerce-review__meta-actions .review-action--love .real-review-action__count:not(:empty) {
  background: #ef4444;
}
.woocommerce-review__meta-actions .review-action--like,
.woocommerce-review__meta-actions .review-action--love {
  position: relative;
}
.review-upload > .review-preview {
  flex-basis: 100%;
  width: 100%;
  margin-top: 10px;
}
.review-preview {
  margin-top: 10px;
}
.review-preview .box,
.upload-remove {
  position: relative;
  margin-bottom: 0;
}
.real-review-gallery img,
.review-preview img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #edeaea;
}
.review-edit {
  margin-top: 8px;
}
.review-edit .button + .button {
  margin-left: 8px;
}
.real-rating-summary .button {
  margin-bottom: 0;
  white-space: nowrap;
}
.real-review-gallery img {
  cursor: pointer;
  border: 1px solid #eee;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.real-review-gallery img:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.live-search-results .product_list_widget .real-search-rating .star-rating {
  float: none;
  margin: 0;
  font-size: 0.75rem;
  min-height: 1em;
  width: 5.4em;
}
.real-related-products__rating .star-rating {
  font-size: 12px;
  float: none;
  margin: 0;
}
.real-rating-summary {
  background: var(--white, #fff);
  padding: 20px 24px;
}
.real-rating-summary .woocommerce-product-rating p.is-large {
  font-size: 30px;
  line-height: 1.1;
  font-weight: 700;
  color: var(--heading, var(--text));
  margin-bottom: 4px;
}
.real-rating-summary .woocommerce-product-rating .star-rating {
  margin: 4px auto;
  width: 90px;
}
/* native-miss: nằm trong #id review-summary đơn nhất */
#real-product-review-summary .woocommerce-product-rating {
  display: flex;
  min-height: 84px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* native-miss: text-align trong #id review-summary đơn nhất */
#real-product-review-summary .woocommerce-product-rating p.is-large {
  width: 100%;
  margin: 0 0 7px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* native-miss: star-rating trong #id review-summary đơn nhất */
#real-product-review-summary .woocommerce-product-rating .star-rating {
  float: none;
  display: block;
  margin: 0 auto !important;
  text-align: left;
}
.real-rating-breakdown,
ul.real-review-filter-nav.nav {
  display: flex;
  gap: 8px;
  padding: 0;
  list-style: none;
}
.real-rating-breakdown__label i,
ul.real-review-filter-nav.nav > li > a.real-review-filter--star i {
  color: var(--star, var(--second-color));
  font-size: 13px;
  line-height: 1;
}
.real-rating-summary button.real-review-focus-target {
  padding: 12px 24px;
  letter-spacing: 0;
  min-height: 44px;
}
.real-rating-summary button.real-review-focus-target:hover {
  background: var(--primary);
  border-color: var(--primary);
}
ul.real-review-filter-nav.nav {
  flex-wrap: wrap;
  border: 0;
}
ul.real-review-filter-nav.nav > li {
  margin: 0;
  border: 0;
}
/* native-miss: tab-link sinh trong ul.nav — không class từng <a> */
ul.real-review-filter-nav.nav > li > a {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: 999px;
  background: 0 0;
  color: var(--text);
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}
ul.real-review-filter-nav.nav > li > a:hover {
  background: var(--border, rgba(0, 0, 0, 0.04));
  color: var(--heading, var(--text));
}
.real-rating-summary button.real-review-focus-target,
ul.real-review-filter-nav.nav > li.active > a,
ul.real-review-filter-nav.nav > li > a[aria-pressed="true"] {
  background: var(--primary, #111);
  color: var(--white, #fff);
  border-color: var(--primary, #111);
}
ul.real-review-filter-nav.nav > li > a.real-review-filter--star .review-filter__value {
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
ul.real-review-filter-nav.nav > li.active > a.real-review-filter--star i,
ul.real-review-filter-nav.nav > li > a.real-review-filter--star[aria-pressed="true"] i {
  color: var(--star, var(--second-color));
}
.real-review-gallery .widget-title {
  color: var(--primary);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
}
.woocommerce-page .star-rating::before,
.woocommerce-page .star-rating span::before {
  content: "\2605\2605\2605\2605\2605" !important;
  color: var(--color-warning);
  opacity: 1;
  letter-spacing: 0.08em;
}
.woocommerce-page .star-rating::before {
  font-family: inherit !important;
  position: absolute;
  top: 0;
  left: 0;
}
.woocommerce-checkout #customer_details {
  padding: 15px;
}
.woocommerce-checkout #customer_details {
  background: var(--white);
  border-width: 0;
}
.payment_methods input[type="radio"].input-radio,
.woocommerce .payment_methods input[type="radio"],
.woocommerce .shipping_method,
.woocommerce form input[type="checkbox"],
.woocommerce form input[type="radio"],
.woocommerce-checkout .shipping_method,
.woocommerce-page .shipping_method {
  position: relative !important;
  display: inline-block !important;
  width: 36px !important;
  height: 20px !important;
  margin: 0 8px 0 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  clip: auto !important;
  clip-path: none !important;
}
.real-quickbuy-form .woocommerce-input-wrapper,
form.checkout .woocommerce-input-wrapper {
  position: relative;
}
.product_meta > span,
.product-section,
.product-footer .woocommerce-tabs,
.widget_shopping_cart p.total,
.cart-sidebar .widget-title,
.shop_table .order-total td,
.shop_table .order-total th,
.shop_table thead th,
.woocommerce-cart .cart_totals *,
.woocommerce-cart-form__contents *,
.woocommerce-billing-fields,
.woocommerce-checkout-review-order-table tr,
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td,
.order_details th,
.order_details tr,
.order_details td {
  border: none;
}
.woocommerce-billing-fields__field-wrapper input,
.woocommerce-billing-fields__field-wrapper select,
.woocommerce-billing-fields__field-wrapper textarea,
.select2-container .select2-choice,
.select2-container .select2-selection,
.woocommerce-MyAccount-content input,
.woocommerce-MyAccount-content button,
.woocommerce-MyAccount-content textarea {
  border-radius: 3px;
}
.woocommerce-billing-fields__field-wrapper input,
.woocommerce-billing-fields__field-wrapper select,
.woocommerce-billing-fields__field-wrapper textarea,
.select2-container .select2-choice,
.select2-container .select2-selection,
.select2-container--default .select2-search--dropdown .select2-search__field,
.woocommerce-order .entry-content,
.woocommerce-MyAccount-content input,
.woocommerce-MyAccount-content button,
.woocommerce-MyAccount-content textarea {
  box-shadow: unset;
}
.product-section,
.shop_table .cart_item td,
.shop_table tfoot tr td,
.shop_table thead tr th:last-of-type,
.shop_table tr td:last-of-type,
.woocommerce-billing-fields,
.woocommerce-cart .row-divided > .col + .col:not(.large-12) {
  border: 0;
}
.woocommerce-checkout .payment_methods input[type="radio"],
.woocommerce-page .payment_methods input[type="radio"] {
  position: relative !important;
  display: inline-block !important;
  width: 36px !important;
  height: 20px !important;
  margin: 0 8px 0 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  clip: auto !important;
  clip-path: none !important;
}
textarea#order_comments {
  border-radius: 3px;
}
textarea#order_comments {
  box-shadow: unset;
}
#billing_address_2_field > label,
#shipping_address_2_field > label {
  opacity: 1 !important;
  width: max-content !important;
}
button.single_add_to_cart_button.button.alt {
  color: var(--primary);
  font-weight: normal;
}
/* Gộp nút "Đặt mua ngay" + form CTA thành 1 hàng 2 cột. */
.buttons-quickbuy {
  display: flex;
  align-items: stretch;
}
.buttons-quickbuy > a,
.buttons-quickbuy .form-ssl-btn {
  flex: 1 1 0;
  margin: 0;
  min-width: 0;
}.buttons-quickbuy .form-ssl-btn > a{
  display: flex;
  flex-direction: column;
  height: 100%;
}
.single_add_to_cart_button::before {
  content: "";
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  margin-right: 7px;
  vertical-align: -0.2em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
/* Chế độ Chiều ngang: ảnh khóa học cố định 350px từ ≥550px. */
@media screen and (min-width: 550px) {
  .products .box-vertical .box-image {
    min-width: 350px !important;
    width: 350px !important;
  }}
/* Nav danh mục con (chip) dưới breadcrumb trong real-shop-archive-header. */
.real-shop-children-nav {
  margin: 10px 0 0;
}
.header-nav-links > .menu-item {
  margin: 0;
}
.header-nav-links > .menu-item > .nav-top-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  color: currentColor;
  transition: color 0.3s ease;
}
.header-nav-links > .menu-item > .nav-top-link:hover {
  color: var(--primary-color, var(--accent-brand));
}
.header-nav-links .nav-icon {
  width: 23px;
  height: 23px;
  color: var(--primary);
  line-height: 1;
}
.header-nav-links img.nav-icon {
  object-fit: contain;
}
@media (max-width: 768px) {
  .header-nav-links {
    gap: 10px;
  }
  .header-nav-links > .menu-item > .nav-top-link {
    font-size: 11px;
  }}
.header-nav .header-vertical-menu__opener {
  width: max-content;
  padding: 0;
  background: transparent;
  font-weight: normal;
}
.header-nav .icon-angle-down {
  display: none;
}
.header-nav .header-vertical-menu__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  margin-right: 10px;
  color: var(--primary);
}
.header-social-icons .real-rd-icon {
  color: var(--fs-color-secondary);
}.footer-col-support .ux-menu-link__text,
.comment_image,
.review-upload,
.header-user-container,
.header-user-wrapper {  display: flex;
  align-items: center;
}.real-recent-search,
.searching,
.real-product-feature-information,
.header-user-container {  gap: 10px;
}
.header-user-wrapper .real-header-user-slot.has-dropdown:hover > .nav-dropdown,
.no-js .header-user-wrapper .real-header-user-slot.has-dropdown:hover > .nav-dropdown {
  left: auto;
  right: 0;
  opacity: 1;
  visibility: visible;
  max-height: inherit;
}
.cart-dropdown {
  min-width: 320px;
}
.dark .header-user-wrapper ul.nav-dropdown {
  background: var(--surface-inverse-strong);
}
@media (max-width: 768px) {
  .header-user-container {
    gap: 8px;
  }}
.header-nav .nav-dropdown .ux-mini-cart-footer,
.header-nav .nav-dropdown .woocommerce-mini-cart {
  padding: 15px !important;
}
.real-header-location-li .nav-dropdown {
  padding: 15px;
}
.nav-top-link.real-header-user-link .real-header-user-title {
  margin-right: 0.4em;
  white-space: nowrap;
  font-size: 0.85em;
  opacity: 0.92;
}
/* Compact language switcher: flag + uppercase code (VI/EN) only. */
.real-header-language-dropdown--compact .header-language-dropdown__link {
  gap: 0.4em;
}
/* native-miss: phần tử do JS dropdown ngôn ngữ render */
.real-header-language-dropdown__code {
  font-size: 0.82em;
  letter-spacing: 0.04em;
  line-height: 1;
}
.real-header-language-dropdown--compact .image-icon {
  margin: 0;
  display: inline-flex;
  align-items: center;
}.real-header-language-dropdown--compact .image-icon img{
  width: 20px;
  height: auto;
  display: block;
  border-radius: 2px;
}
.real-header-language-dropdown--compact .nav-dropdown a {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
:root {
  --cta-bg: #018749;
  --cta-text: #ffffff;
}
@keyframes cta-pulse {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}
.cta-widget.cta-type--sidebar {
  position: fixed !important;
  z-index: 999;
  bottom: 120px;
  opacity: 1;
  line-height: 1;
}
/* Anchor ngang theo option "Vị trí sidebar" (position--left|right từ Cta::render) */
.cta-widget.cta-type--sidebar.position--left {
  left: 20px;
}
.cta-widget.cta-type--sidebar.position--right {
  right: 20px;
}
/* Neo trái → menu bung áp mép trái nút (mặc định menu áp mép phải, hợp neo phải) */
.cta-widget.cta-type--sidebar.position--left .real-cta-menu-box {
  right: auto;
  left: 0;
}
.cta-widget.cta-type--sidebar.position--left .real-cta-menu-box::before {
  right: auto;
  left: 25px;
}
.cta-widget.cta-type--sidebar * {
  box-sizing: border-box;
}
.cta-widget.cta-type--sidebar .real-cta-sidebar-row {
  width: 70px;
  height: 70px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background-color: var(--cta-bg);
}
.cta-widget.cta-type--sidebar.open .real-cta-sidebar-row {
  animation: none;
}
.cta-widget.cta-type--sidebar .real-cta-sidebar-row .real-pulsation {
  width: 100%;
  height: 100%;
  background-color: var(--cta-bg);
  position: absolute;
  inset: 0;
  z-index: -1;
  animation: cta-pulse 2s infinite;
}
.cta-widget.cta-type--sidebar .real-cta-sidebar-row .real-pulsation:last-of-type {
  animation-delay: 0.5s;
}
.cta-widget.cta-type--sidebar.open .real-cta-sidebar-row .real-pulsation,
.cta-widget.cta-type--sidebar .real-cta-sidebar-row.stop-pulse .real-pulsation {
  display: none;
}
.cta-widget.cta-type--sidebar .real-cta-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 12px;
  height: 12px;
  background: #22c55e;
  border: 2px solid #fff;
  z-index: 10;
}
.cta-widget.cta-type--sidebar.open .real-cta-dot {
  display: none;
}
.cta-widget.cta-type--sidebar .real-cta-toggle-btn {
  position: absolute;
  inset: 0;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: 0.2s all;
  color: var(--cta-text);
  cursor: pointer;
}
.cta-widget.cta-type--sidebar .real-cta-toggle-btn.cta-hide {
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
}
.cta-widget.cta-type--sidebar.open .real-cta-toggle-btn {
  background-color: var(--cta-bg);
}
.cta-widget.cta-type--sidebar .real-cta-toggle-icons {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  font-size: 30px;
}
.cta-widget.cta-type--sidebar .real-cta-toggle-icons i,
.cta-widget.cta-type--sidebar .real-cta-toggle-icons svg {
  position: absolute;
  inset: 0;
  margin: auto;
  transition: 0.2s all;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cta-text) !important;
  fill: var(--cta-text) !important;
}
.cta-widget.cta-type--sidebar .real-cta-toggle-icons svg {
  stroke: var(--cta-text);
  stroke-width: 2;
}
.cta-widget.cta-type--sidebar .real-cta-toggle-close {
  transform: rotate(180deg) scale(0);
  opacity: 0;
}
.cta-widget.cta-type--sidebar.open .real-cta-toggle-close {
  transform: rotate(0) scale(1);
  opacity: 1;
}
.cta-widget.cta-type--sidebar.open .real-cta-toggle-open {
  transform: rotate(-180deg) scale(0);
  opacity: 0;
}
.cta-widget.cta-type--sidebar .real-label-contact {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 10px;
  line-height: 11px;
  margin: 0;
  transition: 0.2s all;
  color: var(--cta-text);
}
.cta-widget.cta-type--sidebar.open .real-label-contact {
  display: none;
}
.cta-widget.cta-type--sidebar .real-cta-strip-wrap {
  background-color: #fff;
  width: 50px;
  height: 50px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition:
    0.2s opacity,
    0.2s transform;
  pointer-events: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
}
.cta-widget.cta-type--sidebar .real-cta-strip-wrap.cta-hide {
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
}
.cta-widget.cta-type--sidebar .icons-line {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  height: 100%;
  transition: transform 0.2s ease;
  will-change: transform;
}
.cta-widget.cta-type--sidebar .real-cta-strip__seg {
  display: inline-flex;
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
}
.cta-widget.cta-type--sidebar .real-cta-strip__seg .cta-visual {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.cta-widget.cta-type--sidebar .real-cta-strip__seg .cta-visual img,
.cta-widget.cta-type--sidebar .real-cta-strip__seg .cta-visual i,
.cta-widget.cta-type--sidebar .real-cta-strip__seg .cta-visual svg {
  width: 32px;
  height: 32px;
  font-size: 32px;
  object-fit: contain;
  /* Use the per-item brand color from the picker (set as --cta-color via inline style
     * by Frontend.php item()), fallback to global --cta-bg when no per-item color picked. */
  color: var(--cta-color, var(--cta-bg));
  fill: var(--cta-color, var(--cta-bg));
  display: block;
}
.cta-widget.cta-type--sidebar .real-cta-strip__seg .real-cta-label {
  display: none;
}
.cta-widget.cta-type--sidebar .real-cta-strip__seg a {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.cta-widget.cta-type--sidebar .real-cta-menu-box {
  background: #ffffff;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
  width: 200px;
  position: absolute;
  bottom: 80px;
  right: 0;
  display: flex;
  flex-direction: column;
  padding: 10px 0;
  border-radius: 7px;
  z-index: 20;
  visibility: hidden;
  opacity: 0;
  transition: ease-in-out 0.2s all;
  transform: translate3d(0, -20%, 0);
  pointer-events: none;
}
.cta-widget.cta-type--sidebar .real-cta-menu-box::before {
  content: "";
  position: absolute;
  bottom: -7px;
  right: 25px;
  border-right: 8px solid transparent;
  border-top: 8px solid #ffffff;
  border-left: 8px solid transparent;
}
.cta-widget.cta-type--sidebar.open .real-cta-menu-box {
  visibility: visible;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}
.cta-widget.cta-type--sidebar .real-cta-menu-box .cta-item {
  width: 100%;
  transition:
    transform 0s 0.2s,
    opacity 0s 0.2s;
  transform: translate3d(0, 50px, 0);
  opacity: 0;
}
.cta-widget.cta-type--sidebar.open .real-cta-menu-box .cta-item {
  transition:
    transform 0.4s,
    opacity 0.4s;
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
.cta-widget.cta-type--sidebar .real-cta-menu-box .cta-item:nth-child(2) {
  transition-delay: 0.05s;
}
.cta-widget.cta-type--sidebar .real-cta-menu-box .cta-item:nth-child(3) {
  transition-delay: 0.1s;
}
.cta-widget.cta-type--sidebar .real-cta-menu-box .cta-item:nth-child(4) {
  transition-delay: 0.15s;
}
.cta-widget.cta-type--sidebar .real-cta-menu-box .cta-item:nth-child(5) {
  transition-delay: 0.2s;
}
.cta-widget.cta-type--sidebar .real-cta-menu-box .real-cta-link {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 20px 8px 60px;
  position: relative;
  min-height: 54px;
  text-decoration: none;
}
.cta-widget.cta-type--sidebar .real-cta-menu-box .real-cta-link:hover {
  background-color: #eeeeee;
}
.cta-widget.cta-type--sidebar .real-cta-menu-box .cta-visual {
  position: absolute;
  left: 10px;
  top: 50%;
  margin-top: -20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--animation-color, #0084ff);
  color: #ffffff;
}
.cta-widget.cta-type--sidebar .real-cta-menu-box .cta-visual svg,
.cta-widget.cta-type--sidebar .real-cta-menu-box .cta-visual i,
.cta-widget.cta-type--sidebar .real-cta-menu-box .cta-visual img {
  width: 22px;
  height: 22px;
  font-size: 22px;
  object-fit: contain;
  fill: currentColor;
  display: block;
}
/* Brand-colored icons (have their own multi-color fills) — let them fill the
 * full visual circle and drop the colored bg so colors don't blend. */
.cta-widget .cta-visual:has(use[href="#i-zalo"]) {
  background: transparent !important;
  box-shadow: none;
}
.cta-type--sidebar .cta-visual:has(use[href="#i-zalo"]) svg {
  width: 100% !important;
  height: 100% !important;
}
.cta-widget.cta-type--sidebar .real-cta-strip__seg .cta-visual:has(use[href="#i-zalo"]) svg {
  width: 44px !important;
  height: 44px !important;
}
/* "Tắt nền màu" toggle (sidebar/footer) — drop the colored circle background and
 * paint the icon directly with the picker color (--cta-color set inline by item()). */
.cta-widget.no-item-bg .cta-visual {
  background: transparent !important;
  box-shadow: none;
}
.cta-widget.no-item-bg .cta-visual i,
.cta-widget.no-item-bg .cta-visual svg,
.cta-widget.no-item-bg .cta-visual img {
  color: var(--cta-color, var(--cta-bg)) !important;
  fill: var(--cta-color, var(--cta-bg)) !important;
}
.cta-widget.cta-type--sidebar.no-item-bg .real-cta-menu-box .cta-visual i,
.cta-widget.cta-type--sidebar.no-item-bg .real-cta-menu-box .cta-visual svg {
  width: 28px;
  height: 28px;
  font-size: 28px;
}
.cta-widget.cta-type--sidebar .real-cta-menu-box .real-cta-label {
  font-family: "Roboto", sans-serif;
  font-size: 15px;
  color: rgba(0, 0, 0, 0.87);
  font-weight: 500;
  line-height: 17px;
}
.cta-widget.cta-type--footer {
  position: fixed;
  bottom: 8px;
  z-index: 1111;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 12px;
  background: #fff;
  width: calc(100% - 16px);
  margin-left: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.cta-widget.cta-type--footer .real-cta-link,
.cta-widget.cta-type--footer .real-cta-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  gap: 3px;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
}
.cta-widget.cta-type--footer .real-cta-label {
  font-size: 11px;
  color: var(--text);
}
.cta-widget.cta-type--footer .cta-visual {
  font-size: 22px;
  color: var(--primary);
}
.cta-widget.cta-type--footer .cta-item--wishlist.active .cta-visual,
.cta-widget.cta-type--footer .cta-item--atc.active .cta-visual {
  color: var(--heading, var(--text));
}
.cta-widget.cta-type--footer [data-cta-action="atc"].loading .cta-visual {
  opacity: 0.5;
}
.cta-widget.cta-type--footer [data-cta-action="atc"].loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  cursor: not-allowed;
}
.cta-widget.cta-type--footer .added_to_cart,
.cta-widget.cta-type--footer .wc-forward {
  display: none !important;
}
@media (max-width: 768px) {
  .cta-widget.cta-type--sidebar.hide-mobile--1 {
    display: none !important;
  }}
@media (min-width: 769px) {
  .cta-widget.cta-type--sidebar.hide-desktop--1,
  .cta-widget.cta-type--footer.hide-desktop--1 {
    display: none !important;
  }}
.real-btn-play {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 48px;
  background-color: var(--brand-youtube);
}
.real-btn-play .icon-play {
  border-style: solid;
  border-width: 10px 0 10px 20px;
  border-color: transparent transparent transparent var(--white);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
}.real-home-menu .nav-dropdown a:after,
.real-header-language-dropdown--compact .image-icon::before,
.real-btn-play .icon-play:before {  content: none;
}.real-box-youtube-item a{
  margin-bottom: 13px;
  background: var(--white);
  border: 1px solid var(--border);
}
.real-youtube-title {
  padding: 15px;
  max-height: 66px;
}
.real-youtube-layout-large-right .large-5 .real-box-img,
.real-youtube-layout-large-left .large-5 .real-box-img,
.real-youtube-layout-large-center .real-list-small .real-box-img {
  max-width: 31%;
  flex-basis: 31%;
  position: relative;
}
.real-youtube-layout-large-right .large-5 .real-btn-play,
.real-youtube-layout-large-left .large-5 .real-btn-play,
.real-youtube-layout-large-center .real-list-small .real-btn-play {
  width: 40px;
  height: 30px;
}
.real-youtube-layout-large-right .large-5 .icon-play,
.real-youtube-layout-large-left .large-5 .icon-play,
.real-youtube-layout-large-center .real-list-small .icon-play {
  border-width: 7px 0 7px 15px;
}
.real-youtube-layout-large-right .large-5 .open-video {
  flex-direction: row-reverse;
}
.real-youtube-layout-large-right .large-7 a,
.real-youtube-layout-large-left .large-7 a {
  flex-direction: column;
  font-weight: bold;
  font-size: 16px;
  gap: 0;
}
.real-youtube-layout-large-right .large-5 .open-video .real-youtube-title {
  padding-left: 10px;
}
.real-youtube-layout-large-right .large-7 .real-youtube-title,
.real-youtube-layout-large-left .large-7 .real-youtube-title,
.real-youtube-layout-main .real-youtube-title {
  display: none;
}
@media screen and (max-width: 551px) {
  .real-youtube-layout-large-right .large-7,
  .real-youtube-layout-large-left .large-7 {
    padding-bottom: 0;
  }
  .real-youtube-title {
    padding: 2px;
  }}
.real-youtube-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@keyframes shimmerFill {
  0% {
    left: -100%;
  }
  to {
    left: 100%;
  }
}
@keyframes qbNoticeIn {
  0% {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes qbContentFadeIn {
  0% {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes qbBounce {
  0%,
  80%,
  to {
    transform: scale(0.5);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}
#quickbuy-lightbox {
  position: relative;
  border-radius: 10px;
  padding: 20px;
}
.quickbuy-panel {
  padding: 10px 0;
}
.quickbuy-panel > .real-quickbuy-form > .row {
  align-items: flex-start;
}
.real-quickbuy-gallery {
  position: relative;
}
@media screen and (max-width: 849px) {
  .quickbuy-panel.is-step-1 .real-quickbuy-gallery,
  .quickbuy-panel.is-step-2 .real-quickbuy-gallery {
    display: none;
  }}
@media screen and (max-width: 551px) {
  #quickbuy-lightbox .real-quickbuy-gallery-split__thumbs {
    display: none;
  }}
@media screen and (min-width: 850px) {
  #quickbuy-lightbox .product-gallery-slider img {
    height: 379px;
    width: 379px;
    object-fit: cover;
  }
  .real-quickbuy-gallery {
    position: sticky;
    top: 0;
    min-height: 420px;
  }}
#quickbuy-lightbox .payment_methods.real-methods p {
  display: none;
}
#quickbuy-lightbox .product-thumbnails.row > div:not(.col):not([class^="col-"]):not([class*=" col-"]) {
  width: calc(100% - 6px) !important;
}
#quickbuy-lightbox .product-thumbnails .col {
  max-width: 70px !important;
  flex-basis: 70px !important;
}
.real-quickbuy-header {
  display: block;
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.real-quickbuy-eyebrow {
  display: block;
  margin-bottom: 2px;
  letter-spacing: 0.08em;
  color: var(--primary-color, var(--link-color));
}
.real-quickbuy-product-title {
  display: block;
  line-height: 1.3;
  color: var(--heading);
}
/* Meta row (Đã đăng ký / sao / Đang mở lớp) trong modal */
#quickbuy-lightbox .real-product-feature-information {
  gap: 6px 18px;
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--text, #555);
}
#quickbuy-lightbox .real-product-feature-information .current-product-sold i {
  color: var(--primary-color, var(--link-color));
}
#quickbuy-lightbox .real-quickbuy-price {
  margin: 4px 0 14px;
}
.real-quickbuy-price ins,
.real-quickbuy-price ins .woocommerce-Price-amount.amount {
  font-size: 22px !important;
}
.real-quickbuy-steps {
  list-style: none;
}
.real-quickbuy-steps__item {
  position: relative;
  cursor: pointer;
  user-select: none;
  outline: 0;
}
.real-quickbuy-steps__item + .real-quickbuy-steps__item {
  margin-left: 28px;
}
.real-quickbuy-steps__item + .real-quickbuy-steps__item::before {
  content: "";
  position: absolute;
  right: calc(100% + 4px);
  top: 50%;
  width: 24px;
  height: 2px;
  background: var(--border, #e1e1e1);
  transform: translateY(-50%);
  transition: background 0.3s ease;
}
.real-quickbuy-steps__item.is-active + .real-quickbuy-steps__item::before,
.real-quickbuy-steps__item.is-done + .real-quickbuy-steps__item::before {
  background: var(--primary);
}
.real-quickbuy-steps__dot {
  z-index: 1;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  background: var(--white, #fff);
  border: 2px solid var(--border, #e1e1e1);
  color: var(--text, #777);
  line-height: 1;
  transition: all 0.25s ease;
}
.real-quickbuy-steps__item.is-active .real-quickbuy-steps__dot {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white, #fff);
  box-shadow: 0 0 0 4px rgba(227, 0, 25, 0.15);
}
.real-quickbuy-steps__item.is-done .real-quickbuy-steps__dot {
  background: var(--primary);
  border-color: var(--primary);
  color: transparent;
  font-size: 0;
}
.real-quickbuy-steps__item.is-done .real-quickbuy-steps__dot::before {
  content: "✓";
  color: var(--white, #fff);
  font-size: 13px;
  font-weight: 700;
}
.real-quickbuy-steps__item:focus-visible .real-quickbuy-steps__dot {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
}
.quickbuy-slider {
  width: 100%;
  flex: 1 1 auto;
}
.quickbuy-slider .flickity-viewport {
  transition: height 0.35s ease;
}
.real-quickbuy-step {
  width: 100%;
  padding: 0 4px;
}
.real-quickbuy-step--info .form-row {
  margin-bottom: 12px;
}
.real-quickbuy-variations {
  margin: 10px 0 0;
}.real-quickbuy-quantity label{
  display: block;
  margin-bottom: 8px;
}
.real-quickbuy-quantity .quantity,
.real-quickbuy-steps li {
  margin-bottom: 0;
}
.real-quickbuy-totals {
  margin-bottom: 24px;
}
.real-quickbuy-totals .shop_table {
  margin: 0;
}
.real-quickbuy-totals .shop_table tr[hidden] {
  display: none !important;
}
.real-quickbuy-totals .shop_table td,
.real-quickbuy-totals .shop_table th {
  font-size: 14px;
}
.real-quickbuy-totals .order-total strong {
  color: var(--primary);
}
.real-quickbuy-nav {
  gap: 16px;
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  width: 100%;
}
.real-quickbuy-nav-btn {
  color: var(--heading, #333);
  cursor: pointer;
  transition: all 0.2s ease;
}.real-quickbuy-nav-btn i{
  line-height: 1;
}
.real-quickbuy-nav-btn:hover:not(:disabled) {
  color: var(--secondary, #fff);
}
.real-quickbuy-nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.real-quickbuy-nav-btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(227, 0, 25, 0.2);
}
.real-quickbuy-submit {
  min-height: 44px;
  padding: 0 22px;
  white-space: nowrap;
}
.real-quickbuy-nav [hidden] {
  display: none !important;
}
.real-quickbuy-submit:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}
/* Mode 1 trang (tắt multistep): các step xếp dọc, không slider */
.quickbuy-slider--stacked .real-quickbuy-step {
  padding-bottom: 20px;
}
.quickbuy-slider--stacked .real-quickbuy-step + .real-quickbuy-step {
  border-top: 1px solid var(--border);
  padding-top: 16px;
}.cta-widget.cta-type--footer .cta-item,
.real-quickbuy-nav .real-quickbuy-submit:not([hidden]),
.real-quickbuy-nav--single .real-quickbuy-submit {  flex: 1;
}
@media (max-width: 549px) {
  .real-quickbuy-nav {
    gap: 10px;
  }
  .real-quickbuy-nav-btn {
    width: 40px;
    height: 40px;
  }
  .real-quickbuy-steps__item + .real-quickbuy-steps__item {
    margin-left: 20px;
  }
  .real-quickbuy-steps__item + .real-quickbuy-steps__item::before {
    width: 16px;
  }}
.quickbuy-coupons {
  margin: 20px 0;
  padding-top: 15px;
  border-top: 1px dashed var(--color-border, #e5e7eb);
}
.quickbuy-coupons .widget-title {
  margin-bottom: 12px;
}
.quickbuy-coupon {
  width: 180px !important;
  padding: 0 8px;
  box-sizing: border-box;
}
.quickbuy-coupon-btn {
  min-height: 72px;
  line-height: 1.4;
  white-space: normal;
}
.quickbuy-coupon-btn strong {
  display: block;
}
@media (max-width: 768px) {
  .quickbuy-coupon {
    width: calc(50% - 10px);
  }}
@media (max-width: 480px) {
  .quickbuy-coupon {
    width: calc(100% - 10px);
  }}
input.quickbuy-wholesale-enable {
  top: 1px;
}.buttons-quickbuy a{
  padding: 10px;
}
.buttons-quickbuy a .real-btn-text {
  text-transform: capitalize;
}
.buttons-quickbuy a:hover {
  background: linear-gradient(360deg, var(--fs-color-primary) 0%, var(--fs-color-secondary) 100%) !important;
  border-color: var(--border) !important;
}
.quickbuy-wholesale-content {
  padding: 10px;
  font-weight: 400;
}
.quickbuy-wholesale .nav {
  margin-bottom: 0;
}
.quickbuy-wholesale .nav > li {
  margin: 0 0 8px;
}
.quickbuy-wholesale label input[type="radio"] {
  margin: 0 6px 0 0;
  position: relative;
  top: 1px;
}
.quickbuy-shipping-progress {
  margin: 15px 0;
  padding: 30px;
  background: linear-gradient(135deg, rgba(227, 0, 25, 0.04) 0, rgba(122, 156, 89, 0.08) 100%);
  border: 1px solid rgba(227, 0, 25, 0.18);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  overflow: hidden;
}
.shipping-progress-bar {
  height: 8px;
  background: rgb(153 204 51/20%);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}
.shipping-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary, #e30019), var(--success, #7a9c59));
  border-radius: 4px;
  transition: width 0.4s ease;
  position: relative;
  overflow: hidden;
}
.shipping-progress-fill::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
  animation: shimmerFill 2s ease-in-out infinite;
}
.shipping-progress-fill.qualified {
  background: linear-gradient(90deg, var(--success, #7a9c59), var(--success, var(--success-color)));
}
.shipping-progress-message {
  gap: 8px;
  font-size: 13px;
  color: var(--heading);
}
.shipping-progress-message svg {
  flex-shrink: 0;
  color: var(--primary, #e30019);
}
.shipping-progress-message.success {
  font-weight: 600;
  background-color: transparent !important;
}
.shipping-progress-message.success svg {
  color: var(--success, #7a9c59);
}
/* native-miss: notice do JS quickbuy render động */
.quickbuy-notice {
  animation: qbNoticeIn 0.25s ease both;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}
.quickbuy-notice.is-fading {
  opacity: 0;
  transform: translateY(-4px);
}
.real-quickbuy-loading {
  inset: 0;
  flex-direction: column;
  background: var(--white, #fff);
  border-radius: inherit;
  z-index: 15;
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease;
}
.real-quickbuy-loading.is-hiding {
  opacity: 0;
  visibility: hidden;
}.real-quickbuy-loading p{
  color: var(--text, #777);
}
.real-quickbuy-content {
  transition: opacity 0.3s ease;
}
.real-quickbuy-content.is-preparing {
  opacity: 0;
  pointer-events: none;
}
.real-quickbuy-content.is-ready {
  animation: qbContentFadeIn 0.35s ease both;
}
.real-quickbuy-submit-overlay {
  inset: 0;
  display: flex;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: inherit;
  z-index: 20;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease;
}
.real-quickbuy-submit-overlay[hidden] {
  display: none;
}
.real-quickbuy-submit-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}
.real-quickbuy-submit-overlay__inner {
  max-width: 340px;
}
.real-quickbuy-submit-overlay__spinner {
  margin-bottom: 18px;
}
/* native-miss: span con vô danh của spinner */
.real-quickbuy-submit-overlay__spinner span {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--primary);
  animation: qbBounce 1.2s infinite ease-in-out both;
}
.real-quickbuy-submit-overlay__spinner span:nth-child(1) {
  animation-delay: -0.32s;
}
.real-quickbuy-submit-overlay__spinner span:nth-child(2) {
  animation-delay: -0.16s;
}
.real-quickbuy-submit-overlay__message {
  margin: 0 0 6px;
  color: var(--heading, #222);
}
.real-quickbuy-submit-overlay__hint {
  color: var(--text, #888);
}
.real-quickbuy-quantity .real-quickbuy-qty-input {
  font-size: 21px !important;
  font-weight: bold;
  line-height: 1;
}
.real-wishlist-header .wishlist-icon {
  position: relative;
}
.real-wishlist-header .wishlist-icon.has-products::after {
  content: attr(data-icon-label);
  position: absolute;
  top: -10px;
  right: -11px;
  background-color: var(--alert) !important;
  color: var(--white);
  font-size: 10px;
  font-weight: 600;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 50%;
}
.cart .wishlist-style--button {
  color: var(--primary);
}
.wishlist-toggle.wishlist-style--icon {
  transition: all 0.3s ease;
}
.wishlist-toggle.wishlist-style--icon.primary {
  color: var(--primary) !important;
  background: var(--bg-hover) !important;
}
.wishlist-toggle.wishlist-style--icon.primary svg {
  fill: var(--primary);
}
.wishlist-toggle.heartbeat svg,
.wishlist-toggle.heartbeat i {
  animation: real-heartbeat 0.6s ease-in-out;
}
@keyframes real-heartbeat {
  0%,
  100% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.3);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.3);
  }
}
.wishlist-toggle.wishlist-style--button.primary:hover {
  opacity: 0.9;
}
.wishlist-toggle.wishlist-style--button > i {
  margin-right: 8px;
}
.wishlist-toggle.wishlist-style--button.loading {
  opacity: 0.7;
  pointer-events: none;
}
.wishlist-toggle.wishlist-style--button.heartbeat > i,
.wishlist-toggle.wishlist-style--button.loading > i {
  animation: real-heartbeat 0.6s ease-in-out infinite;
}
.single-product .real-course-cta-layout {
  display: grid;
  grid-template-columns: max-content max-content 1fr;
  gap: 18px 14px;
  margin: 18px 0;
}
.single-product .real-course-cta-layout__actions {
  display: contents;
}
.single-product .real-course-cta-layout__actions form.cart {
  display: contents;
  margin: 0;
}
.single-product .real-course-cta-layout__actions form.cart .quantity,
.single-product .real-course-cta-layout__actions form.cart .single_add_to_cart_button {
  display: none !important;
}
.single-product .real-course-social-actions {
  grid-column: 1;
  grid-row: 1;
  min-height: 44px;
}
.single-product .real-course-social-action {
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  border: 0 !important;
  outline: 0;
  box-shadow: none !important;
  color: #fff;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    opacity 0.18s ease;
}
.single-product .real-course-social-action:hover {
  color: #fff;
  opacity: 0.9;
  transform: translateY(-1px);
}
.single-product .real-course-social-action svg,
.single-product .real-course-social-action i {
  width: 18px;
  height: 18px;
  margin: 0;
  color: currentColor;
  fill: currentColor;
}
.single-product .real-course-social-action--wishlist {
  background: #1593ff !important;
}
.single-product .real-course-social-action--wishlist.primary {
  background: #ff4d6d !important;
}
.single-product .real-course-cta-layout__form {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  justify-content: flex-start;
}
.single-product .real-course-cta-layout .buttons-quickbuy {
  grid-column: 1 / -1;
  grid-row: 2;
}
.single-product .real-course-advise-trigger {
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  background: linear-gradient(135deg, #16a9e0, #f4c900);
  color: #fff;
  line-height: 1;
  text-decoration: none;
  box-shadow: none;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
  white-space: nowrap;
}
.single-product .real-course-advise-trigger:hover {
  color: #fff;
  opacity: 0.92;
  transform: translateY(-1px);
}
.real-course-advise-lightbox {
  width: 100%;
  padding: 28px;
}
.real-course-advise-lightbox__title {
  margin: 0 0 18px;
  line-height: 1.25;
}
.real-course-advise-lightbox p {
  margin-bottom: 12px;
}
.real-course-advise-lightbox input,
.real-course-advise-lightbox textarea,
.real-course-advise-lightbox select {
  margin-bottom: 0;
}
@media (max-width: 849px) {
  .single-product .real-course-cta-layout {
    grid-template-columns: 1fr;
  }
  .single-product .real-course-social-actions,
  .single-product .real-course-cta-layout__form,
  .single-product .real-course-cta-layout .buttons-quickbuy {
    grid-column: 1;
    grid-row: auto;
  }}
/* native-miss: target #id section */
#series-related-section {
  background: var(--white);
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
}
#series-product-list {
  position: relative;
  transition: opacity 0.2s ease;
}
#series-product-list .series-loading-overlay {
  inset: 0;
  background: var(--overlay-white-80);
  z-index: 2;
}
#series-related-section .shop_table {
  margin-bottom: 0;
}
#series-related-section .product-thumbnail {
  width: 90px;
  min-width: 90px;
}
#series-related-section .product-thumbnail img {
  width: 74px;
  height: 74px;
  object-fit: cover;
}
#series-related-section .product-name .row {
  flex-wrap: nowrap;
}
#series-related-section .product-name .star-rating {
  margin: 6px 0;
}
#series-related-section .product-name .sku_wrapper {
  display: block;
  opacity: 0.7;
}
#series-related-section .product-quantity .quantity {
  margin: 0;
}
#series-related-section .product-action .button {
  margin-bottom: 0;
}
#series-related-section .real-add-to-cart-btn.loading,
#series-related-section .buy-now-btn.loading {
  opacity: 0.6;
  pointer-events: none;
}.real-related-posts__item,
#cta-search form.searchform {  width: 100%;
}
.order-received-title {
  margin: 0 0 24px;
  font-size: clamp(22px, 3vw, 30px);
  color: var(--heading);
}
.order-received-grid {
  align-items: stretch;
}
.order-received-grid > section {
  flex: 1 1 100%;
}
.real-order-received .order-panel,
.real-order-received .woocommerce-bacs-bank-details,
.real-order-received .woocommerce-order-details {
  padding: 24px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.real-order-received .wc-bacs-bank-details-heading,
.real-order-received .woocommerce-column__title,
.real-order-received .woocommerce-order-details__title {
  margin: 0 0 16px;
  font-size: 18px;
  line-height: 1.35;
  color: var(--heading);
}
.real-order-received .woocommerce-table--order-details {
  width: 100%;
  border-collapse: collapse;
}
.real-order-received .woocommerce-table--order-details td,
.real-order-received .woocommerce-table--order-details th {
  padding: 12px 8px;
  font-size: 14px;
  color: var(--text);
  vertical-align: top;
  border: 0;
}.real-order-received .woocommerce-table--order-details thead th{
  color: var(--heading);
}
.real-order-received .woocommerce-table--order-details tfoot tr:last-child td,
.real-order-received .woocommerce-table--order-details tfoot tr:last-child th {
  border-bottom: none;
  font-weight: 600;
  color: var(--primary);
}
.real-order-received .woocommerce-bacs-bank-details {
  border-color: var(--primary);
}
.payment-info {
  padding: 24px;
  background: var(--white);
  border: 1px solid var(--primary);
}
.payment-info__title {
  margin: 0 0 16px;
  color: var(--primary);
}
.payment-info__method {
  margin: 0 0 12px;
  color: var(--text);
}
.payment-info__method i {
  color: var(--primary);
}
.payment-info__label {
  color: var(--text-second, #64748b);
}
.payment-info__value {
  color: var(--heading);
}
.payment-info__desc {
  margin: 0 0 12px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--primary) 4%, transparent);
  color: var(--text);
  line-height: 1.55;
}
.payment-info__desc p:last-child {
  margin-bottom: 0;
}
.payment-info__gateway {
  margin-top: 8px;
}
.payment-info__gateway .wc-bacs-bank-details-heading,
.payment-info__gateway h2,
.payment-info__gateway h3 {
  margin-top: 0;
  font-size: 15px;
  color: var(--heading);
}
.payment-info__gateway ol,
.payment-info__gateway ul,
.payment-info__gateway ul.wc-bacs-bank-details {
  padding-left: 1.25rem;
  margin: 8px 0 0;
  font-size: 14px;
}
.payment-info__gateway .shop_table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
.qr-payment .copy-qr {
  border: none;
  line-height: 1;
  min-height: unset;
  min-width: unset;
}
.payment-info__gateway .shop_table td,
.payment-info__gateway .shop_table th {
  text-align: left;
}
.info-list li:last-child,
.payment-info__gateway .shop_table tr:last-child td,
.payment-info__gateway .shop_table tr:last-child th {
  border-bottom: none;
}
.real-customer-details {
  flex: 1 1 100%;
  max-width: 100%;
  margin-top: 4px;
}
.real-customer-details .row {
  max-width: unset !important;
  gap: 0;
}
.real-customer-details .row-small > .col {
  padding: 0 8px;
}.author-card + .author-card,
.real-customer-details__meta > .real-order-card + .real-order-card {  margin-top: 16px;
}
.real-order-card {
  border: 1px solid var(--border);
  background: var(--white);
}
.real-order-card {
  padding: 24px;
}
.real-order-card .woocommerce-column__title {
  margin: 0 0 12px;
  font-size: 16px;
}
.real-order-card--billing {
  border-color: var(--primary-color, var(--link-color));
  background: color-mix(in srgb, var(--primary-color, var(--link-color)) 6%, transparent);
}
.real-order-card--billing .woocommerce-column__title {
  color: var(--primary-color, var(--link-color));
}.most-viewed-widget .real-related-posts__item.top-viewed-item,
.real-home-menu ul,
.techincal-list,
.info-list {  list-style: none;
}.info-list li{
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border);
  color: var(--text);
  font-style: normal;
}
.real-info-label,
.info-list li i {
  color: var(--text-second, #64748b);
  font-size: 13px;
}.info-list li i{
  flex: 0 0 16px;
  width: 16px;
}
.real-info-label {
  min-width: 96px;
}
/* native-miss: text-align responsive .real-info-value theo breakpoint */
.real-info-value {
  margin-left: auto;
  color: var(--heading);
  text-align: right;
  word-break: break-word;
}
.real-info-empty {
  color: var(--text-second, #64748b);
  font-style: italic;
}
.real-order-received-feature-slider {
  margin-bottom: 20px;
}.teacher-profile-videos,
.real-teacher-archive-card__image,
.real-product-short-description__content,
.real-order-received-feature-slider .real-feature-slider {  overflow: hidden;
}
.order-received-actions {
  flex: 1 1 100%;
  margin-top: 2rem;
}
.real-order-received-home {
  padding: 12px 24px;
  background: var(--primary);
  color: var(--white);
  border: 0;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.real-order-received-home:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 25%, transparent);
  color: var(--white);
}
@media (min-width: 768px) {
  .order-received-grid > .order-panel,
  .order-received-grid > .payment-info,
  .order-received-grid > .woocommerce-bacs-bank-details,
  .order-received-grid > .woocommerce-order-details {
    flex: 1 1 calc(50% - 8px);
    max-width: calc(50% - 8px);
  }}
@media (max-width: 767px) {
  .real-customer-details .row-small > .col {
    flex: 1 1 100%;
    max-width: 100%;
  }
  .real-order-card {
    padding: 18px;
  }
  .info-list li {
    flex-wrap: wrap;
  }
/* native-miss: text-align responsive .real-info-value theo breakpoint */
  .real-info-value {
    margin-left: calc(16px + 8px);
    text-align: left;
  }}
.view-order__summary {
  flex-direction: column;
  margin-bottom: 8px;
}
.order-status-card {
  justify-content: space-between;
  padding: 20px 24px;
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
}
.order-status-card__meta {
  align-items: baseline;
  gap: 10px 14px;
  color: var(--text);
}
.order-status-card__label {
  color: var(--text-second, #64748b);
  letter-spacing: 0.04em;
}
.order-status-card__number {
  color: var(--heading);
}
.order-status-card__date,
.order-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.order-status-card__date {
  color: var(--text-second, #64748b);
}.order-status-card__date i{
  color: var(--primary);
}
.order-status-chip {
  padding: 6px 14px;
  line-height: 1;
}
.order-status-chip i {
  font-size: 8px;
}
.order-status-chip {
  background: color-mix(in srgb, var(--status-color, var(--primary)) 12%, transparent);
  color: var(--status-color, var(--primary));
}
.order-status-card {
  border-left-color: var(--status-color, var(--primary));
}
.order-notes {
  padding: 24px;
  background: var(--white);
  border: 1px solid var(--border);
}
.order-notes__title {
  margin: 0 0 16px;
  color: var(--heading);
}
.order-notes__title i {
  color: var(--primary);
}
.order-notes__list {
  list-style: none;
  position: relative;
  padding: 0 0 0 20px;
}
.order-notes__list::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 5px;
  bottom: 6px;
  width: 2px;
  background: color-mix(in srgb, var(--primary) 30%, transparent);
  border-radius: 2px;
}
.order-notes__item {
  position: relative;
  padding: 0 0 14px 10px;
}
.order-notes__item:last-child {
  padding-bottom: 0;
}
.order-notes__item::before {
  content: "";
  position: absolute;
  top: 6px;
  left: -19px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 10%, transparent);
}
.order-notes__meta {
  color: var(--text-second, #64748b);
  margin-bottom: 4px;
}.order-notes__meta i{
  color: var(--primary);
}
.order-notes__text {
  color: var(--text);
  line-height: 1.55;
}
.order-notes__text p + p {
  margin-top: 4px;
}
@media (max-width: 767px) {
  .order-status-card {
    padding: 16px 18px;
  }
  .order-status-card__number {
    font-size: 18px;
  }}
.real-rdv-video-cell {
  background: transparent;
  width: 100%;
}
/* Single post/knowledge: let copy wrap beside the video without leaking the
 * float into sharing, related content, comments, or the outer sidebar. */
.real-entry-video-float {
  float: left;
  width: min(42%, 320px);
  margin: 0 24px 18px 0;
}
.real-entry-video-clear {
  display: block;
  clear: both;
}
.real-entry-video-float .row,
.teacher-profile-videos .row {
  margin-bottom: 0;
}
.entry-content.single-page > .blog-share {
  clear: both;
}
@media (max-width: 549px) {
  .real-entry-video-float {
    float: none;
    width: 100%;
    margin: 0 0 20px;
  }}
.real-rdv-video-frame {
  width: 100%;
  height: 0;
  background: #0e0e0e;
  overflow: hidden;
}
.real-rdv-video-poster {
  inset: 0;
  display: block;
  background-color: #0e0e0e;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  text-decoration: none;
  outline: 0;
  transition: filter 0.2s ease;
}
.real-rdv-video-poster:hover {
  filter: brightness(1.04);
}
.real-rdv-video-poster:focus-visible {
  outline: 2px solid var(--fs-color-primary, #1e8cff);
  outline-offset: -2px;
}
.real-rdv-video-poster.is-active {
  cursor: default;
  background: #000;
}
.real-rdv-video-poster.is-active .real-rdv-video-play,
.real-rdv-video-poster.is-active .rdv-video-badge,
.real-rdv-video-poster.is-active .real-rdv-video-placeholder {
  display: none;
}.real-rdv-video-poster iframe{
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.real-rdv-video-overlay {
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.real-rdv-video-placeholder {
  inset: 0;
  display: block;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.08), transparent 60%),
    linear-gradient(135deg, #1a1a1a 0%, #333 100%);
  pointer-events: none;
}
.real-rdv-video-play {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.78);
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s ease;
}
.real-rdv-video-poster:hover .real-rdv-video-play {
  transform: translate(-50%, -50%) scale(1.08);
}
.real-rdv-video-play-icon {
  border-style: solid;
  border-width: 8px 0 8px 14px;
  border-color: transparent transparent transparent #fff;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
}
.rdv-video-badge {
  top: 8px;
  right: 8px;
  z-index: 3;
  letter-spacing: 0.3px;
  padding: 3px 8px;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
}
.real-rdv-video-title {
  display: block;
  margin: 8px 0 0;
  padding: 0 4px;
  line-height: 1.35;
  color: var(--fs-color-primary, #222);
}
.real-rdv-video-empty {
  inset: 0;
  flex-direction: column;
  padding: 16px;
  background: repeating-linear-gradient(45deg, #f5f5f5, #f5f5f5 10px, #ebebeb 10px, #ebebeb 20px);
  border: 2px dashed #c8c8c8;
  color: #666;
  cursor: default;
}
.real-rdv-video-empty[data-variant="invalid"] {
  background: repeating-linear-gradient(45deg, #fef0f0, #fef0f0 10px, #fce4e4 10px, #fce4e4 20px);
  border-color: #f0a8a8;
  color: #b94a48;
}
.real-rdv-video-empty-icon {
  font-size: 32px;
  line-height: 1;
  color: #999;
}
.real-rdv-video-empty[data-variant="invalid"] .real-rdv-video-empty-icon {
  color: #d9534f;
}
.real-rdv-video-empty-message {
  line-height: 1.35;
  max-width: 220px;
}
.real-rdv-video-cell.has-testimonial {
  padding-bottom: 4px;
}
.rdv-video-testimonial {
  padding: 12px 4px 4px;
}
.real-rdv-video-testimonial-meta {
  line-height: 1.4;
  margin-bottom: 8px;
}
.real-rdv-video-testimonial-name {
  color: var(--fs-color-primary, #222);
}
.real-rdv-video-testimonial-divider {
  color: #999;
  margin: 0 4px;
}
.real-rdv-video-testimonial-position {
  color: #777;
}
.rdv-video-testimonial .star-rating {
  display: inline-block;
  margin: 0 0 10px;
  font-size: 14px;
}
.rdv-video-testimonial.text-center .star-rating {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.rdv-video-testimonial.text-right .star-rating {
  margin-left: auto;
}
.real-rdv-video-testimonial-text {
  font-style: italic;
  line-height: 1.55;
  color: #444;
}
.real-rdv-video-testimonial-text > p {
  margin: 0 0 8px;
}
.real-rdv-video-testimonial-text > p:last-child {
  margin-bottom: 0;
}
.video-lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 99999;
  padding: 20px;
  animation: rdv-lb-fade 0.18s ease-out;
}
@keyframes rdv-lb-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.video-lightbox-frame {
  width: min(960px, 100%);
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}
.video-lightbox-frame.is-vertical {
  width: min(420px, 92vw);
  aspect-ratio: 9 / 16;
}
.video-lightbox-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.video-lightbox-close {
  top: -40px;
  right: 0;
  width: 32px;
  height: 32px;
  background: transparent;
  color: #fff;
  border: 0;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.video-lightbox-close:hover {
  color: #ddd;
}
/**
 * Element "Cảm nhận học viên" (feedback) — card từ product reviews. Guồng khóa→thành tích→
 * feedback. Card: avatar + tên + khóa + rating sao + trích cảm nhận.
 */
.real-feedback-grid {
  display: grid;
  grid-template-columns: repeat(var(--real-fb-cols, 3), minmax(0, 1fr));
}
@media (max-width: 850px) {
  .real-feedback-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }}
@media (max-width: 560px) {
  .real-feedback-grid {
    grid-template-columns: 1fr;
  }}
.real-feedback-card {
  display: flex;
  flex-direction: column;
  padding: 22px;
  background: #fff;
  border: 1px solid #e6e8ec;
  border-radius: 14px;
  box-shadow: 0 12px 30px -22px rgba(20, 36, 92, 0.35);
}
.real-feedback-card__avatar img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}
.real-feedback-card__id {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}
.real-feedback-card__name {
  color: var(--heading-navy);
}
.real-feedback-card__course {
  font-size: 12.5px;
  color: var(--fs-color-primary, var(--link-color));
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
}
.real-feedback-card__rating .star-rating {
  font-size: 13px;
}
.real-feedback-card__text {
  line-height: 1.65;
  color: #374151;
}

.contact-form-quote .form-label,
.form-quote .form-feature {
  text-transform: uppercase;
  font-size: 2rem;
  font-weight: bold;
}
.contact-form-quote .form-desc,
.contact-form-quote .form-label {
  color: var(--white);
  margin-bottom: 15px !important;
  display: inline-block;
}
.real-sec-feature-slider {
  --hero-fade-color: #ffffff;
  position: relative;
  overflow: hidden;
}
.real-sec-feature-slider .section-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-color: var(--hero-fade-color);
}
.real-sec-feature-slider .bg-blur-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  filter: blur(20px);
  opacity: 0;
  transition: opacity 0.5s ease;
  will-change: opacity;
  pointer-events: none;
}
.real-sec-feature-slider .bg-blur-layer.active {
  opacity: 1;
}
/* Overlay trắng CỐ ĐỊNH, gắn vào .section-bg (không gắn vào layer ảnh).
   Luôn phủ nên khi JS swap ảnh blur phía sau, khoảng trắng không bao giờ nhấp nháy/gãy. */
.real-sec-feature-slider .section-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.2) 20%,
    rgba(255, 255, 255, 0.4) 45%,
    rgba(255, 255, 255, 0.7) 65%,
    rgba(255, 255, 255, 0.9) 80%,
    var(--hero-fade-color) 100%
  );
  pointer-events: none;
}
/* native-miss: khoảng cách item trong sidebar — rule gộp .item và tag <header> */
.real-project-side .item,
.real-project-side header {
  background: var(--white);
  padding: 15px;
  border-radius: 6px;
  margin-bottom: 15px;
}
.real-project-videos,
.real-project-videos .col {
  padding: 0 !important;
}
.real-project-side .form-label,
.real-project-side .form-desc {
  color: var(--text);
}
.real-project-side .form-label {
  font-size: 22px;
  text-transform: capitalize;
}
.project-breadcrumb {
  margin-top: 15px;
  font-size: 14px;
}
.project-breadcrumb .last {
  display: none;
}.cta-type--footer button,
.buttons-quickbuy a .real-btn-desc,
.real-project-info-table th {  font-weight: normal;
}
.real-contact-form-cta__btn {
  margin-bottom: 8px;
}
.real-contact-form-cta__note {
  margin: 20px auto 5px;
  line-height: 1.5;
  color: #74787c;
}
.about-row-team .col-inner {
  background: linear-gradient(to bottom, #343946 50%, rgba(52, 57, 70, 0) 100%);
  padding: 16px;
  border-radius: 10px;
}
.about-row-team .box-text-inner * {
  color: var(--white) !important;
}
.about-row-team .box-text-inner h4 {
  text-transform: capitalize;
  font-size: 20px;
}
.about-sec-culture .text-title {
  background: #383d4a;
  padding: 24px 23px;
  border-radius: 10px;
  margin-bottom: 25px;
}
.about-sec-culture .text-title h3 {
  color: var(--white);
  margin: 0;
  font-size: 24px;
}
.about-sec-culture .text-desc p img {
  width: 24px;
  height: 24px;
  display: inline-block;
}.about-sec-culture .text-desc p{
  border-bottom: 1px solid #383d4a;
  margin-bottom: 20px;
  padding-bottom: 24px;
  color: var(--white);
  padding-left: 14px;
}
.about-row-visions .col-inner {
  border-radius: 15px;
  overflow: hidden;
}
.about-row-visions .col:first-child {
  padding-left: 0;
}
.about-sec-quotes .col-inner {
  border-radius: 8px;
  padding: 40px 40px !important;
  margin: 0 auto;
  background: linear-gradient(0deg, rgba(33, 39, 53, 0.1) 0%, rgba(33, 39, 53, 0.1) 100%), rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
}
.about-row-culture .col-inner {
  background: var(--primary);
}
.post-project .cat-label {
  background: #ff6600;
}
@media screen and (max-width: 549px) {
  .box-vertical .box-image {
    width: 30% !important;
  }
  .box-vertical {
    display: flex;
    align-items: center;
    justify-content: center;
  }}
.title-nav .section-title {
  margin: 0;
}
.title-nav .ux-menu {
  align-items: end;
  font-size: 14px;
}
.title-nav .ux-menu-link__link:hover {
  background: var(--primary);
  color: var(--white);
}
.title-nav .ux-menu-link__link {
  padding: 4px 10px;
  line-height: 1;
  border-radius: 10px;
  min-height: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.project-archive-cat-group .row {
  background: var(--white);
  padding: 10px 0 0;
  margin-bottom: 1px;
}
.project-archive-cat-group {
  padding-top: 20px !important;
}
/* Filter/sort results: count + criteria line above the grid. */
.project-results-summary {
  margin: 0 0 18px;
  font-size: 15px;
  color: var(--text);
}
.project-results-summary strong {
  color: var(--primary);
}
/* "Xem tất cả" button below each archive group. */
.project-view-all {
  margin-top: 6px;
}
/* Blog/project card: whole .box wrapped in a single a.plain → make it block-level. */
.post-item .col-inner > a.plain {
  display: block;
}
@media (min-width: 850px) {
  .real-project-side .is-sticky-column:not([data-sticky-mode]) {
    top: calc(var(--flatsome-scroll-padding-top) + 100px);
  }}
.footer-row-logo {
  border-bottom: 1px solid #333333;
  margin-bottom: 20px;
  padding-top: 15px;
}
#contact-form .contact-form-quote .form-desc,
#contact-form .contact-form-quote .form-label {
  color: var(--rimary);
}.dark .header-nav-links > .menu-item > .nav-top-link,
.buttons-quickbuy a:hover span,
footer#footer,
footer#footer a {  color: var(--white);
}
footer#footer a:hover {
  color: var(--fs-color-secondary);
}
.contact-sec .form-label,
.contact-sec .form-desc {
  display: none;
}
.header-bg-container {
  display: none !important;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header {
    background: rgba(255, 255, 255, 0.94);
  }}
/* + icon in meta (non-overlay): absolute right, meta = relative container */
.project-cat .section-title-main {
  font-size: 20px;
}
.product-box-sidebar {
  background-color: rgb(255, 255, 255);
  margin-bottom: 18px;
  padding: 23px 20px;
  border-radius: 5px;
  border: 1px solid var(--border);
}
.product-box-sidebar .box-title {
  font-weight: 600;
  margin-bottom: 10px;
  font-size: 16px;
  color: var(--heading);
}
.box-sidebar-list,
.box-sidebar-list li:last-child {
  margin-bottom: 0px;
}
.box-sidebar-list li {
  margin-left: 0px !important;
  list-style: none;
}.box-sidebar-list li a,
.box-sidebar-list li{
  color: var(--text);
  padding: 5px 0px;
}
.box-sidebar-list li i {
  color: var(--primary);
  font-size: 16px;
}
section.real-recruitment-related {
  background: var(--white);
}
.real-recruitment-loop-meta {
  margin: 8px 0 0;
  border: 0;
  list-style: none;
  color: var(--real-text-muted);
}
.real-recruitment-loop-meta__item {
  min-width: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  line-height: 1.35;
}
.real-recruitment-loop-meta__item + .real-recruitment-loop-meta__item::before {
  content: "·";
  margin: 0 6px;
  color: #c4ccd6;
}
.real-recruitment-loop-meta__icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background: transparent;
  color: var(--fs-color-primary, var(--primary-color));
  margin: 0 4px 0 0;
}
.real-recruitment-loop-meta__icon svg,
.real-recruitment-loop-meta__icon .real-rd-icon {
  width: 14px;
  height: 14px;
}
.real-recruitment-loop-meta__text {
  min-width: 0;
  color: inherit;
  line-height: 1.35;
  word-break: normal;
  overflow-wrap: normal;
}
.blog-post-inner .real-recruitment-loop-meta > li {
  margin: 0;
}

/* trả về từ reset.css: chuyển sang reset làm đổi kẻ thắng cascade (A/B bắt được) */
.woocommerce-page .star-rating {
  font-family: inherit !important;
  font-size: 16px;
  width: 5.4em;
  line-height: 1;
  margin: 0 !important;
}
.woocommerce-page .star-rating span::before {
  font-family: inherit !important;
  position: absolute;
  top: 0;
  left: 0;
}.woocommerce-page .star-rating span{
  top: 0;
  left: 0;
  height: 1em;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
}
/* === Nút sang trọng: gradient vàng brand + hiệu ứng hover (shine sweep + nâng + glow) === */
/* Real Address Maps — tab map chi nhánh (element real_address_maps) */
.real-address-maps {
  display: flex;
  gap: 24px;
  align-items: stretch;
}
.real-address-maps .real-address-maps__nav {
  flex: 0 0 var(--real-am-nav, 35%);
  max-width: var(--real-am-nav, 35%);
  display: block;
  margin: 0;
  max-height: var(--real-am-height, 530px);
  overflow-y: auto;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
}
.real-address-maps .real-address-maps__nav li.tab {
  display: block;
  float: none;
  margin: 0;
  border-bottom: 1px solid #e6e6e6;
}
.real-address-maps .real-address-maps__nav li.tab:last-child {
  border-bottom: 0;
}
.real-address-maps .real-address-maps__nav li.tab {
  position: relative;
  padding: 18px 20px;
}
.real-address-maps .real-address-maps__nav li.tab > a {
  display: block;
  padding: 0;
  text-transform: none;
  text-align: left;
  border: 0;
}
.real-address-maps .real-address-maps__nav li.tab > a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.real-address-maps__info a,
.real-address-maps__info span {
  position: relative;
  z-index: 2;
}
.real-address-maps__title {
  display: block;
  font-size: 1.25em;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 8px;
  text-align: left;
}
.real-address-maps__infos {
  margin: 0;
  list-style: none;
}
.real-address-maps__info {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 0;
  font-weight: 500;
}
.real-address-maps__info i {
  width: 18px;
  text-align: center;
  color: var(--primary);
}
.real-address-maps .real-address-maps__nav li.tab.active {
  background: var(--primary);
}
.real-address-maps .real-address-maps__nav li.tab.active .real-address-maps__title,
.real-address-maps .real-address-maps__nav li.tab.active .real-address-maps__info,
.real-address-maps .real-address-maps__nav li.tab.active .real-address-maps__info i,
.real-address-maps .real-address-maps__nav li.tab.active .real-address-maps__info a {
  color: #fff;
}
.real-address-maps__panels {
  flex: 1;
  min-width: 0;
}
.real-address-maps__panels .panel {
  padding: 0;
  height: var(--real-am-height, 530px);
}
.real-address-maps__panels iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 12px;
}
@media (max-width: 849px) {
  .real-address-maps {
    flex-direction: column;
  }
  .real-address-maps .real-address-maps__nav {
    flex-basis: auto;
    max-width: 100%;
  }
}

/* Builder-only placeholder cho panel map (Angular chặn iframe ngoài — giống element Map Flatsome) */
.real-address-maps__map-placeholder {
  height: 100%;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #eef3f6;
  border-radius: 12px;
  color: var(--primary);
}
.real-address-maps__map-placeholder i {
  font-size: 44px;
}
.real-address-maps__map-placeholder span {
  font-weight: 700;
}
.real-address-maps__map-placeholder small {
  color: #6b7c88;
  max-width: 320px;
  text-align: center;
}

/* Builder: overlay chặn iframe nuốt click/hover — học .map_overlay của element Map Flatsome,
   để click panel = select item, hover = breadcrumb chọn tổ tiên. */
.real-address-maps__builder-map {
  position: relative;
  height: 100%;
}
.real-address-maps__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
}
/* Giới thiệu — hero. CHỈ phần không có owner native (đã rà describe title/button/text_box). */
.real-gt-hero { position: relative; }
/* native-miss: ux_text không có font-size/color option — sub 32px/#131313 theo nguồn */
.real-gt-hero__sub p {
  font-size: 32px;
  font-weight: 600;
  color: #131313;
  margin: 4px 0 18px;
}
/* native-miss: theme cũ có rule .banner{background:#00adef} đè — trung hoà cho banner này */
.real-gt-hero__banner.banner { background: transparent; }
.real-gt-hero__banner { overflow: visible; }
/* native-miss: ux_banner bg_size không có giá trị contain */
.real-gt-hero__banner .bg { background-size: contain !important; }
/* native-miss: typography số/nhãn stat không có element owner */
.real-gt-stat__num { display: block; font-size: 36px; font-weight: 800; color: #0d307a; line-height: 1.1; }
.real-gt-stat__label { display: block; font-size: 14px; font-weight: 600; color: #1a1a1a; }
/* native-miss: decor dots nằm ngoài banner, không có position owner */
.real-gt-hero__dots { position: absolute; left: 0; bottom: -40px; max-width: 218px; }
/* native-miss: hiệu ứng float k-up-down 3s của nguồn — không có behavior native */
@keyframes real-k-up-down {
  0% { transform: translateY(0); }
  32% { transform: translateY(-1rem); }
  66% { transform: translateY(1rem); }
  100% { transform: translateY(0); }
}
.real-gt-stat { animation: real-k-up-down 3s infinite; }
.real-gt-hero .text-box.real-gt-stat:nth-last-of-type(2) { animation-delay: .5s; }
.real-gt-hero .text-box.real-gt-stat:nth-last-of-type(1) { animation-delay: 1s; }
@media (prefers-reduced-motion: reduce) {
  .real-gt-stat { animation: none; }
}
@media (max-width: 849px) {
  .real-gt-hero__sub p { font-size: 20px; }
  .real-gt-stat__num { font-size: 22px; }
  .real-gt-stat__label { font-size: 11px; }
  .real-gt-hero__dots { display: none; }
}

/* Giới thiệu — sections 1-8 native-miss CSS (merged controller 2026-07-15) */
/* Giới thiệu — section 1 modern native-miss */
/* native-miss: MODULE real-spin — gắn class vào bất kỳ ảnh/element nào để nó tự xoay tại chỗ.
   Flatsome behavior `animate` chỉ chạy 1 lần khi vào viewport, không có loop xoay vô hạn. */
.real-spin img,
img.real-spin { animation: real-spin 18s linear infinite; transform-origin: 50% 50%; }
.real-spin-reverse img,
img.real-spin-reverse { animation-direction: reverse; }
@keyframes real-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .real-spin img, img.real-spin { animation: none; } }

/* ── Real About Us element ─────────────────────────────────────────────
   native-miss: cụm giới thiệu 2 cột với video-thumbnail + badge 2 lớp đồng tâm + chips số liệu;
   Flatsome không có element nào gộp được, đã leo thang L1→L4 (xem plans/blocks/gioi-thieu/section-1.md). */
.real-about__row { align-items: center; }
.real-about__row > .col { padding-bottom: 0; }

.real-about__stage { position: relative; }

.real-about__frame {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 42px 0 42px 42px;
  background: #d9f2ff;
  box-shadow: 0 24px 64px rgba(13, 48, 122, .22);
}
/* native-miss: thumbnail YouTube là 16:9 — giữ nguyên tỉ lệ nguồn, không crop dọc làm mất nội dung.
   Ảnh chọn tay (chân dung) dùng aspect-ratio riêng qua .real-about__frame--portrait. */
.real-about__thumb-img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.real-about__frame--portrait .real-about__thumb-img { aspect-ratio: 488 / 624; }

/* native-miss: option image_tint phủ màu brand lên ảnh; ux_image/Woo không có duotone attr. */
.real-about__frame--tint::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 173, 239, .26), rgba(13, 48, 122, .10));
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* native-miss: nút play nằm giữa thumbnail; Flatsome .overlay-icon chỉ áp cho ux_banner/gallery. */
.real-about__play {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 18px 48px rgba(13, 48, 122, .24);
  color: #00adef;
  transform: translate(-50%, -50%);
  transition: transform .25s ease, background-color .25s ease;
}
.real-about__thumb:hover .real-about__play { background: #fff; transform: translate(-50%, -50%) scale(1.08); }
.real-about__thumb:focus-visible .real-about__play { outline: 3px solid #00adef; outline-offset: 4px; }

/* native-miss: badge logo = ::before (vòng chữ XOAY) + ::after (mark ĐỨNG YÊN) trên chính frame.
   Pseudo thay vì element con: frame có overflow:hidden nên badge BỊ MÉP CARD CẮT đúng như mẫu,
   đồng thời không đẻ 3 span vào DOM. Ảnh Media vào qua CSS var (pseudo không nhận attr). */
.real-about__frame--badge::before,
.real-about__frame--badge::after {
  content: "";
  position: absolute;
  z-index: 3;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
}

/* Vòng chữ: xoay vô hạn quanh tâm badge. */
.real-about__frame--badge::before {
  top: var(--real-badge-top, -34px);
  right: var(--real-badge-right, -30px);
  width: var(--real-badge-size, 132px);
  height: var(--real-badge-size, 132px);
  background-image: var(--real-badge-ring);
  animation: real-spin 18s linear infinite;
}

/* Mark: đồng tâm với vòng chữ, đứng yên. */
.real-about__frame--badge::after {
  top: calc(var(--real-badge-top, -34px) + (var(--real-badge-size, 132px) - var(--real-badge-mark-size, 56px)) / 2);
  right: calc(var(--real-badge-right, -30px) + (var(--real-badge-size, 132px) - var(--real-badge-mark-size, 56px)) / 2);
  width: var(--real-badge-mark-size, 56px);
  height: var(--real-badge-mark-size, 56px);
  background-image: var(--real-badge-mark);
}

@media (prefers-reduced-motion: reduce) { .real-about__frame--badge::before { animation: none; } }

/* native-miss: nhãn kính nổi trên ảnh; không element native nào đặt được layer này. */
/* native-miss: nhãn kính neo mép dưới-trái khung, tràn ra ngoài để không che nội dung video. */
.real-about__caption {
  position: absolute;
  z-index: 4;
  left: -22px;
  bottom: -26px;
  width: 238px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 22px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 16px 44px rgba(13, 48, 122, .16);
  backdrop-filter: blur(10px);
}
.real-about__caption strong { display: block; color: #0d307a; font-size: 22px; line-height: 1; }
.real-about__caption span { display: block; margin-top: 6px; color: #42506a; font-size: 13px; line-height: 1.35; }

.real-about__content > .col-inner { max-width: 690px; }

.real-about__kicker {
  display: inline-flex;
  width: fit-content;
  margin: 0 0 16px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(0, 173, 239, .12);
  color: #0d6da8;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.real-about__title {
  margin: 0 0 20px;
  color: #0d307a;
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 850;
  letter-spacing: -.03em;
  line-height: 1.05;
}

.real-about__copy p { margin: 0 0 14px; color: #48556a; font-size: 16px; line-height: 1.72; }
.real-about__copy strong { color: #0d307a; font-weight: 800; }

.real-about__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 22px 0 28px;
}
.real-about__stat {
  min-height: 86px;
  padding: 14px 16px;
  border: 1px solid rgba(13, 48, 122, .08);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(13, 48, 122, .07);
}
.real-about__stat-value { display: block; margin-bottom: 5px; color: #00adef; font-size: 24px; line-height: 1; font-weight: 800; }
.real-about__stat-label { display: block; color: #526078; font-size: 13px; line-height: 1.3; }

.real-about__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.real-about__video-btn.button,
/* native-miss: nút phụ nền TRẮNG đặc trên nền gradient; is-outline native là transparent. Chỉ đè
   2 thứ native không có: nền đặc + màu brand riêng (token primary của site là navy khác). */
.real-about__link-btn.button {
  background: #fff !important;
  color: #0d307a !important;
}

@media screen and (max-width: 849px) {
  .real-about__media { margin-bottom: 34px; }
  .real-about__frame { border-radius: 32px 0 32px 32px; }
  .real-about__play { width: 60px; height: 60px; }
  .real-about__play::before { border-width: 9px 0 9px 14px; }
  .real-about__frame--badge { --real-badge-size: 104px; --real-badge-mark-size: 46px; --real-badge-top: -26px; --real-badge-right: -22px; }
  .real-about__caption { left: -12px; bottom: -20px; width: 190px; padding: 13px 15px; }
  .real-about__content > .col-inner { max-width: none; }
  .real-about__title { font-size: 34px; }
  .real-about__copy p { font-size: 15px; line-height: 1.68; }
  .real-about__stats { grid-template-columns: 1fr; }
}

/* ── Section wrapper (placement riêng của trang Giới thiệu) ── */
/* native-miss: nền gradient + vệt sáng làm chiều sâu; section bg attr chỉ nhận màu/ảnh đơn. */
.real-gt-abc.real-gt-abc-modern { isolation: isolate; }
.real-gt-abc-modern {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(0, 173, 239, .16), transparent 34%),
    linear-gradient(180deg, #f7fbff 0%, #fff 74%);
}
.real-gt-abc-modern::before {
  content: "";
  position: absolute;
  inset: 42px auto auto 4%;
  width: 320px;
  height: 320px;
  border-radius: 999px;
  background: rgba(0, 173, 239, .09);
  filter: blur(10px);
  pointer-events: none;
}
.real-gt-abc-modern .real-about { position: relative; z-index: 1; }

/* native-miss: panel xanh brand sau ảnh là lớp trang trí, không phải nội dung biên tập. */
.real-gt-abc-modern .real-about__media > .col-inner::before {
  content: "";
  position: absolute;
  left: -34px;
  bottom: 18px;
  width: 76%;
  height: 78%;
  border-radius: 0 0 54px 0;
  background:
    linear-gradient(135deg, rgba(0, 173, 239, .74), rgba(13, 48, 122, .74)),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .16) 0 22px, rgba(255, 255, 255, 0) 22px 68px);
  box-shadow: 0 28px 70px rgba(13, 48, 122, .16);
}
.real-gt-abc-modern .real-about__stage { z-index: 2; width: 92%; margin: 0 auto; }

@media screen and (max-width: 849px) {
  .real-gt-abc-modern { padding-top: 54px !important; padding-bottom: 54px !important; }
  .real-gt-abc-modern .real-about__media > .col-inner { padding-left: 18px; }
  .real-gt-abc-modern .real-about__media > .col-inner::before { left: 0; bottom: -14px; width: 72%; height: 78%; border-radius: 0 0 38px 0; }
  .real-gt-abc-modern .real-about__stage { width: 86%; margin-left: 44px; }
}

/* Giới thiệu — section 2 native-miss */
/* native-miss: bản mẫu nền TRẮNG, chữ chạy thẳng trên nền — không card trắng bọc. */
.real-gt-letter { position: relative; overflow: hidden; background: #fff; }

/* native-miss: panel xanh bo góc dưới-phải nằm sau ảnh, lệch trái — lớp trang trí, không phải nội dung. */
.real-gt-letter .real-about__media > .col-inner::before {
  content: "";
  position: absolute;
  left: -46px;
  bottom: -18px;
  width: 74%;
  height: 76%;
  border-radius: 0 0 60px 0;
  background:
    linear-gradient(180deg, #7ec2ef, #6cb8ec),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .14) 0 26px, rgba(255, 255, 255, 0) 26px 74px);
}
.real-gt-letter .real-about__stage { z-index: 2; width: 84%; margin-left: auto; }

/* native-miss: ảnh chân dung bo 4 góc đều theo mẫu, không phải khung lệch của section hero. */
.real-gt-letter .real-about__frame {
  border-radius: 28px;
  background: #eceff1;
  box-shadow: none;
}

/* native-miss: cụm thư dùng typography prose, không dùng chip/kicker/nút như cụm giới thiệu. */
.real-gt-letter .real-about__title {
  margin: 0 0 22px;
  color: #0d307a;
  font-size: 38px;
  line-height: 1.1;
  font-weight: 850;
  letter-spacing: -.02em;
}
.real-gt-letter .real-about__copy p {
  margin: 0 0 2px;
  color: #2b3648;
  font-size: 15px;
  line-height: 1.62;
}
.real-gt-letter .real-about__copy p:last-child { margin-bottom: 0; }
.real-gt-letter .real-about__content > .col-inner { max-width: none; margin-left: 0; }

/* native-miss: badge neo góc TRÊN-PHẢI, BỊ MÉP ẢNH CẮT như mẫu (frame overflow:hidden). */
.real-gt-letter .real-about__frame--badge { --real-badge-size: 132px; --real-badge-mark-size: 56px; --real-badge-top: -30px; --real-badge-right: -26px; }

/* native-miss: dòng chức danh ký thư là run nghiêng màu brand trong prose; không có attr per-run. */
.real-gt-letter__role { color: #2f6fd0; font-style: italic; }

@media screen and (max-width: 849px) {
  .real-gt-letter .real-about__media { margin-bottom: 40px; }
  .real-gt-letter .real-about__media > .col-inner::before { left: -14px; bottom: -14px; width: 72%; height: 74%; border-radius: 0 0 40px 0; }
  .real-gt-letter .real-about__stage { width: 86%; margin-left: 34px; }
  .real-gt-letter .real-about__title { font-size: 30px; }
}

/* Giới thiệu — section 3 native-miss */
/* ── Real TabGroup element (dùng chung mọi dự án) ────────────────────
   Hệ .nav-* / .tabbed-content / behavior `tabs` là của Flatsome — CSS đây chỉ lo phần Real TabGroup
   thêm vào so với parent: icon trong tab + panel title. */
/* native-miss: parent [tabgroup] không có icon trong tab — delta của Real TabGroup. */
.real-tabgroup__icon { display: block; margin: 0 auto 10px; line-height: 1; }
.real-tabgroup__icon-img { display: block; width: 100%; height: auto; object-fit: contain; }

/* native-miss: tab có icon cần layout dọc (icon trên, chữ dưới); .nav>li>a native là hàng ngang. */
.real-tabgroup__tab > a { display: block; text-align: center; }

/* ── Section "Tại sao chọn ECE" ── */
.real-gt-why { background: #fff; }

/* native-miss: heading mẫu có gạch chân dưới run "ECE"; [title] không có attr underline per-run. */
.real-gt-why__title .section-title { justify-content: center; }
.real-gt-why__title .section-title b { display: none; }
.real-gt-why__title .section-title-main {
  border: 0;
  padding: 0;
  color: #2d3748;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.3;
  text-transform: none;
}
.real-gt-why__title .real-gt-accent {
  color: #1689fc;
  border-bottom: 3px solid #1689fc;
  padding-bottom: 2px;
}

/* native-miss: mẫu bọc CẢ nav lẫn panel trong một khối navy bo góc lớn; .tabbed-content của Flatsome
   không có bg/radius attr — nav và panel vốn là 2 vùng rời. */
.real-gt-why__tabs {
  margin-top: 34px;
  padding: 42px 40px 46px;
  border-radius: 34px;
  background: #0f2f6b;
}

/* native-miss: mẫu là 3 card CHIA ĐỀU; hệ .nav native là inline-flex theo nội dung, không có
   option "chia đều cột" — đây là điểm native thật sự thiếu. Skin card (nền/bo/active) để native lo:
   nav-pills đã có `background-color: var(--fs-color-primary)` cho .active + radius 99px; depth lo shadow. */
.real-gt-why__tabs .nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
/* native-miss: card mẫu cao 186px và chữ căn giữa; .nav>li>a native là line-height 2.5em một dòng.
   `height:100%` để 3 card cao BẰNG NHAU dù tiêu đề 1 hay 2 dòng (li là grid item nên % resolve được). */
.real-gt-why__tabs .nav > li { display: flex; }
.real-gt-why__tabs .nav > li > a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-height: 186px;
  padding: 24px 20px;
  border-radius: 20px;
  background: #fff;
  color: #16305c;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}

/* native-miss: mẫu active #57b3f0 khác token --fs-color-primary của site (navy) — màu riêng của cụm,
   không đổi token toàn site được. Selector khớp specificity rule native `.nav-pills>li.active>a`. */
.real-gt-why__tabs .nav > li.active > a { background: #57b3f0; color: #fff; }

.real-gt-why__tabs .real-tabgroup__icon { width: 72px; height: 72px; }
.real-gt-why__tabs .real-tabgroup__icon-img { height: 72px; }

/* native-miss: panel mẫu nằm trên nền navy, chữ trắng canh giữa — .panel native là entry-content thường. */
.real-gt-why__tabs .tab-panels { padding: 34px 4% 0; }
.real-gt-why__tabs .panel { color: #dbe6f7; text-align: center; }
.real-gt-why__tabs .panel p { margin: 0; font-size: 14px; line-height: 1.72; }

/* ── Dải số liệu ── */
/* native-miss: bản mẫu có logo tròn (vòng chữ + mark) nổi GIỮA dải, nửa dưới lồng vào khe giữa các
   card. Dùng ::before (vòng chữ XOAY) + ::after (mark ĐỨNG YÊN) trên chính row — không đẻ element.
   Ảnh trỏ Media (uploads/), không copy vào theme. Đây là badge brand cố định của section này. */
.real-gt-why__counts {
  position: relative;
  margin-top: 148px !important;
}
.real-gt-why__counts::before,
.real-gt-why__counts::after {
  content: "";
  position: absolute;
  left: 50%;
  z-index: 2;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
}
/* native-miss: @keyframes real-spin dùng `transform: rotate` nên GHI ĐÈ mọi transform khác. Nếu căn
   giữa bằng translateX(-50%) trên CÙNG phần tử thì animation xoá mất nó → phần tử vừa lệch tâm vừa
   không quay quanh tâm. Vì width cố định 132px ⇒ căn giữa bằng margin-left âm nửa width, để transform
   chỉ dành cho rotate. */
.real-gt-why__counts::before {
  top: -84px;
  width: 132px;
  height: 132px;
  margin-left: -66px;
  background-image: url(/wp-content/uploads/2026/07/real-ece-badge-ring.svg);
  animation: real-spin 18s linear infinite;
}
.real-gt-why__counts::after {
  top: -46px;
  width: 56px;
  height: 56px;
  margin-left: -28px;
  background-image: url(/wp-content/uploads/2023/09/cropped-Logo-xanh-tach-nen.png);
}
@media (prefers-reduced-motion: reduce) { .real-gt-why__counts::before { animation: none; } }
.real-gt-why__count {
  height: 100%;
  padding: 26px 18px;
  border-radius: 18px;
  background: #eff5fd;
}
.real-gt-why__count p { margin: 0; }
.real-gt-why__num {
  display: block;
  color: #16307c;
  font-size: 46px;
  font-weight: 800;
  line-height: 1.1;
}
.real-gt-why__label {
  display: block;
  margin-top: 6px;
  color: #3d4a63;
  font-size: 14px;
  line-height: 1.4;
}

@media screen and (max-width: 849px) {
  .real-gt-why__title .section-title-main { font-size: 24px; }
  .real-gt-why__tabs { margin-top: 26px; padding: 26px 18px 30px; border-radius: 24px; }
  .real-gt-why__tabs .nav { grid-template-columns: 1fr; gap: 14px; }
  .real-gt-why__tabs .nav > li > a { min-height: 0; flex-direction: row; gap: 14px; }
  .real-gt-why__tabs .real-tabgroup__icon { width: 48px; height: 48px; margin: 0; flex: 0 0 48px; }
  .real-gt-why__tabs .real-tabgroup__icon-img { height: 48px; }
  .real-gt-why__tabs .tab-panels { padding: 24px 0 0; }
  .real-gt-why__counts { margin-top: 96px !important; }
  .real-gt-why__counts::before { top: -68px; width: 96px; height: 96px; }
  .real-gt-why__counts::after { top: -40px; width: 40px; height: 40px; }
  .real-gt-why__num { font-size: 34px; }
}

/* Giới thiệu — section 4 native-miss */
/* Section "Tầm nhìn / Sứ mệnh" — full-width 2 cột xen kẽ.
   Full-width + collapse gutter + panel vàng + ảnh full-bleed đều là NATIVE:
   row style="collapse" width="full-width" · col bg_color · ux_banner bg. CSS đây chỉ lo typography. */

/* native-miss: [title] có vạch trang trí + flex space-between; heading mẫu là text thuần trái. */
.real-gt-vision__title .section-title { justify-content: flex-start; margin-bottom: 20px; }
.real-gt-vision__title .section-title b { display: none; }
.real-gt-vision__title .section-title-main {
  border: 0;
  padding: 0;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: none;
}

.real-gt-vision__text p,
.real-gt-vision__text li { color: #131313; font-size: 16px; line-height: 1.72; }
.real-gt-vision__text p { margin: 0 0 12px; }
.real-gt-vision__text p:last-child { margin-bottom: 0; }
.real-gt-vision__text ul { margin: 0; padding-left: 20px; }
.real-gt-vision__text li { margin-bottom: 10px; }
.real-gt-vision__text li:last-child { margin-bottom: 0; }
.real-gt-vision__text strong { color: #193f90; }

@media screen and (max-width: 849px) {
  /* native-miss: mobile mẫu luôn ảnh TRÊN panel; hàng đảo (panel--right) phải đổi thứ tự flex về media trước. */
  .real-gt-vision__row { flex-direction: column; }
  .real-gt-vision__media { order: 0; }
  .real-gt-vision__panel { order: 1; }
  .real-gt-vision__title .section-title-main { font-size: 26px; }
}

/* Giới thiệu — section 5 native-miss */
/* Section "Giá trị ECE mang lại" — 4 card viền dashed + pill title đè mép trên.
   Card + viền dashed + radius + gap + padding đều NATIVE của [col]:
   border="2px" border_style="dashed" border_color · border_radius · col_spacing="small" · padding.
   CSS đây chỉ lo: pill title (đè lên mép card — không attr nào làm được) + typography. */

.real-gt-brings { position: relative; }
.real-gt-brings__head { position: relative; }

/* native-miss: reset.css của theme trung hoà gutter Flatsome (col padding ~10px) nên row-large không nở;
   mẫu #22 gutter giữa card ~60px (card:gutter = 249:57). Set lại gutter scoped để pill tràn 2 bên KHÔNG chạm nhau. */
.real-gt-brings__grid.row-large > .col,
.real-gt-brings__grid.row-large > .col:first-child,
.real-gt-brings__grid.row-large > .col:last-child { padding-left: 30px; padding-right: 30px; }

/* native-miss: pill vàng RỘNG HƠN card, đè-tràn 2 mép side (overhang ~19px) — không col/text attr nào
   đặt được lớp tràn biên này. Pill nằm trong flow (top-pad col 99px chừa chỗ trên), margin âm để tràn. */
.real-gt-brings__card .col-inner { overflow: visible; }
.real-gt-brings__pill {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  height: 81px;
  margin: 0 -43px 27px;
  border-radius: 14px;
  background: #ffd52e;
  box-shadow: 0 12px 26px rgba(255, 213, 46, .35);
}
.real-gt-brings__pill span {
  color: #131313;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: uppercase;
  white-space: nowrap;
}

.real-gt-brings__text p {
  margin: 0;
  color: #131313;
  font-size: 15px;
  line-height: 1.62;
  text-align: center;
}

/* native-miss: gạch chân cyan dưới ECE (mẫu #22 section 5 & #23 section 6) — [title] không có option underline một run. */
.real-gt-brings .real-gt-accent,
.real-gt-journey .real-gt-accent { position: relative; display: inline-block; }
.real-gt-brings .real-gt-accent::after,
.real-gt-journey .real-gt-accent::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 3px;
  border-radius: 2px;
  background: #00adef;
}

/* native-miss: doodle trang trí (bulb trên-trái title, squiggle phải-dưới) — layer decor absolute thuần. */
.real-gt-brings .real-gt-brings__bulb {
  position: absolute;
  z-index: 2;
  top: 34px;
  left: calc(50% - 382px);
  width: 112px !important;
  margin: 0;
}
.real-gt-brings .real-gt-brings__squiggle {
  position: absolute;
  z-index: 1;
  right: 2%;
  bottom: 26px;
  width: 152px !important;
  margin: 0;
}

@media screen and (max-width: 849px) {
  .real-gt-brings__pill { height: 66px; margin: 0 -30px 20px; }
  .real-gt-brings__bulb { left: 12px; width: 84px; }
  .real-gt-brings__bulb img { width: 84px; }
  .real-gt-brings__squiggle { display: none; }
}

/* Giới thiệu — section 6: element Real Timeline (L4, không có native Flatsome cho timeline).
   Trục ngang navy + mũi tên phải; mốc xen kẽ trên/dưới; mỗi mốc có connector dashed + mũi tên ở đầu XA trục.
   Màu đo pixel từ mockup #23: trục/connector rgb(57,85,146), title rgb(16,51,124), year gold rgb(247,200,15). */
.real-timeline { position: relative; padding: 24px 0; }
.real-timeline__axis {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 3px;
  transform: translateY(-50%);
  background: #395592;
}
/* mũi tên phải cuối trục */
.real-timeline__axis::after {
  content: '';
  position: absolute;
  right: -2px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 14px solid #395592;
}
.real-timeline__track { display: flex; align-items: stretch; }
.real-timeline__item { position: relative; flex: 1 1 0; min-height: 540px; }
.real-timeline__box { position: absolute; left: 22px; right: 18px; }
/* connector dashed dọc bên trái content, chạy suốt chiều cao box tới trục */
.real-timeline__box::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  border-left: 2px dashed #7d90b8;
}
/* mũi tên ở ĐẦU connector (xa trục): lên với mốc trên, xuống với mốc dưới */
.real-timeline__box::after {
  content: '';
  position: absolute;
  left: -5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}
.real-timeline__content { display: flex; flex-direction: column; gap: 12px; }

.real-timeline__item.is-top .real-timeline__box { bottom: 50%; padding-bottom: 46px; }
.real-timeline__item.is-top .real-timeline__box::after { top: -1px; border-bottom: 9px solid #395592; }

.real-timeline__item.is-bottom .real-timeline__box { top: 50%; padding-top: 46px; }
.real-timeline__item.is-bottom .real-timeline__box::after { bottom: -1px; border-top: 9px solid #395592; }
.real-timeline__item.is-bottom .real-timeline__content { flex-direction: column-reverse; }

/* native-miss: navy brand mockup cho mốc timeline */
.real-timeline__content .post-title { margin: 0; font-size: 19px; font-weight: 800; line-height: 1.32; color: #10337c; }
.real-timeline__content p { margin: 0; font-size: 15px; line-height: 1.6; color: #333; }
.real-timeline__year { font-size: 24px; font-weight: 800; color: #f7c80f; }

/* mobile: xếp dọc, trục thành cột dashed bên trái, mốc luôn nằm phải trục */
@media screen and (max-width: 849px) {
  .real-timeline__axis { display: none; }
  .real-timeline__track { display: block; }
  .real-timeline__item,
  .real-timeline__item.is-top,
  .real-timeline__item.is-bottom { flex: none; min-height: 0; margin-bottom: 30px; }
  .real-timeline__item:last-child { margin-bottom: 0; }
  .real-timeline__box,
  .real-timeline__item.is-top .real-timeline__box,
  .real-timeline__item.is-bottom .real-timeline__box {
    position: relative;
    left: 0; right: 0; top: auto; bottom: auto;
    padding: 4px 0 4px 22px;
  }
  .real-timeline__box::after { display: none; }
  .real-timeline__item.is-bottom .real-timeline__content { flex-direction: column; }
}

/* Giới thiệu — section 7: nền trắng, featured teacher card (mockup #24 dùng chữ tối trên trắng). */
.real-gt-teachers .real-teacher-list { margin-top: 34px; }

/* Giới thiệu — section 8 native-miss */
/* native-miss: section khoảng cách giữa title và real_feedback grid không phải option của real_feedback. */
.real-gt-success .real-feedback-grid { margin-top: 34px; }

/* native-miss: decor dots được bọc row/col để hợp cấu trúc section>row>col, row wrapper không được chiếm layout flow. */
.real-gt-hero__dots-row { position: static; margin: 0 !important; max-width: none !important; }
.real-gt-hero__dots-row > .col { position: static; padding: 0 !important; }

/* Giới thiệu — parity height pass 1 (source section boxes 1440, 2026-07-15) */
/* native-miss: old source section .bn is 862px at fixed 1440; current native hero is 812px. */
.real-gt-hero.section { min-height: 862px; }
/* native-miss: .open-letter source section is 870px; current content over-expands to 1093px, so reduce vertical padding and clamp overflow rhythm. */
/* native-miss: source .why-choose is 987px; current native featured_box stack is shorter. */
/* native-miss: source .vision is 2204px; current native rows are 2347px, tighten row gap. */
/* native-miss: source .brings is 568px; current cards are shorter. */
/* native-miss: source .journey is 822px; timeline element tự cao ~588px + title, section min-height giữ nhịp trang. */
.real-gt-journey.section { min-height: 822px; }
/* native-miss: source .teacher-staff is 1156px; real_teacher native slider card grid is shorter. */
.real-gt-teachers.section { min-height: 1156px; }
.real-gt-teachers .real-teacher-list { margin-top: 76px; }
/* native-miss: source .success-story is 879px; real_feedback native grid is shorter. */
.real-gt-success.section { min-height: 879px; }
.real-gt-success .real-feedback-grid { margin-top: 76px; }
/* native-miss: [title] has no text-align attr; scoped class centers section headings. */
.real-gt-section-title .section-title { justify-content: center; text-align: center; }
.real-gt-section-title .section-title b { display: none; }
.real-gt-section-title .section-title-main { border: 0; padding: 0; }
.real-gt-accent { color: #00adef; }

/* Giới thiệu — parity height pass 2 (fine tune section boxes 1440) */
/* native-miss: source .open-letter is 870px; reduce letter paragraph rhythm to stop text_box over-expansion. */
/* native-miss: source .vision is 2204px; pass 1 overshot by 25px. */

/* Giới thiệu — parity pass 3 open-letter card shell fix */
/* native-miss: text_box outside banner is absolute; ensure letter uses ux_text card shell instead. */

/* Trang chủ — section "Vấn đề học viên" (cắt từ ece.edu.old, section .eh). Đo: bg #edf7fd,
   card trắng radius 24 + shadow, chữ #131313 17px center; phải = ảnh cô Nương + ring ECE xoay;
   dưới = banner vàng #ffd52e + nút navy. Ring dùng chung @keyframes real-spin. */
.home-sec-problems { background: #edf7fd; }
.home-problems__list .col-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.home-problems__card { margin: 0; }
.home-problems__card .col-inner,
.home-problems__card p { margin: 0; }
.home-problems__card p {
  display: flex; align-items: center; justify-content: center;
  min-height: 116px;
  padding: 22px 20px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(13, 48, 122, .10);
  color: #131313; font-size: 17px; line-height: 1.5; text-align: center;
}
/* staggered: card giữa-trái rộng hơn (đo mẫu), card kế lùi phải */
.home-problems__card--wide { grid-column: 1 / 2; }

.home-problems__media { position: relative; align-self: stretch; }
.home-problems__media .img { position: relative; }
/* ring ECE xoay góc phải-trên ảnh */
.home-problems__media::before,
.home-problems__media::after {
  content: ''; position: absolute; z-index: 3; background-repeat: no-repeat; background-position: center; background-size: contain; pointer-events: none;
}
.home-problems__media::before {
  top: 0; right: 4%;
  width: 150px; height: 150px;
  background-image: url(/wp-content/uploads/2026/07/real-ece-badge-ring.svg);
  animation: real-spin 20s linear infinite;
}
.home-problems__media::after {
  top: 40px; right: calc(4% + 40px);
  width: 70px; height: 70px;
  background-image: url(/wp-content/uploads/2023/09/cropped-Logo-xanh-tach-nen.png);
}
@media (prefers-reduced-motion: reduce) { .home-problems__media::before { animation: none; } }

/* CTA vàng: title navy + nút navy, flex 1 hàng */
.home-problems__cta > .col-inner { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; }
.home-problems__cta-title { margin: 0; }
.home-problems__cta-title strong { color: #0d307a; font-size: 30px; font-weight: 800; }
.home-problems__cta-btn.button { margin: 0; background: #0d307a; border-color: #0d307a; color: #fff; }
.home-problems__cta-btn.button:hover { background: #123a92; border-color: #123a92; }

@media (max-width: 849px) {
  .home-problems__list .col-inner { grid-template-columns: 1fr; }
  .home-problems__card--wide { grid-column: auto; }
  .home-problems__media { margin-top: 24px; max-width: 420px; }
  .home-problems__media::before { width: 108px; height: 108px; }
  .home-problems__media::after { width: 50px; height: 50px; top: 28px; right: calc(4% + 28px); }
  .home-problems__cta-title strong { font-size: 22px; }
}

/* Trang chủ — section "Các khóa học chính" tái dùng Real TabGroup (type vertical).
   Đo từ ece.edu.old .mc.tabJS + mockup #37: section vàng #ffdf5e, nav pill navy(active)/trắng, panel card trắng,
   chip #edf7fd. Flatsome tabbed-content vertical mặc định KHÔNG side-by-side → CSS ép flex nav trái | panel phải. */
/* Màu chủ đạo section = navy → nav-pills active tự navy (NATIVE, không CSS màu tay). */
.home-sec-courses { --fs-color-primary: #0d307a; }
/* native-miss: button primary của theme là gradient cyan→cam; CTA mẫu là navy solid. */
.home-sec-courses .cc-panel + .button.primary { background-image: none; background-color: #0d307a; }
.home-sec-courses .home-courses__title { margin-bottom: 40px; }
/* native-miss: Flatsome tab vertical KHÔNG side-by-side → ép flex nav(cột trái) | panel(phải). */
.home-courses__tabs { display: flex; align-items: flex-start; }
.home-courses__tabs > .nav { flex: 0 0 300px; flex-direction: column; align-items: stretch; margin-top: 30px; border: 0; gap: 16px; z-index: 2; }
.home-courses__tabs > .tab-panels { flex: 1; min-width: 0; }
/* nav-pills native lo active bg(navy)+radius; native-miss: pill full-width cột + card trắng/shadow + icon-image inline. */
.home-courses__tabs > .nav > li > a { justify-content: flex-start; padding: 20px 26px; border-radius: 16px; box-shadow: 0 8px 20px rgba(13, 48, 122, .08); font-size: 17px; }
.home-courses__tabs > .nav > li:not(.active) > a { background: #fff; color: #0d307a; }
.home-courses__tabs > .nav > li > a::before { display: none; }
/* icon_image của Real TabGroup (select được UX Builder). Bản gốc chỉ TAB ACTIVE hiện icon → ẩn ở inactive. */
.home-courses__tabs .real-tabgroup__icon-img { width: 26px; height: auto; }
.home-courses__tabs > .nav > li:not(.active) .real-tabgroup__icon { display: none; }
/* native-miss: panel LUÔN ở top → ẩn panel inactive (Flatsome hide-rule không áp class tabgroup custom). */
.home-courses__tabs > .tab-panels > .panel { display: none; }
.home-courses__tabs > .tab-panels > .panel.active {
  display: block;
  background: #fff; border-radius: 26px;
  padding: 46px 54px 46px 90px; margin-left: -40px;
  box-shadow: 0 30px 70px rgba(13, 48, 122, .12);
}
/* native-miss: card chip đầu ra/sỹ số (Flatsome không có class chip) + typography panel. */
.cc-panel__title { margin: 0 0 26px; color: #0d307a; font-size: 26px; font-weight: 800; text-transform: uppercase; }
.cc-panel__label { margin: 0 0 14px; font-size: 15px; }
.cc-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 20px; }
.cc-chip { display: inline-flex; padding: 12px 18px; border-radius: 12px; background: #edf7fd; color: #23407a; font-size: 15px; }
.cc-row { margin: 0 0 12px; font-size: 15px; }

@media (max-width: 849px) {
  .home-courses__tabs { flex-direction: column; }
  .home-courses__tabs > .nav { flex: none; width: 100%; flex-direction: row; flex-wrap: wrap; margin: 0 0 20px; }
  .home-courses__tabs > .nav > li { flex: 1; }
  .home-courses__tabs > .nav > li > a { justify-content: center; padding: 14px 16px; font-size: 15px; }
  .home-courses__tabs > .tab-panels > .panel.active { margin-left: 0; padding: 30px 24px; }
  .cc-panel__title { font-size: 21px; }
}

/* Trang chủ — section "Test trình độ miễn phí" (row large 5/7, CF7 form 7994 có sẵn, ux_slider native).
   Style theo class CÓ SẴN của form (.form-list/.form-ip/.btn) + Flatsome slider, không đẻ class mới. */
.home-test__hl { color: #ffd52e; }
.home-sec-test .home-test__desc p { color: #333; font-size: 16px; line-height: 1.72; margin: 12px 0 30px; }
/* form 2 cột: form-ip.col.per5 đã có sẵn, chỉ cần flex row */
.home-sec-test .form-list { display: flex; flex-wrap: wrap; gap: 20px; }
.home-sec-test .form-ip { flex: 1 1 200px; padding: 0; }
.home-sec-test .form-ip label,
.home-sec-test .form-ip > br { display: block; }
.home-sec-test .wpcf7-form input.wpcf7-text,
.home-sec-test .wpcf7-form input.wpcf7-tel { width: 100%; height: 54px; margin-top: 8px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fbfcfe; padding: 0 16px; }
/* nút: label.btn hiển thị "Gửi thông tin", input submit ẩn là clickable — style navy theo mẫu */
.home-sec-test .wpcf7 .btn { position: relative; display: inline-flex; width: fit-content; align-items: center; gap: 12px; margin-top: 26px; padding: 15px 28px; border-radius: 99px; background: #0d307a; color: #fff; font-weight: 700; cursor: pointer; }
.home-sec-test .wpcf7 .btn .txt-inner { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.home-sec-test .wpcf7 .btn::after { content: "\2192"; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 99px; background: #fff; color: #0d307a; font-weight: 800; }
/* slider: bo góc ảnh (native ux_slider lo slide/bullet) */
.home-test__media { position: relative; }
.home-test__slide .img-inner { border-radius: 20px; overflow: hidden; }
/* native-miss: huy hiệu thống kê nổi trên góc dưới slider (text_box position chỉ chạy trong ux_banner). */
.home-test__stat { position: absolute; left: 20px; bottom: 34px; z-index: 3; width: auto !important; margin: 0 !important; }
.home-test__stat .text-box-content { padding: 0; }
.home-test__stat-inner { display: inline-flex; align-items: center; gap: 14px; padding: 18px 26px; border-radius: 18px; background: #fff; box-shadow: 0 20px 50px rgba(13, 48, 122, .16); }
.home-test__stat-ic { display: inline-flex; width: 46px; height: 46px; align-items: center; justify-content: center; border-radius: 12px; background: #eaf3fd; }
.home-test__stat-txt strong { display: block; color: #0d307a; font-size: 26px; font-weight: 800; line-height: 1; }
.home-test__stat-txt span { display: block; margin-top: 4px; color: #5a6b8c; font-size: 14px; }

@media (max-width: 849px) {
  .home-test__media { margin-top: 30px; }
  .home-sec-test .wpcf7 .btn { width: 100%; justify-content: center; }
}

/* Trang chủ — section "Đội ngũ giáo viên" (site old .ts): real_teacher type=avatar trên nền navy.
   Card trắng, avatar tròn vàng chồm lên mép trên, name navy + job cyan center. Màu pixel #41:
   section #0d307a, avatar #fed42e, job #54ade9, button #fed42e. */
.home-sec-teachers { --fs-color-primary: #fed42e; }
.home-teachers__hl { color: #54ade9; }
.home-teachers__title { margin-bottom: 46px; }
/* avatar card: reuse cấu trúc media/frame/photo + body/name/job, đổi frame thành tròn vàng center. */
.real-teacher--avatar { min-height: 232px; background: #fff; border-radius: 20px; padding: 88px 22px 30px; margin-top: 74px; }
/* Y MẪU old (.ava-main/.ava-wr đo 2026-07-17): vòng VÀNG ĐẶC 147px overflow hidden chứa ảnh
   PNG cover; arc cyan = ẢNH ava-elip.png phủ ::after 1:1 (z1) — không border tự chế. */
/* native-miss: vòng vàng brand #ffd52e đo từ mẫu (.ava-wr) — không có var theme */
.real-teacher--avatar .box-image { position: absolute; top: -74px; left: 50%; transform: translateX(-50%); width: 147px; height: 147px; aspect-ratio: auto; border: 0; border-radius: 50%; background: #ffd52e; box-shadow: none; overflow: hidden; }
/* Frame = arc BORDER (border-top-color xanh) ở đỉnh circle. bg trong suốt (nền vàng ở ::before). */

/* Nền vàng = ::before (layer sau ảnh). */
/* native-miss: nền vàng brand mockup avatar */
.real-teacher--avatar .box-image::before { display: none; }
.real-teacher--avatar .box-image::after { content: ""; display: block; position: absolute; inset: 0; width: 100%; height: 100%; top: 0; right: 0; z-index: 1; background: url(/wp-content/uploads/2026/07/ava-elip.webp) center / contain no-repeat; animation: none; pointer-events: none; }
/* Ảnh cô giáo = img trên nền vàng. */
.real-teacher--avatar .box-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.real-teacher--avatar .box-text { flex: none; }
/* native-miss: navy brand mockup */
.real-teacher--avatar .post-title { color: #0d307a; font-size: 21px; }
.real-teacher--avatar .post-title a { color: inherit; }
/* native-miss: cyan brand mockup */
.real-teacher--avatar .real-teacher-job { margin: 8px 0 0; color: #54ade9; font-size: 15px; font-weight: 600; }
/* nút "Xem tất cả" vàng (archive button) trên nền navy. */
/* native-miss: nút vàng brand trên nền navy (theme primary #00adef không có) */
.home-sec-teachers .real-teacher-more .button { background: #fed42e; background-image: none; border-color: #fed42e; color: #0d307a; }

@media (max-width: 849px) {
  .real-teacher--avatar { padding-top: 78px; margin-top: 64px; }
  .real-teacher--avatar .box-image { top: -64px; }
  .real-teacher--avatar .box-image { width: 127px; height: 127px; }
}

/* ===== Real Slider News — skeleton NATIVE .box-vertical (text trái | ảnh phải theo DOM order).
   JS = Flatsome native slider behavior (data-flickity-options); thumbnail nav pattern Woo. ===== */
.real-news__main { margin-bottom: 0; } /* class còn là anchor asNavFor (selector động --<id>) */
.real-news__slide { width: 100%; }
/* native-miss: mockup panel text nền xám bo góc + hai cột cách nhau 30px */
.real-news__slide .box-text { width: 50%; padding: 0 30px 0 0; vertical-align: top; }
.real-news__slide .real-box-text-inner { display: flex; flex-direction: column; height: 100%; background: #f8f8f8; border-radius: 12px; padding: 40px 40px 30px; }
.real-news__slide .post-title { margin: 0 0 6px; font-size: 24px; }
/* native-miss: navy brand mockup */
.real-news__slide .post-title, .real-news__slide .post-title a { color: #0d307a; font-weight: 700; line-height: 1.3; }
.real-news__slide .is-xsmall { margin-bottom: 18px; }
.real-news__slide p { color: #595959; font-size: 16px; line-height: 1.75; margin: 0; }
/* native-miss: link "Xem bản tin" icon tròn xanh theo mockup */
.real-news-link { margin-top: auto; padding-top: 22px; display: inline-flex; align-items: center; color: #0d307a; font-weight: 600; font-size: 16px; }
/* native-miss: cyan brand mockup */
.real-news-link:hover { color: #54ade9; }
/* native-miss: icon tròn cyan brand mockup */
.real-news-link i { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: 10px; border-radius: 50%; background: #54ade9; color: #fff; font-size: .62em; }
.real-news__slide .box-image { width: 50%; border-radius: 12px; }
.real-news__slide .box-image img { width: 100%; height: 100%; object-fit: cover; }
/* Thumbnail nav — grid Woo native (.col + small-columns-5); Flickity gắn .is-nav-selected lên .col. */
.real-news__thumbs { margin-top: 30px; }
.real-news__thumbs .col { padding-bottom: 0; }
/* native-miss: card logo viền theo mockup (214×171, active viền vàng) */
.real-news__thumb { height: 171px; border: 1px solid #ededed; border-radius: 12px; display: flex; align-items: center; justify-content: center; padding: 49px 12px; cursor: pointer; transition: border-color .2s ease; background: #fff; }
.real-news__thumbs .col.is-nav-selected .real-news__thumb { border-color: #ffcc00; }
.real-news__thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
@media (max-width: 849px) {
  .real-news__slide { display: block; }
  .real-news__slide .box-text, .real-news__slide .box-image { width: 100%; }
  .real-news__slide .box-text { padding: 0 0 20px; }
  .real-news__slide .real-box-text-inner { padding: 26px 24px 24px; }
  .real-news__slide .post-title { font-size: 20px; }
  .real-news__thumb { height: 120px; padding: 24px 10px; }
}
/* Section báo chí — heading 2 màu + vòng "FOR EVERYONE ECE" xoay (decor tràn mép trái). */
.home-sec-news { position: relative; overflow: hidden; }
.home-sec-news .section-content { position: relative; z-index: 1; }
.home-news__t1 { color: #8a8a8a; }
/* native-miss: run nhấn cyan brand trong heading 2 màu (guồng site) */
.home-news__t2 { color: #54ade9; }
.home-sec-news::before, .home-sec-news::after { content: ""; position: absolute; left: -155px; top: 175px; width: 320px; height: 320px; z-index: 0; pointer-events: none; }
.home-sec-news::before { background: url(/wp-content/uploads/2026/07/curve-text.webp) center/contain no-repeat; animation: real-news-spin 20s linear infinite; }
.home-sec-news::after { background: url(/wp-content/uploads/2026/07/logomark.webp) center/70px no-repeat; }
@keyframes real-news-spin { to { transform: rotate(360deg); } }
@media (max-width: 849px) {
  .home-sec-news::before, .home-sec-news::after { display: none; }
}

/* ===== Section đối tác — logo card + caption. native-miss: real_marquee KHÔNG có option card/border. ===== */
/* Card cố định 232×118 (user 2026-07-18: "height chuẩn đồng nhất cho thuận tiện vận hành") — logo mọi tỉ lệ đều nằm giữa khung, không phình card */
.home-sec-partners .real-marquee-item { box-sizing: border-box; width: 232px; height: 118px; margin: 0 12px; padding: 20px 24px; justify-content: center; align-items: center; border: 1px solid #ededed; border-radius: 12px; background: #fff; }
.home-sec-partners .real-marquee-item img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* native-miss: Flatsome title không có preset caption nhỏ xám. */
.home-partners__cap .section-title-main { color: #8a8a8a; font-size: 16px; font-weight: 400; }
.home-partners__cap .section-title b { display: none; }

/* ===== Archive giảng viên — hero slider + grid 3 cột card trắng (redesign 2026-07-17) ===== */
/* native-miss: nền section list xanh nhạt brand */
.teacher-archive-list { background: #f7faff; }
/* card normal = nền trắng bo góc, hover nổi (has-hover native lo transition ảnh) */
/* native-miss: card trắng nổi trên nền section — mockup guồng site */
.real-teacher.box-text-bottom { display: flex; flex-direction: column; height: 100%; background: #fff; border-radius: 16px; padding: 18px 18px 24px; box-shadow: 0 8px 26px rgba(13, 48, 122, .07); transition: transform .18s ease, box-shadow .18s ease; }
.real-teacher.box-text-bottom .box-image { flex: none; width: 100%; }
.real-teacher.box-text-bottom .box-text { flex: 1; display: flex; flex-direction: column; }
/* meta 2-3 dòng (user chốt): mỗi point 1 dòng ellipsis, tối đa 3 */
.real-teacher-meta { margin-bottom: 14px !important; gap: 6px !important; }
.real-teacher-meta li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.real-teacher-meta li i { font-size: 12px; margin-top: 4px; }
/* nút dán đáy card — hàng nút thẳng đều bất kể tên/job dài ngắn */
.real-teacher.box-text-bottom .button { margin-top: auto; align-self: flex-start; }
.real-teacher.box-text-bottom:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(13, 48, 122, .13); }
.real-teacher.box-text-bottom .box-image { border-radius: 12px; }
.real-teacher.box-text-bottom .box-text { padding: 18px 6px 0; }
.real-teacher.box-text-bottom .post-title { font-size: 21px; }
/* native-miss: job clamp 2 dòng (user chốt) + giữ chiều cao đều card */
.real-teacher.box-text-bottom .real-teacher-job { margin: 6px 0 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em; }


/* native-miss: feature slider archive teacher — chân dung dọc KHÔNG crop (user chốt object-fit contain) */
.post-type-archive-teacher .real-sec-feature-slider .image-cover img { object-fit: contain; }

/* ===== CTA tư vấn dùng chung (khớp demo Ladi SECTION7 — đo 2026-07-18: nền #012e6b, vàng #ffde59, nút r10 chữ #0a3c7f, input trắng r4) ===== */
/* native-miss: vàng brand #ffde59 đo từ demo Ladi — title trong HTML thuần của block, không có attr native */
.real-cta-advise .real-cta-advise-title { color: #ffde59; font-size: 30px; font-weight: 800; margin-bottom: 8px; }
.real-cta-advise .real-cta-advise-sub { color: #fff; font-size: 16px; margin-bottom: 22px; max-width: 560px; }
.real-cta-advise .form-list { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; }
.real-cta-advise .form-ip { flex: 1 1 100%; padding: 0; margin: 0; }
.real-cta-advise .form-ip.per5 { flex: 1 1 calc(50% - 7px); }
/* demo dùng placeholder-trong-input, label ẩn khỏi mắt nhưng GIỮ cho screen reader (a11y blocker-level) */
.real-cta-advise .form-ip .text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.real-cta-advise .form-ip .input { margin: 0; }
.real-cta-advise .form-ip input,
.real-cta-advise .form-ip select,
.real-cta-advise .form-ip textarea { width: 100%; background: #fff; border: 0; border-radius: 4px; min-height: 36px; padding: 7px 14px; font-size: 13px; color: #222; box-shadow: none; margin: 0; }
.real-cta-advise .form-ip textarea { min-height: 100px; resize: vertical; }
/* native-miss: nút là <label> trong markup CF7 (không phải [button] Flatsome) — màu demo #ffde59/#0a3c7f không có owner native */
.real-cta-advise .btn.yellow { display: inline-flex; align-items: center; gap: 10px; background: #ffde59; color: #0a3c7f; font-size: 14px; font-weight: 700; border-radius: 10px; padding: 11px 26px; cursor: pointer; margin: 0; }
.real-cta-advise .btn.yellow img { width: 18px; height: 18px; }
.real-cta-advise .wpcf7-spinner { position: absolute; }
@media (max-width: 549px) {
  .real-cta-advise .form-ip.per5 { flex-basis: 100%; }
}
/* nút demo: label vàng là mặt, input submit phủ absolute opacity-0 = vùng click (pattern .home-sec-test có sẵn) */
.real-cta-advise .btn.yellow { position: relative; }
.real-cta-advise .btn.yellow .txt-inner { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.real-cta-advise .form-ip .btn.yellow .txt { display: inline-flex; align-items: center; gap: 10px; }
/* logo demo = 2 lớp: vòng chữ + logomark giữa (đo demo: mark 129/502 ≈ 26%) */
.real-cta-advise-logo { position: relative; display: inline-block; width: 100%; }
.real-cta-advise-logo .real-cta-advise-logomark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 26%; margin: 0; }
/* thắng rule .btn global (display/width) — nút demo co theo content, neo phải */
.real-cta-advise .form-ip .btn.yellow { display: inline-flex; width: auto; flex: 0 0 auto; }