/* CO-CHU-0311 */
/* Trang chủ RQX Chinese (Mix Style 02/11/2026): kết hợp bố cục hiện đại kiểu khoahoc12 + sắc màu tươi tắn, nổi 3D mềm của Cartoon */
body.rqx-home {
  background-color: #F4F8FB;
  background-image: radial-gradient(rgba(59, 139, 247, .14) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  color: #0B1B3F;
}
.rqx-home .hero-modern {
  background: radial-gradient(ellipse at 90% 10%, #DBEAFE 0%, transparent 52%),
              radial-gradient(ellipse at 8% 92%, #DBEAFE 0%, transparent 48%),
              linear-gradient(135deg, #ECFDF5 0%, #F8FAFC 52%, #EFF6FF 100%);
  color: #0B1B3F;
  border-bottom: 2px solid #A7F3D0;
  padding: 28px 0 46px;
  position: relative;
}
.rqx-home .hero-modern::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 24 C240 50 480 0 720 22 S1140 48 1440 16 V48 H0Z' fill='%230D9488'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
  pointer-events: none;
}
.rqx-home .hero-modern h1 {
  color: #0B1B3F;
  font-family: Arial, sans-serif;
  font-size: clamp(30px, 4.2vw, 48px);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -.01em;
}
.rqx-home .hero-modern h1 em {
  display: inline-block;
  color: #062B5F;
  background: linear-gradient(135deg, #D1FAE5 0%, #DBEAFE 100%);
  padding: 0 12px;
  border-radius: 14px;
  border: 2px solid #1056B9;
  box-shadow: 0 3px 0 #054196;
  font-style: normal;
  transform: rotate(-1deg);
}
.rqx-home .hero-modern .hero-sub {
  color: #334155;
  font-size: clamp(15px, 1.4vw, 17px);
  max-width: 510px;
  font-weight: 600;
}
.rqx-home .hero-modern .kicker {
  color: #1E3A8A;
  background: linear-gradient(135deg, #DBEAFE, #BFDBFE);
  border: 1.5px solid #3B82F6;
  box-shadow: 0 2.5px 0 #2563EB;
  font-family: Arial, sans-serif;
  font-weight: 800;
}
.rqx-home .hero-link {
  color: #0957C3;
  font-family: Arial, sans-serif;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: #3B82F6;
  text-decoration-thickness: 2.5px;
  text-underline-offset: 4px;
}
.rqx-home .hero-kpis {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.rqx-home .hero-kpi {
  background: #FFFFFF;
  border: 1.5px solid #93C5FD;
  border-radius: 15px;
  box-shadow: 0 3px 0 #BFDBFE;
  padding: 9px 12px;
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1);
}
.rqx-home .hero-kpi:nth-child(1) { background: linear-gradient(135deg, #EFF6FF, #FFFFFF); border-color: #93C5FD; box-shadow: 0 3px 0 #BFDBFE; }
.rqx-home .hero-kpi:nth-child(2) { background: linear-gradient(135deg, #EFF6FF, #FFFFFF); border-color: #93C5FD; box-shadow: 0 3px 0 #BFDBFE; }
.rqx-home .hero-kpi:nth-child(3) { background: linear-gradient(135deg, #F1F7FF, #FFFFFF); border-color: #A4C9FD; box-shadow: 0 3px 0 #CDE1FE; }
.rqx-home .hero-kpi:nth-child(4) { background: linear-gradient(135deg, #ECFDF5, #FFFFFF); border-color: #6EE7B7; box-shadow: 0 3px 0 #A7F3D0; }
.rqx-home .hero-kpi:hover { transform: translateY(-2px); }
.rqx-home .hero-kpi .k-ic {
  background: #FFFFFF;
  border: 1.5px solid #CBD5E1;
  border-radius: 11px;
  box-shadow: 0 2px 0 #E2E8F0;
}
.rqx-home .hero-kpi b { color: #0B1B3F; font-family: Arial, sans-serif; font-size: 17px; }
.rqx-home .hero-kpi span { display: block !important; color: #475569; font-size: 13px; font-weight: 600; }

.rqx-home .rqx-paths { background: #F4F8FB; padding-bottom: 28px; }
.rqx-home .rqx-subbar { background: rgba(255, 255, 255, .96); border-bottom: 2px solid #CBD5E1; }
.rqx-home .rqx-subpane[data-pane="tinh-nang-noi-bat"] { background: linear-gradient(180deg, #F0FDF4 0%, #F4F8FB 100%); }
.rqx-home .rqx-subpane[data-pane="kham-pha-7-tab"] { background: linear-gradient(180deg, #EFF6FF 0%, #F4F8FB 100%); }
.rqx-home .rqx-subpane[data-pane="chon-lo-trinh"] { background: linear-gradient(180deg, #EFF6FF 0%, #F4F8FB 100%); }
.rqx-home .rqx-subpane[data-pane="hop-tac-trung-tam"] { background: linear-gradient(180deg, #F5F3FF 0%, #F4F8FB 100%); }
.rqx-home .rqx-subpane[data-pane="tac-gia-bang-gia"] { background: linear-gradient(180deg, #FFF7ED 0%, #F4F8FB 100%); }

.rqx-home .rqx-video-stage {
  background: linear-gradient(180deg, #FFFFFF 0%, #F0FDF4 100%);
  border: 2px solid #0B6CF3;
  border-radius: 24px;
  box-shadow: 0 6px 0 #99C0F6, 0 16px 36px rgba(15, 23, 42, .08);
  padding: 12px;
}
.rqx-home .rqx-live-badge {
  color: #FFFFFF;
  background: linear-gradient(135deg, #1D6FE1, #125ABE);
  border: 1.5px solid #E4EFFF;
  border-radius: 999px;
  padding: 3px 12px;
  box-shadow: 0 2px 0 #124D9F;
}
.rqx-home .rqx-video-top a { color: #0957C3 !important; font-weight: 800 !important; }
.rqx-home .rqx-vchap {
  background: #FFFFFF;
  color: #0B1B3F;
  border: 1.5px solid #99C0F6;
  box-shadow: 0 2.5px 0 #99C0F6;
  border-radius: 12px;
  font-family: Arial, sans-serif;
  font-weight: 700;
}
.rqx-home .rqx-vchap.on {
  background: linear-gradient(135deg, #93C5FD 0%, #3B82F6 100%);
  color: #0B1B3F;
  border-color: #2563EB;
  box-shadow: 0 3px 0 #1D4ED8;
}
.rqx-home .rqx-vchap:hover:not(:disabled) {
  background: #DBEAFE;
  color: #0B1B3F;
  border-color: #3B82F6;
  transform: translateY(-1.5px);
}
#rqxMusic {
  position: fixed;
  top: auto;
  right: 16px;
  bottom: calc(96px + env(safe-area-inset-bottom));
  left: auto;
  z-index: 95;
  display: flex;
  gap: 0;
  border: 1.5px solid #3B82F6;
  border-radius: 999px;
  background: linear-gradient(135deg, #EFF6FF, #DBEAFE);
  box-shadow: 0 3px 0 #2563EB, 0 6px 14px rgba(15, 23, 42, .1);
  overflow: hidden;
}
#rqxMusic button { border: 0; min-height: 38px; background: transparent; color: #0B1B3F; font: 800 12.5px Arial, system-ui, sans-serif; cursor: pointer; padding: 6px 12px; }
#rqxMusic button + button { border-left: 1px solid #93C5FD; font-size: 18px; min-width: 38px; padding: 6px 8px; }
#rqxMusic button:hover { background: #BFDBFE; }
#rqxMusic button:focus-visible { outline: 2px solid #2563EB; outline-offset: -2px; }
@media (max-width: 760px) { .rqx-home .rqx-video-top { flex-wrap: wrap; } .rqx-home .hero-kpis { grid-template-columns: 1fr; } }

@media (max-width: 760px) { #rqxMusic, .rqx-home #rqxMusic { bottom: calc(150px + env(safe-area-inset-bottom)); right: 10px; } #rqxMusic button { min-height: 32px; padding: 4px 8px; } }