/*
Theme Name: Astra Child
Template: astra
Version: 1.0
*/

/* =========================================================
   SmartReadingLab — CLEAN STYLESHEET
   Mục tiêu:
   - Một nguồn CSS gọn, không chồng nhiều bản FINAL/FIX
   - Giữ giao diện premium: nền sáng, card trắng, shadow mềm
   - Home directory ổn định: search, filter, sort, pagination, rows
   - Review pages đồng bộ: hero, score, sidebar, related reviews
   - Visit Site màu cam, Review hover xanh
   ========================================================= */

:root{
  --srl-bg: #f5f7fb;
  --srl-soft: #f8fbff;
  --srl-card: rgba(255,255,255,.90);
  --srl-white: #ffffff;
  --srl-dark: #0f172a;
  --srl-dark-2: #1e293b;
  --srl-text: #0f172a;
  --srl-muted: #64748b;
  --srl-border: rgba(15,23,42,.08);
  --srl-blue: #2563eb;
  --srl-blue-2: #1d4ed8;
  --srl-blue-soft: #eef4ff;
  --srl-orange: #ff8a1d;
  --srl-orange-2: #ff5f1f;
  --srl-shadow-sm: 0 10px 26px rgba(15,23,42,.06);
  --srl-shadow: 0 18px 45px rgba(15,23,42,.07);
  --srl-shadow-lg: 0 30px 80px rgba(15,23,42,.10);
  --srl-radius: 22px;
  --srl-radius-lg: 34px;
  --srl-wrap: 1180px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: auto !important; }
body{ overflow-x: hidden; }

/* =========================
   Astra reset / full width
   ========================= */
.ast-container,
.site-content .ast-container{
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.site-content{ padding-top: 0 !important; }

body.home #secondary,
body.page-template-page-home #secondary{ display: none !important; }

body.home #primary,
body.home .content-area,
body.home .site-main,
body.page-template-page-home #primary,
body.page-template-page-home .content-area,
body.page-template-page-home .site-main{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.home .site-content,
body.home .site-content .ast-container,
body.home .content-area{
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Hide Astra menu on Home, keep logo/title usable */
body.home .main-header-menu,
body.home .ast-header-menu,
body.home .main-navigation,
body.home .ast-main-header-bar-alignment{
  display: none !important;
}

body.home .site-header{
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  z-index: 9999 !important;
}
body.home .ast-site-header-wrap,
body.home .ast-primary-header-bar,
body.home .main-header-bar,
body.home .main-header-bar-wrap{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* =========================
   Shared layout helpers
   ========================= */
.srl-wrap,
.srl-container,
.srl-container-wide{
  width: min(var(--srl-wrap), calc(100% - 40px));
  max-width: var(--srl-wrap);
  margin: 0 auto;
}
.srl-container-wide{ --srl-wrap: 1320px; }

.srl-section{ padding: 64px 0; }
.srl-section-soft{ background: #f6f7fb; }

.srl-h2{
  margin: 0 0 10px;
  color: var(--srl-text);
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.12;
  letter-spacing: -.04em;
  font-weight: 950;
  text-align: center;
}
.srl-sub2{
  margin: 0 auto 28px;
  max-width: 720px;
  color: var(--srl-muted);
  text-align: center;
  line-height: 1.7;
}

/* =========================
   Fixed SmartReadingLab title pill
   ========================= */
body.home .site-title,
body.home .ast-site-title,
body.page:not(.home):not(.page-template-page-categories) .site-title,
body.page:not(.home):not(.page-template-page-categories) .ast-site-title{
  position: fixed !important;
  top: 16px !important;
  left: 16px !important;
  z-index: 999999 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.home .site-title a,
body.home .ast-site-title a,
body.page:not(.home):not(.page-template-page-categories) .site-title a,
body.page:not(.home):not(.page-template-page-categories) .ast-site-title a{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  background: rgba(0,0,0,.88) !important;
  color: #fff !important;
  font-weight: 950 !important;
  letter-spacing: .5px !important;
  text-decoration: none !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.45) !important;
}

body.home .site-title a::before,
body.home .ast-site-title a::before,
body.page:not(.home):not(.page-template-page-categories) .site-title a::before,
body.page:not(.home):not(.page-template-page-categories) .ast-site-title a::before{
  content: "" !important;
  position: absolute !important;
  inset: -2px !important;
  border-radius: 999px !important;
  padding: 2px !important;
  background: linear-gradient(90deg,#22d3ee,#a855f7,#fb7185,#22d3ee) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none !important;
  animation: srHue 2.2s linear infinite !important;
}
@keyframes srHue{ from{filter:hue-rotate(0deg);} to{filter:hue-rotate(360deg);} }

/* =========================================================
   HOME HEADER PILL MENU
   ========================================================= */
body.home .srl-pill-header{
  position: absolute !important;
  top: 20px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 99999 !important;
  padding: 0 20px !important;
  pointer-events: none !important;
}
body.home.admin-bar .srl-pill-header{ top: 52px !important; }

body.home .srl-pill-inner{
  width: min(980px, calc(100% - 520px)) !important;
  min-height: 56px !important;
  margin: 0 auto !important;
  padding: 0 18px 0 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 26px !important;
  background: rgba(255,255,255,.88) !important;
  border: 1px solid var(--srl-border) !important;
  border-radius: 999px !important;
  box-shadow: 0 18px 50px rgba(15,23,42,.08) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  pointer-events: auto !important;
}
body.home .srl-pill-logo{ display: none !important; }
body.home .srl-pill-nav{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 26px !important;
  flex-wrap: nowrap !important;
}
body.home .srl-pill-nav a{
  color: var(--srl-dark) !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}
body.home .srl-pill-nav a:hover{ color: var(--srl-blue) !important; }
body.home .srl-pill-copy{
  width: 34px !important;
  height: 34px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--srl-dark) !important;
  font-size: 22px !important;
  cursor: pointer !important;
}

/* =========================================================
   HOME DIRECTORY PAGE
   ========================================================= */
body.home .srl-directory-page{
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  color: var(--srl-text) !important;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 12% 18%, rgba(59,130,246,.16), transparent 28%),
    radial-gradient(circle at 86% 8%, rgba(20,184,166,.14), transparent 30%),
    radial-gradient(circle at 80% 72%, rgba(168,85,247,.10), transparent 28%),
    linear-gradient(180deg,#f8fbff 0%,#eef3fb 48%,#f7f9fc 100%) !important;
  position: relative;
  overflow: hidden;
}
body.home .srl-directory-page::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(15,23,42,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.045) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.7), transparent 55%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.7), transparent 55%);
}
body.home .srl-directory-hero .srl-wrap,
body.home .srl-directory-body .srl-wrap{
  position: relative;
  z-index: 2;
}

/* Hero directory */
body.home .srl-directory-hero{
  padding: 150px 0 48px !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(37,99,235,.22), transparent 30%),
    radial-gradient(circle at 85% 16%, rgba(45,212,191,.22), transparent 28%),
    radial-gradient(circle at 58% 90%, rgba(168,85,247,.12), transparent 30%),
    linear-gradient(135deg,#ffffff 0%,#f4f8ff 45%,#eef7ff 100%) !important;
  border-bottom: 1px solid #e2e8f0;
  position: relative;
  overflow: hidden;
}
body.home .srl-directory-hero::before,
body.home .srl-directory-hero::after{
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}
body.home .srl-directory-hero::before{
  width: 520px;
  height: 520px;
  right: -160px;
  top: -180px;
  background: radial-gradient(circle, rgba(37,99,235,.22), transparent 62%);
}
body.home .srl-directory-hero::after{
  width: 460px;
  height: 460px;
  left: -140px;
  bottom: -220px;
  background: radial-gradient(circle, rgba(20,184,166,.18), transparent 64%);
}
body.home .srl-hero-top{
  display: grid !important;
  grid-template-columns: minmax(0,1fr) 320px !important;
  gap: 32px !important;
  align-items: end !important;
}
body.home .srl-top-label{
  display: inline-flex !important;
  align-items: center !important;
  padding: 7px 12px !important;
  background: var(--srl-blue-soft) !important;
  color: var(--srl-blue) !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  margin-bottom: 14px !important;
}
body.home .srl-directory-hero h1{
  margin: 0 0 12px !important;
  color: #111827 !important;
  font-size: clamp(34px,5vw,58px) !important;
  line-height: 1.05 !important;
  letter-spacing: -.04em !important;
  font-weight: 950 !important;
}
body.home .srl-directory-hero p{
  max-width: 720px !important;
  margin: 0 !important;
  color: #596579 !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
}
body.home .srl-hero-card{
  background:
    radial-gradient(circle at top right, rgba(45,212,191,.25), transparent 42%),
    linear-gradient(135deg, rgba(15,23,42,.96), rgba(30,41,59,.94)) !important;
  color: #fff !important;
  padding: 22px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 20px 60px rgba(15,23,42,.18) !important;
}
body.home .srl-hero-card strong{
  display: block !important;
  color: #fff !important;
  font-size: 18px !important;
  margin-bottom: 8px !important;
}
body.home .srl-hero-card span{
  display: block !important;
  color: rgba(255,255,255,.72) !important;
  line-height: 1.6 !important;
  font-size: 14px !important;
}

/* Search */
body.home .srl-search-bar{
  margin-top: 24px !important;
  max-width: 760px !important;
  padding: 8px !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.72) !important;
  border: 1px solid var(--srl-border) !important;
  box-shadow: 0 18px 50px rgba(15,23,42,.08) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  display: flex !important;
  gap: 8px !important;
}
body.home .srl-search-bar input{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 58px !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  border-radius: 16px !important;
  padding: 0 20px !important;
  font-size: 16px !important;
  color: var(--srl-dark) !important;
  box-shadow: none !important;
}
body.home .srl-search-bar input:focus{
  box-shadow: inset 0 0 0 2px rgba(37,99,235,.18) !important;
  background: rgba(255,255,255,.65) !important;
}
body.home .srl-search-bar button{
  height: 58px !important;
  min-width: 118px !important;
  padding: 0 20px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg,var(--srl-dark),var(--srl-dark-2)) !important;
  color: #fff !important;
  font-weight: 950 !important;
  box-shadow: 0 14px 28px rgba(15,23,42,.22) !important;
  cursor: pointer !important;
  transition: .2s ease !important;
}
body.home .srl-search-bar button:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 36px rgba(15,23,42,.28) !important;
}

/* Stats / chips */
body.home .srl-stats-grid{
  margin-top: 22px !important;
  display: grid !important;
  grid-template-columns: repeat(4,1fr) !important;
  gap: 12px !important;
  max-width: 920px !important;
}
body.home .srl-stats-grid div{
  background: rgba(255,255,255,.86) !important;
  border: 1px solid #e5eaf2 !important;
  border-radius: 16px !important;
  padding: 16px !important;
  box-shadow: var(--srl-shadow-sm) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}
body.home .srl-stats-grid strong{
  display: block !important;
  font-size: 24px !important;
  color: var(--srl-dark) !important;
  font-weight: 950 !important;
}
body.home .srl-stats-grid span{
  color: var(--srl-muted) !important;
  font-size: 13px !important;
}
body.home .srl-chip-row{
  margin-top: 18px !important;
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}
body.home .srl-chip-row span{
  background: #fff !important;
  border: 1px solid #dce6f2 !important;
  color: #334155 !important;
  padding: 9px 13px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  font-size: 13px !important;
}

/* Body layout */
body.home .srl-directory-body{
  padding: 34px 0 30px !important;
}
body.home .srl-layout{
  display: grid !important;
  grid-template-columns: 280px minmax(0,1fr) !important;
  gap: 24px !important;
  align-items: start !important;
}
body.home .srl-sidebar{
  position: sticky !important;
  top: 24px !important;
}
body.home .srl-main-list{ min-width: 0 !important; overflow: visible !important; }

body.home .srl-filter-box,
body.home .srl-submit-box,
body.home .srl-note-box,
body.home .srl-list-head,
body.home .srl-program-row{
  background: rgba(255,255,255,.86) !important;
  border: 1px solid #e7eaf0 !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 28px rgba(15,23,42,.04) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}
body.home .srl-filter-box,
body.home .srl-submit-box,
body.home .srl-note-box{
  padding: 20px !important;
  margin-bottom: 18px !important;
}
body.home .srl-filter-box h3,
body.home .srl-submit-box h3,
body.home .srl-note-box h3{
  margin: 0 0 16px !important;
  color: var(--srl-dark) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}
body.home .srl-filter-title{
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}
body.home .srl-filter-title span{
  background: #ecfeff !important;
  color: #0891b2 !important;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}
body.home .srl-filter-group{ margin-bottom: 16px !important; }
body.home .srl-filter-group label{
  display: block !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  color: #475569 !important;
  margin-bottom: 7px !important;
}
body.home .srl-filter-group select{
  width: 100% !important;
  height: 42px !important;
  border: 1px solid #dfe6f0 !important;
  border-radius: 10px !important;
  padding: 0 10px !important;
  background: #f8fafc !important;
  outline: none !important;
}
body.home .srl-submit-box p,
body.home .srl-note-box ul{
  color: var(--srl-muted) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}
body.home .srl-submit-box a,
body.home .srl-reset-filters{
  display: inline-flex !important;
  width: 100% !important;
  height: 46px !important;
  justify-content: center !important;
  align-items: center !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: var(--srl-dark) !important;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 950 !important;
  cursor: pointer !important;
  box-shadow: 0 12px 26px rgba(15,23,42,.16) !important;
  transition: .2s ease !important;
}
body.home .srl-submit-box a:hover,
body.home .srl-reset-filters:hover{
  transform: translateY(-2px) !important;
  background: var(--srl-dark-2) !important;
  color: #fff !important;
}

/* List header */
body.home .srl-list-head{
  padding: 26px 28px !important;
  margin-bottom: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  position: relative !important;
  z-index: 50 !important;
  overflow: visible !important;
}
body.home .srl-list-head h2{
  margin: 0 0 4px !important;
  color: #111827 !important;
  font-size: 28px !important;
  font-weight: 950 !important;
}
body.home .srl-list-head p{
  margin: 0 !important;
  color: var(--srl-muted) !important;
}
body.home .srl-list-tools{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
}
body.home #srlProgramCounter{
  height: 46px !important;
  padding: 0 16px !important;
  border-radius: 16px !important;
  background: var(--srl-blue-soft) !important;
  color: var(--srl-blue) !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
}

/* Quick filters */
body.home .srl-quick-filters{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin: 0 0 16px !important;
}
body.home .srl-quick-filters button{
  height: 36px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(37,99,235,.12) !important;
  background: rgba(255,255,255,.78) !important;
  color: #475569 !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  cursor: pointer !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.04) !important;
  transition: .18s ease !important;
}
body.home .srl-quick-filters button:hover,
body.home .srl-quick-filters button.active{
  background: var(--srl-blue) !important;
  color: #fff !important;
  border-color: var(--srl-blue) !important;
  transform: translateY(-1px) !important;
}

/* Custom sort */
body.home .srl-custom-sort{
  position: relative !important;
  width: 205px !important;
  min-width: 205px !important;
  max-width: 205px !important;
  height: 44px !important;
  padding: 0 10px !important;
  display: grid !important;
  grid-template-columns: 24px 1fr 14px !important;
  gap: 6px !important;
  align-items: center !important;
  border-radius: 13px !important;
  background: #fff !important;
  border: 1px solid rgba(37,99,235,.22) !important;
  box-shadow: 0 12px 30px rgba(15,23,42,.07) !important;
  overflow: visible !important;
  z-index: 100 !important;
}
body.home .srl-custom-sort select{ display: none !important; }
body.home .srl-custom-sort::after{ display: none !important; content: none !important; }
body.home .srl-sort-label{
  grid-column: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  font-size: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
body.home .srl-sort-label::before{
  content: "↕" !important;
  font-size: 16px !important;
  line-height: 20px !important;
  font-weight: 950 !important;
  color: var(--srl-dark) !important;
  transform: translateY(-1px) !important;
}
body.home .srl-sort-current{
  grid-column: 2 / 4 !important;
  display: grid !important;
  grid-template-columns: 1fr 14px !important;
  align-items: center !important;
  justify-items: center !important;
  height: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--srl-dark) !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  text-align: center !important;
  cursor: pointer !important;
}
body.home .srl-sort-current::after{
  content: "⌄" !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--srl-muted) !important;
  font-size: 13px !important;
  height: 14px !important;
  line-height: 14px !important;
  margin: 0 !important;
  transform: translateY(-4px) !important;
}
body.home .srl-sort-menu{
  display: none;
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  width: 100% !important;
  padding: 6px !important;
  border-radius: 16px !important;
  background: #fff !important;
  border: 1px solid var(--srl-border) !important;
  box-shadow: 0 24px 60px rgba(15,23,42,.18) !important;
  z-index: 99999 !important;
  overflow: hidden !important;
}
body.home .srl-custom-sort.is-open .srl-sort-menu{ display: block !important; }
body.home .srl-sort-menu button{
  width: 100% !important;
  height: 40px !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: transparent !important;
  color: var(--srl-dark) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  text-align: center !important;
  padding: 0 12px !important;
  cursor: pointer !important;
}
body.home .srl-sort-menu button:hover{
  background: var(--srl-blue-soft) !important;
  color: var(--srl-blue) !important;
}

/* Table / rows */
body.home .srl-table-head{
  display: grid !important;
  grid-template-columns: minmax(260px,1.45fr) minmax(92px,.55fr) minmax(92px,.55fr) minmax(92px,.55fr) minmax(105px,.6fr) 104px !important;
  gap: 10px !important;
  padding: 0 18px 12px !important;
  color: var(--srl-muted) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
  letter-spacing: .03em !important;
  position: relative !important;
  z-index: 1 !important;
}
body.home .srl-program-list{
  display: grid !important;
  gap: 14px !important;
  max-width: 100% !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  padding-bottom: 14px !important;
  position: relative !important;
  z-index: 1 !important;
}
body.home .srl-program-row{
  width: 100% !important;
  min-width: 0 !important;
  padding: 18px !important;
  display: grid !important;
  grid-template-columns: minmax(260px,1.45fr) minmax(92px,.55fr) minmax(92px,.55fr) minmax(92px,.55fr) minmax(105px,.6fr) 104px !important;
  gap: 10px !important;
  align-items: center !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease !important;
}
body.home .srl-program-row:hover{
  transform: translateY(-3px) !important;
  background: rgba(255,255,255,.96) !important;
  border-color: rgba(37,99,235,.18) !important;
  box-shadow: 0 24px 60px rgba(15,23,42,.09) !important;
}
body.home .srl-program-row.srl-hidden-program{
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body.home .srl-brand{
  display: flex !important;
  gap: 16px !important;
  align-items: center !important;
  min-width: 0 !important;
}
body.home .srl-brand > div:last-child{
  min-width: 0 !important;
  flex: 1 1 auto !important;
}
body.home .srl-logo,
body.home .srl-logo-img{
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  flex: 0 0 52px !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: #35f0b5 !important;
  border: 1px solid var(--srl-border) !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.06) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 950 !important;
  overflow: hidden !important;
}
body.home .srl-logo img,
body.home .srl-logo-img img{
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  padding: 7px !important;
  box-sizing: border-box !important;
}
body.home .srl-badges{
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  margin-bottom: 6px !important;
}
body.home .srl-badges em{
  font-style: normal !important;
  background: var(--srl-blue-soft) !important;
  color: var(--srl-blue) !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 950 !important;
}
body.home .srl-brand h3{
  margin: 0 0 5px !important;
  color: var(--srl-dark) !important;
  font-size: 17px !important;
  line-height: 1.25 !important;
  font-weight: 950 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}
body.home .srl-brand p{
  margin: 0 !important;
  color: var(--srl-muted) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* Program meta boxes */
body.home .srl-program-row .srl-meta{
  height: 78px !important;
  min-width: 0 !important;
  padding: 12px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(180deg,#fff,#f8fbff) !important;
  border: 1px solid var(--srl-border) !important;
  border-radius: 16px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9) !important;
  text-align: center !important;
}
body.home .srl-program-row .srl-meta strong{
  display: block !important;
  margin: 0 0 8px !important;
  color: var(--srl-dark) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}
body.home .srl-program-row .srl-meta span{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 28px !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  background: #f1f6ff !important;
  border: 1px solid rgba(37,99,235,.08) !important;
  color: var(--srl-muted) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  white-space: normal !important;
}
body.home .srl-program-row:hover .srl-meta{
  background: #fff !important;
  border-color: rgba(37,99,235,.22) !important;
  box-shadow: 0 12px 26px rgba(15,23,42,.06) !important;
}

/* Action buttons */
body.home .srl-action-buttons{
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  align-items: stretch !important;
  justify-self: end !important;
  width: 104px !important;
}
body.home .srl-action-buttons .srl-visit-btn,
body.home .srl-action-buttons .srl-review-btn,
body.home .srl-program-row .srl-view-btn{
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 34px !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  transition: all .22s ease !important;
}
body.home .srl-action-buttons .srl-visit-btn,
body.home .srl-program-row .srl-view-btn{
  background: linear-gradient(135deg,var(--srl-orange),var(--srl-orange-2)) !important;
  box-shadow: 0 14px 30px rgba(255,112,32,.26) !important;
}
body.home .srl-action-buttons .srl-review-btn{
  background: var(--srl-dark) !important;
  box-shadow: none !important;
}
body.home .srl-action-buttons .srl-visit-btn:hover,
body.home .srl-program-row .srl-view-btn:hover{
  background: linear-gradient(135deg,#ff7a00,#f04b18) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 42px rgba(255,112,32,.36) !important;
}
body.home .srl-action-buttons .srl-review-btn:hover{
  background: linear-gradient(135deg,var(--srl-blue),var(--srl-blue-2)) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 32px rgba(37,99,235,.28) !important;
}

/* Pagination */
body.home .srl-home-pagination{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin: 40px auto 18px !important;
}
body.home .srl-page-btn{
  min-width: 48px !important;
  height: 48px !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  background: #1f2230 !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  font-weight: 950 !important;
  cursor: pointer !important;
  transition: .18s ease !important;
}
body.home .srl-page-btn:hover:not(:disabled),
body.home .srl-page-btn.active{
  background: #ff6a1a !important;
  color: #fff !important;
  border-color: #ff6a1a !important;
  transform: translateY(-1px) !important;
}
body.home .srl-page-btn:disabled{
  opacity: .45 !important;
  cursor: not-allowed !important;
}

/* No results */
body.home .srl-no-results{
  display: none;
  margin: 26px 0 10px;
  padding: 42px 24px;
  text-align: center;
  border-radius: 24px;
  background: rgba(255,255,255,.86);
  border: 1px solid var(--srl-border);
  box-shadow: 0 18px 48px rgba(15,23,42,.06);
}
body.home .srl-no-results h3{
  margin: 0 0 8px;
  font-size: 26px;
  color: var(--srl-dark);
}
body.home .srl-no-results p{
  margin: 0 0 18px;
  color: var(--srl-muted);
}
body.home .srl-no-results button{
  height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 14px;
  background: var(--srl-dark);
  color: #fff;
  font-weight: 950;
  cursor: pointer;
}

/* =========================================================
   FEATURED REVIEWS + LOGO MARQUEE
   ========================================================= */
body.home .srl-featured-reviews{
  padding: 56px 0 34px !important;
  background:
    radial-gradient(circle at 15% 20%, rgba(37,99,235,.10), transparent 32%),
    radial-gradient(circle at 85% 10%, rgba(20,184,166,.10), transparent 30%),
    rgba(248,251,255,.72) !important;
}
body.home .srl-featured-head{
  text-align: center !important;
  margin-bottom: 28px !important;
}
body.home .srl-featured-head span{
  display: inline-flex !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  background: var(--srl-blue-soft) !important;
  color: var(--srl-blue) !important;
  font-weight: 950 !important;
  font-size: 13px !important;
}
body.home .srl-featured-head h2{
  margin: 14px 0 8px !important;
  font-size: clamp(30px,4vw,44px) !important;
  color: var(--srl-dark) !important;
  letter-spacing: -.04em !important;
  font-weight: 950 !important;
}
body.home .srl-featured-head p{
  margin: 0 auto !important;
  max-width: 680px !important;
  color: var(--srl-muted) !important;
  line-height: 1.7 !important;
}
body.home .srl-featured-grid{
  display: grid !important;
  grid-template-columns: repeat(4,1fr) !important;
  gap: 16px !important;
  transition: opacity 1.2s ease, transform 1.2s ease !important;
}
body.home .srl-featured-grid.is-changing{
  opacity: 0 !important;
  transform: translateY(25px) !important;
}
body.home .srl-featured-card{
  display: flex !important;
  gap: 14px !important;
  align-items: flex-start !important;
  padding: 18px !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.88) !important;
  border: 1px solid var(--srl-border) !important;
  box-shadow: 0 16px 42px rgba(15,23,42,.06) !important;
  text-decoration: none !important;
  transition: .18s ease !important;
  animation: srlCardFadeIn 1.2s ease both !important;
}
body.home .srl-featured-card:hover{
  transform: translateY(-8px) !important;
  border-color: var(--srl-blue) !important;
  box-shadow: 0 25px 60px rgba(37,99,235,.18) !important;
}
body.home .srl-featured-card img{
  width: 52px !important;
  height: 52px !important;
  object-fit: contain !important;
  background: #fff !important;
  border-radius: 14px !important;
  padding: 8px !important;
  border: 1px solid var(--srl-border) !important;
}
body.home .srl-featured-card h3{
  margin: 0 0 6px !important;
  color: var(--srl-dark) !important;
  font-size: 18px !important;
}
body.home .srl-featured-card p{
  margin: 0 0 10px !important;
  color: var(--srl-muted) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
body.home .srl-featured-card strong{
  color: var(--srl-blue) !important;
  font-weight: 950 !important;
}
body.home .srl-featured-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 8px !important;
  margin-top: 10px !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  background: var(--srl-dark) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}
@keyframes srlCardFadeIn{
  from{ opacity: 0; transform: translateY(30px); }
  to{ opacity: 1; transform: translateY(0); }
}

body.home .srl-logo-marquee{
  margin: 28px auto 0 !important;
  max-width: 980px !important;
  overflow: hidden !important;
  position: relative !important;
  padding: 12px 0 !important;
}
body.home .srl-logo-marquee::before,
body.home .srl-logo-marquee::after{
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  width: 90px !important;
  height: 100% !important;
  z-index: 2 !important;
  pointer-events: none !important;
}
body.home .srl-logo-marquee::before{
  left: 0 !important;
  background: linear-gradient(90deg,rgba(248,251,255,1),rgba(248,251,255,0)) !important;
}
body.home .srl-logo-marquee::after{
  right: 0 !important;
  background: linear-gradient(270deg,rgba(248,251,255,1),rgba(248,251,255,0)) !important;
}
body.home .srl-logo-track{
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  width: max-content !important;
  animation: srlLogoRun 120s linear infinite !important;
}
body.home .srl-logo-track img{
  width: 48px !important;
  height: 48px !important;
  object-fit: contain !important;
  background: rgba(255,255,255,.9) !important;
  border: 1px solid var(--srl-border) !important;
  border-radius: 14px !important;
  padding: 8px !important;
  box-shadow: 0 10px 26px rgba(15,23,42,.06) !important;
}
body.home .srl-logo-marquee:hover .srl-logo-track{ animation-play-state: paused !important; }
@keyframes srlLogoRun{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* =========================================================
   CUSTOM FOOTER
   ========================================================= */
.site-footer,
.site-footer-wrap,
.ast-footer-wrap,
.ast-small-footer,
.ast-footer-overlay,
.site-footer .site-footer-section,
.site-footer .ast-footer-copyright,
.site-footer .ast-footer-copyright-area{
  display: none !important;
}

.srl-footer,
body.home .srl-footer{
  width: 100% !important;
  margin: 20px 0 0 !important;
  padding: 64px 0 28px !important;
  background: var(--srl-dark) !important;
  color: #fff !important;
  display: block !important;
  position: relative !important;
  z-index: 5 !important;
}
.srl-footer .srl-wrap,
body.home .srl-footer .srl-wrap{
  width: min(var(--srl-wrap), calc(100% - 40px)) !important;
  max-width: var(--srl-wrap) !important;
  margin: 0 auto !important;
}
.srl-footer-grid,
body.home .srl-footer-grid{
  display: grid !important;
  grid-template-columns: 1.4fr 1fr 1fr 1fr !important;
  gap: 34px !important;
}
.srl-footer h3,
.srl-footer h4{
  color: #fff !important;
}
.srl-footer h3{
  margin: 0 0 14px !important;
  font-size: 26px !important;
}
.srl-footer h4{
  margin: 0 0 14px !important;
  font-size: 15px !important;
}
.srl-footer p{
  color: rgba(255,255,255,.68) !important;
  line-height: 1.7 !important;
  max-width: 420px !important;
}
.srl-footer a{
  display: block !important;
  color: rgba(255,255,255,.68) !important;
  text-decoration: none !important;
  margin: 9px 0 !important;
  font-weight: 600 !important;
}
.srl-footer a:hover{ color: #fff !important; }
.srl-footer-bottom,
body.home .srl-footer-bottom{
  width: min(var(--srl-wrap), calc(100% - 40px)) !important;
  margin: 38px auto 0 !important;
  padding-top: 22px !important;
  border-top: 1px solid rgba(255,255,255,.12) !important;
  text-align: center !important;
  color: rgba(255,255,255,.55) !important;
  font-size: 14px !important;
}

/* =========================================================
   REVIEW DETAIL PAGES
   ========================================================= */
body.page:not(.home):not(.page-template-page-categories){
  background:
    radial-gradient(circle at 15% 8%, rgba(37,99,235,.13), transparent 30%),
    radial-gradient(circle at 85% 10%, rgba(255,107,26,.11), transparent 28%),
    linear-gradient(180deg,#f8fbff 0%,#eef3fb 100%) !important;
}
body.page:not(.home):not(.page-template-page-categories) .entry-title{ display: none !important; }
body.page:not(.home):not(.page-template-page-categories) .site-content,
body.page:not(.home):not(.page-template-page-categories) .site-content .ast-container,
body.page:not(.home):not(.page-template-page-categories) #primary,
body.page:not(.home):not(.page-template-page-categories) .content-area,
body.page:not(.home):not(.page-template-page-categories) .site-main{
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.srl-review-premium{
  background:
    radial-gradient(circle at 15% 8%, rgba(37,99,235,.10), transparent 32%),
    radial-gradient(circle at 90% 18%, rgba(255,107,26,.10), transparent 28%);
}
.srl-review-detail{
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 30px 20px 60px !important;
}
.srl-review-hero{
  display: flex !important;
  justify-content: space-between !important;
  gap: 30px !important;
  padding: 38px !important;
  border-radius: 28px !important;
  background: #fff !important;
  box-shadow: 0 18px 45px rgba(15,23,42,.08) !important;
  margin-bottom: 32px !important;
}
.srl-review-hero.premium{
  background: linear-gradient(135deg,rgba(255,255,255,.96),rgba(248,250,252,.92)) !important;
  border: 1px solid var(--srl-border) !important;
  box-shadow: 0 24px 70px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.8) !important;
}
.srl-review-hero-left{ flex: 1 1 auto !important; }
.srl-review-tags{
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin-bottom: 16px !important;
}
.srl-review-tags span{
  background: var(--srl-blue-soft) !important;
  color: var(--srl-blue) !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
  font-size: 13px !important;
}
.srl-review-hero h1{
  font-size: clamp(32px,4vw,42px) !important;
  margin: 0 0 14px !important;
  color: #111827 !important;
  line-height: 1.12 !important;
  letter-spacing: -.04em !important;
  font-weight: 950 !important;
}
.srl-review-hero p{
  max-width: 680px !important;
  color: var(--srl-muted) !important;
  line-height: 1.7 !important;
}
.srl-score-row{
  display: grid !important;
  grid-template-columns: repeat(3,1fr) !important;
  gap: 14px !important;
  margin-top: 24px !important;
}
.srl-score-row div{
  background: #f8fafc !important;
  border: 1px solid #e7eaf0 !important;
  border-radius: 18px !important;
  padding: 16px !important;
}
.srl-score-row strong{
  display: block !important;
  color: var(--srl-dark) !important;
  font-size: 20px !important;
}
.srl-score-row span{
  color: var(--srl-muted) !important;
  font-size: 13px !important;
}
.srl-review-hero-card{
  width: 300px !important;
  flex: 0 0 300px !important;
  background: var(--srl-dark) !important;
  color: #fff !important;
  border-radius: 24px !important;
  padding: 26px !important;
  text-align: center !important;
  box-shadow: 0 24px 60px rgba(15,23,42,.18) !important;
}
.srl-review-hero-card img{
  width: 76px !important;
  height: 76px !important;
  object-fit: contain !important;
  background: #fff !important;
  border-radius: 20px !important;
  padding: 12px !important;
  margin-bottom: 14px !important;
}
.srl-review-hero-card h3{
  margin: 0 0 8px !important;
  color: #fff !important;
}
.srl-review-hero-card p{
  color: rgba(255,255,255,.72) !important;
  font-size: 14px !important;
}
.srl-review-hero-card a,
.srl-review-cta,
.srl-review-hero > a{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg,var(--srl-orange),var(--srl-orange-2)) !important;
  color: #fff !important;
  padding: 13px 18px !important;
  border-radius: 14px !important;
  font-weight: 950 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: all .22s ease !important;
  box-shadow: 0 14px 30px rgba(255,112,32,.26) !important;
}
.srl-review-hero-card a{ display: flex !important; margin-top: 18px !important; }
.srl-review-hero-card a:hover,
.srl-review-cta:hover,
.srl-review-hero > a:hover{
  background: linear-gradient(135deg,#ff7a00,#f04b18) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 42px rgba(255,112,32,.36) !important;
}

.srl-review-grid{
  display: grid !important;
  grid-template-columns: minmax(0,1fr) 300px !important;
  gap: 28px !important;
}
.srl-review-main{ min-width: 0 !important; }
.srl-review-sidebar{
  position: sticky !important;
  top: 90px !important;
  height: fit-content !important;
}
.srl-review-box,
.srl-review-side-box{
  background: #fff !important;
  border: 1px solid rgba(15,23,42,.07) !important;
  border-radius: 24px !important;
  padding: 28px !important;
  margin-bottom: 22px !important;
  box-shadow: 0 18px 45px rgba(15,23,42,.055), inset 0 1px 0 rgba(255,255,255,.8) !important;
}
.srl-review-side-box.premium{ border: 1px solid rgba(37,99,235,.12) !important; }
.srl-review-box h2{
  margin-top: 0 !important;
  color: #111827 !important;
  font-weight: 950 !important;
}
.srl-review-box p,
.srl-review-box li,
.srl-review-side-box p{
  color: var(--srl-muted) !important;
  line-height: 1.7 !important;
}
.srl-feature-grid{
  display: grid !important;
  grid-template-columns: repeat(2,1fr) !important;
  gap: 12px !important;
}
.srl-feature-grid div,
.srl-pricing-note,
.srl-bestfor span{
  background: #f8fafc !important;
  border: 1px solid #e7eaf0 !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  color: #334155 !important;
  font-weight: 800 !important;
}
.srl-pricing-note{
  margin-top: 16px !important;
  color: var(--srl-blue) !important;
  background: var(--srl-blue-soft) !important;
}
.srl-pros-cons{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 18px !important;
}
.srl-pros-cons h3{ margin-top: 0 !important; }
.srl-bestfor{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
.srl-alternative-grid{
  display: grid !important;
  grid-template-columns: repeat(2,1fr) !important;
  gap: 14px !important;
  margin-top: 18px !important;
}
.srl-alternative-grid div{
  padding: 16px !important;
  border-radius: 16px !important;
  background: #f8fafc !important;
  border: 1px solid #e7eaf0 !important;
}
.srl-alternative-grid strong{
  display: block !important;
  color: var(--srl-dark) !important;
  font-size: 16px !important;
  margin-bottom: 6px !important;
}
.srl-alternative-grid span{
  color: var(--srl-muted) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
.srl-faq-list{
  display: grid !important;
  gap: 14px !important;
}
.srl-faq-item{
  padding: 18px 20px !important;
  border-radius: 18px !important;
  background: #f8fafc !important;
  border: 1px solid #e7eaf0 !important;
}
.srl-faq-item h3{
  margin: 0 0 8px !important;
  color: var(--srl-dark) !important;
  font-size: 17px !important;
}
.srl-faq-item p{
  margin: 0 !important;
  color: var(--srl-muted) !important;
  line-height: 1.7 !important;
}

/* Related reviews carousel */
.srl-review-main .srl-related-reviews{
  padding: 34px 38px 42px !important;
  border-radius: 26px !important;
  background: rgba(255,255,255,.94) !important;
  overflow: hidden !important;
}
.srl-review-main .srl-related-reviews h2{
  font-size: 30px !important;
  margin: 0 0 12px !important;
}
.srl-review-main .srl-related-reviews > p{
  font-size: 16px !important;
  margin: 0 0 32px !important;
  color: var(--srl-muted) !important;
}
.srl-review-main .srl-related-grid{
  position: relative !important;
  width: 100% !important;
  display: block !important;
}
.srl-review-main .srl-related-track{
  display: grid !important;
  grid-template-columns: repeat(3,1fr) !important;
  gap: 14px !important;
  padding: 0 44px !important;
}
.srl-review-main .srl-related-card{
  min-height: 150px !important;
  padding: 18px 14px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.78) !important;
  border: 1px solid rgba(15,23,42,.12) !important;
  display: block !important;
  text-align: center !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
.srl-review-main .srl-related-card img{
  width: 42px !important;
  height: 42px !important;
  object-fit: contain !important;
  border-radius: 12px !important;
  background: #fff !important;
  border: 1px solid var(--srl-border) !important;
  padding: 7px !important;
  margin: 0 auto 10px !important;
}
.srl-review-main .srl-related-card strong{
  display: block !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  color: var(--srl-dark) !important;
  margin: 0 0 6px !important;
}
.srl-review-main .srl-related-card em{
  display: block !important;
  font-style: normal !important;
  color: #f59e0b !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  line-height: 1.2 !important;
  margin: 0 0 8px !important;
}
.srl-review-main .srl-related-card span{
  display: block !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: var(--srl-muted) !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}
.srl-review-main .srl-related-arrow{
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 34px !important;
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--srl-dark) !important;
  font-size: 42px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  z-index: 20 !important;
}
.srl-review-main .srl-related-prev{ left: -6px !important; }
.srl-review-main .srl-related-next{ right: -6px !important; }

/* =========================================================
   BASIC NORMAL PAGES: About / Contact / Disclaimer / Programs v2
   ========================================================= */
body.page:not(.home):not(.page-template-page-categories) .entry-content > section,
.srl-about-page,
.srl-contact-page,
.srl-disclaimer-page,
.srl-programs-page-v2{
  max-width: 1120px !important;
  margin: 35px auto 90px !important;
  padding: 0 24px !important;
}
.srl-about-hero,
.srl-contact-hero,
.srl-disclaimer-hero,
.srl-programs-hero-v2{
  background: rgba(255,255,255,.9) !important;
  border-radius: var(--srl-radius-lg) !important;
  padding: 54px !important;
  box-shadow: 0 34px 90px rgba(15,23,42,.08) !important;
}
.srl-about-grid,
.srl-contact-grid,
.srl-disclaimer-grid,
.srl-program-grid-v2{
  display: grid !important;
  grid-template-columns: repeat(3,1fr) !important;
  gap: 22px !important;
  margin-top: 26px !important;
}
.srl-about-card,
.srl-contact-card,
.srl-disclaimer-card,
.srl-program-card-v2{
  background: rgba(255,255,255,.9) !important;
  border: 1px solid var(--srl-border) !important;
  border-radius: 24px !important;
  padding: 26px !important;
  box-shadow: 0 18px 45px rgba(15,23,42,.06) !important;
  text-decoration: none !important;
}
.srl-program-card-v2{
  display: flex !important;
  gap: 16px !important;
  align-items: flex-start !important;
}
.srl-program-card-v2 img{
  width: 56px !important;
  height: 56px !important;
  object-fit: contain !important;
  border-radius: 14px !important;
  background: #fff !important;
  padding: 8px !important;
}

/* =========================================================
   OLD SECTION SUPPORT — kept clean so older homepage blocks do not break
   ========================================================= */
.srl-grid{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 16px;
}
.srl-card{
  padding: 18px;
  border-radius: 16px;
  border: 1px solid #e7eaf3;
  background: #fff;
}
.srl-ico{
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(120,120,255,.08);
  font-weight: 900;
  margin-bottom: 10px;
}
.srl-ico img{
  width: 34px;
  height: 34px;
  object-fit: contain;
  display: block;
}
.srl-card h3{ margin: 0 0 8px; font-size: 18px; font-weight: 900; }
.srl-desc{ margin: 0 0 12px; opacity: .75; }
.srl-link{ text-decoration: none; font-weight: 800; }

.srl-usecase{
  background: #f6f7fb;
  padding: 72px 0;
}
.srl-split{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 28px;
  align-items: center;
}
.srl-h2-left{
  margin: 0 0 10px;
  font-size: 34px;
  line-height: 1.15;
  font-weight: 950;
  color: var(--srl-dark);
}
.srl-p-left{
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.75;
  color: rgba(11,18,32,.72);
}
.srl-bullets{
  margin: 0 0 22px;
  padding-left: 18px;
  color: rgba(11,18,32,.72);
}
.srl-bullets li{ margin: 8px 0; }
.srl-choice-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.srl-choice{
  display: block;
  text-decoration: none;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #e7eaf3;
  padding: 14px;
  box-shadow: var(--srl-shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position: relative;
  overflow: hidden;
}
.srl-choice:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(16,24,40,.10);
  border-color: rgba(99,102,241,.35);
}
.srl-choice-top{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}
.srl-badge,
.srl-pill-mini{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}
.srl-badge{ background: rgba(99,102,241,.10); color: #4c4fff; }
.srl-pill-mini{ background: rgba(0,0,0,.05); color: rgba(11,18,32,.70); }
.srl-choice-title{
  font-size: 15px;
  font-weight: 950;
  color: var(--srl-dark);
  margin-bottom: 6px;
}
.srl-choice-sub{
  font-size: 14px;
  font-weight: 800;
  color: rgba(11,18,32,.72);
  margin-bottom: 10px;
}
.srl-choice-cta{
  font-size: 13px;
  font-weight: 950;
  color: #4c4fff;
}
.srl-note{
  margin-top: 12px;
  font-size: 13px;
  color: rgba(11,18,32,.60);
}

.srl-showcase{
  padding: 100px 0 110px;
  background: radial-gradient(1200px 500px at 50% 0%, rgba(140,120,255,.12), transparent 60%), #fff;
}
.srl-showcase-head{
  text-align: center;
  margin-bottom: 64px;
}
.srl-showcase-title{
  font-size: clamp(36px,5vw,56px);
  font-weight: 950;
  letter-spacing: -1px;
  margin: 0 0 14px;
  color: var(--srl-dark);
}
.srl-showcase-sub{
  font-size: 18px;
  color: rgba(11,18,32,.65);
}
.srl-showcase-grid{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 24px;
}
.srl-showcase-card{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: #0b1020;
  aspect-ratio: 20 / 12;
  box-shadow: 0 20px 50px rgba(15,23,42,.14), 0 6px 14px rgba(15,23,42,.10);
  transition: transform .28s ease, box-shadow .28s ease;
}
.srl-showcase-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 30px 70px rgba(15,23,42,.18), 0 6px 14px rgba(15,23,42,.12);
}
.srl-showcase-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  image-rendering: -webkit-optimize-contrast;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1200px){
  body.home .srl-program-list{
    overflow-x: auto !important;
  }
  body.home .srl-program-row,
  body.home .srl-table-head{
    min-width: 980px !important;
  }
}

@media (max-width: 1050px){
  body.home .srl-pill-header{
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    padding: 90px 18px 0 !important;
  }
  body.home .srl-pill-inner{
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 24px !important;
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 14px !important;
    padding: 16px !important;
  }
  body.home .srl-pill-nav{
    flex-wrap: wrap !important;
    gap: 14px 18px !important;
    justify-content: flex-start !important;
  }
  body.home .srl-pill-copy{ display: none !important; }
  body.home .srl-directory-hero{ padding-top: 30px !important; }
}

@media (max-width: 980px){
  body.home .srl-hero-top,
  body.home .srl-layout{
    grid-template-columns: 1fr !important;
  }
  body.home .srl-sidebar{
    position: static !important;
  }
  body.home .srl-stats-grid,
  body.home .srl-featured-grid{
    grid-template-columns: 1fr 1fr !important;
  }
  body.home .srl-table-head{ display: none !important; }
  .srl-review-hero,
  .srl-review-grid{
    display: block !important;
  }
  .srl-review-hero-card{
    width: auto !important;
    flex-basis: auto !important;
    margin-top: 24px !important;
  }
  .srl-review-sidebar{
    position: static !important;
  }
  .srl-score-row,
  .srl-feature-grid,
  .srl-pros-cons{
    grid-template-columns: 1fr !important;
  }
  .srl-about-grid,
  .srl-contact-grid,
  .srl-disclaimer-grid,
  .srl-program-grid-v2{
    grid-template-columns: 1fr !important;
  }
  .srl-grid,
  .srl-showcase-grid{
    grid-template-columns: repeat(2,1fr);
  }
  .srl-split,
  .srl-choice-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px){
  .srl-alternative-grid,
  .srl-review-main .srl-related-track{
    grid-template-columns: 1fr !important;
  }
  .srl-review-main .srl-related-track{
    padding: 0 !important;
  }
  .srl-review-main .srl-related-arrow{ display: none !important; }
}

@media (max-width: 620px){
  .srl-wrap,
  .srl-container,
  .srl-container-wide{
    width: min(100% - 28px, var(--srl-wrap));
  }
  body.home .srl-directory-hero{
    padding: 110px 0 38px !important;
  }
  body.home .srl-search-bar{
    flex-direction: column !important;
  }
  body.home .srl-search-bar button{
    width: 100% !important;
  }
  body.home .srl-stats-grid,
  body.home .srl-featured-grid,
  .srl-footer-grid,
  body.home .srl-footer-grid,
  .srl-grid,
  .srl-showcase-grid{
    grid-template-columns: 1fr !important;
  }
  body.home .srl-list-head{
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  body.home .srl-list-tools{
    width: 100% !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
  }
  body.home .srl-custom-sort{
    width: 100% !important;
    max-width: none !important;
  }
  body.home #srlProgramCounter{
    width: 100% !important;
    justify-content: center !important;
  }
  .srl-review-detail{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .srl-review-hero,
  .srl-review-box,
  .srl-review-side-box,
  .srl-review-main .srl-related-reviews{
    padding: 22px !important;
    border-radius: 22px !important;
  }
  .srl-about-hero,
  .srl-contact-hero,
  .srl-disclaimer-hero,
  .srl-programs-hero-v2{
    padding: 28px !important;
    border-radius: 26px !important;
  }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* =========================================================
   PATCH V2 — Premium Home Hero / Top Directory Section
   Fix phần đầu trang bị thô: gom hero vào khung premium,
   cân lại card bên phải, stats và category chips.
   ========================================================= */

body.home .srl-directory-hero{
  padding: 118px 0 58px !important;
  background:
    radial-gradient(circle at 10% 16%, rgba(37,99,235,.12), transparent 30%),
    radial-gradient(circle at 88% 12%, rgba(45,212,191,.13), transparent 32%),
    radial-gradient(circle at 54% 100%, rgba(168,85,247,.10), transparent 34%),
    linear-gradient(180deg,#f8fbff 0%,#eef6ff 100%) !important;
  border-bottom: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

body.home .srl-directory-hero::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  pointer-events: none !important;
  background-image:
    linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px) !important;
  background-size: 46px 46px !important;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 74%) !important;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 74%) !important;
  opacity: .72 !important;
}

body.home .srl-directory-hero::after{
  content: "" !important;
  position: absolute !important;
  width: 760px !important;
  height: 760px !important;
  right: -260px !important;
  top: -300px !important;
  border-radius: 999px !important;
  pointer-events: none !important;
  background: radial-gradient(circle, rgba(45,212,191,.24), rgba(37,99,235,.12) 38%, transparent 68%) !important;
  filter: blur(2px) !important;
}

body.home .srl-directory-hero > .srl-wrap{
  width: min(1180px, calc(100% - 56px)) !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 54px !important;
  border-radius: 38px !important;
  position: relative !important;
  z-index: 3 !important;

  display: grid !important;
  grid-template-columns: minmax(0,1fr) 340px !important;
  grid-template-areas:
    "hero hero"
    "stats chips" !important;
  gap: 30px 34px !important;

  background:
    radial-gradient(circle at 15% 10%, rgba(37,99,235,.14), transparent 34%),
    radial-gradient(circle at 88% 18%, rgba(20,184,166,.13), transparent 34%),
    radial-gradient(circle at 58% 100%, rgba(168,85,247,.10), transparent 36%),
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(248,251,255,.86)) !important;
  border: 1px solid rgba(15,23,42,.075) !important;
  box-shadow:
    0 38px 95px rgba(15,23,42,.09),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
  overflow: hidden !important;
}

body.home .srl-directory-hero > .srl-wrap::before{
  content: "" !important;
  position: absolute !important;
  width: 440px !important;
  height: 440px !important;
  right: -170px !important;
  bottom: -210px !important;
  border-radius: 999px !important;
  background: radial-gradient(circle, rgba(37,99,235,.18), transparent 66%) !important;
  pointer-events: none !important;
}

body.home .srl-hero-top{
  grid-area: hero !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) 340px !important;
  gap: 52px !important;
  align-items: center !important;
  position: relative !important;
  z-index: 2 !important;
}

body.home .srl-top-label{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 36px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  background: rgba(37,99,235,.10) !important;
  color: #2563eb !important;
  border: 1px solid rgba(37,99,235,.13) !important;
  box-shadow: 0 10px 24px rgba(37,99,235,.08) !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  margin: 0 0 20px !important;
}

body.home .srl-directory-hero h1{
  max-width: 760px !important;
  margin: 0 0 18px !important;
  color: #0b1220 !important;
  font-size: clamp(44px, 5vw, 68px) !important;
  line-height: .98 !important;
  letter-spacing: -.065em !important;
  font-weight: 950 !important;
}

body.home .srl-directory-hero p{
  max-width: 760px !important;
  margin: 0 0 14px !important;
  color: #526173 !important;
  font-size: 17px !important;
  line-height: 1.75 !important;
}

body.home .srl-directory-hero a{
  color: #2563eb !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}

body.home .srl-directory-hero a:hover{
  color: #1d4ed8 !important;
}

body.home .srl-hero-card{
  position: relative !important;
  min-height: 248px !important;
  padding: 30px !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(45,212,191,.20), transparent 44%),
    radial-gradient(circle at 0% 100%, rgba(37,99,235,.18), transparent 44%),
    linear-gradient(145deg,#101827 0%,#1d293d 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  box-shadow: 0 28px 72px rgba(15,23,42,.22) !important;
}

body.home .srl-hero-card::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, rgba(255,255,255,.10), transparent 42%) !important;
  pointer-events: none !important;
}

body.home .srl-hero-card strong{
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  color: #ffffff !important;
  font-size: 20px !important;
  line-height: 1.25 !important;
  font-weight: 950 !important;
  margin: 8px 0 14px !important;
}

body.home .srl-hero-card span{
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  color: rgba(255,255,255,.70) !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
}

body.home .srl-stats-grid{
  grid-area: stats !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: 14px !important;
  margin: 0 !important;
  max-width: none !important;
  position: relative !important;
  z-index: 2 !important;
}

body.home .srl-stats-grid div{
  min-height: 106px !important;
  padding: 20px 18px !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(15,23,42,.075) !important;
  box-shadow:
    0 18px 45px rgba(15,23,42,.055),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

body.home .srl-stats-grid strong{
  display: block !important;
  margin: 0 0 8px !important;
  color: #0f172a !important;
  font-size: 26px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: -.03em !important;
}

body.home .srl-stats-grid span{
  display: block !important;
  color: #64748b !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  font-weight: 650 !important;
}

body.home .srl-chip-row{
  grid-area: chips !important;
  align-self: stretch !important;
  display: flex !important;
  align-content: flex-start !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin: 0 !important;
  padding: 18px !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.78) !important;
  border: 1px solid rgba(15,23,42,.075) !important;
  box-shadow:
    0 18px 45px rgba(15,23,42,.05),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  position: relative !important;
  z-index: 2 !important;
}

body.home .srl-chip-row::before{
  content: "Browse by category" !important;
  flex: 0 0 100% !important;
  display: block !important;
  margin: 0 0 4px !important;
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  letter-spacing: .02em !important;
}

body.home .srl-chip-row span{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: rgba(37,99,235,.08) !important;
  color: #1e40af !important;
  border: 1px solid rgba(37,99,235,.12) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

body.home .srl-chip-row span:hover{
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
}

@media (max-width: 1050px){
  body.home .srl-directory-hero{
    padding-top: 104px !important;
  }

  body.home .srl-directory-hero > .srl-wrap{
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "hero"
      "stats"
      "chips" !important;
    padding: 38px !important;
    border-radius: 32px !important;
  }

  body.home .srl-hero-top{
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  body.home .srl-hero-card{
    min-height: auto !important;
  }

  body.home .srl-stats-grid{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}

@media (max-width: 620px){
  body.home .srl-directory-hero{
    padding: 94px 0 34px !important;
  }

  body.home .srl-directory-hero > .srl-wrap{
    width: min(100% - 28px, 1180px) !important;
    padding: 28px !important;
    border-radius: 28px !important;
  }

  body.home .srl-directory-hero h1{
    font-size: 38px !important;
    line-height: 1.04 !important;
  }

  body.home .srl-directory-hero p{
    font-size: 15.5px !important;
  }

  body.home .srl-stats-grid{
    grid-template-columns: 1fr 1fr !important;
  }

  body.home .srl-chip-row{
    padding: 16px !important;
  }
}

/* =========================================================
   V3 SAFE REPAIR — Home Hero without requiring HTML changes
   - Stops .srl-hero-top grid from splitting text into tiny columns
   - Uses absolute right insight card + normal text flow
   - Keeps premium hero layout professional
   ========================================================= */

body.home .srl-directory-hero{
  padding: 124px 0 64px !important;
  background:
    radial-gradient(circle at 12% 16%, rgba(37,99,235,.14), transparent 32%),
    radial-gradient(circle at 88% 12%, rgba(20,184,166,.14), transparent 34%),
    radial-gradient(circle at 58% 100%, rgba(168,85,247,.10), transparent 36%),
    linear-gradient(180deg,#f8fbff 0%,#eef6ff 100%) !important;
  border-bottom: 0 !important;
  overflow: hidden !important;
}

body.home .srl-directory-hero > .srl-wrap{
  display: block !important;
  width: min(1180px, calc(100% - 56px)) !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 54px !important;
  border-radius: 38px !important;
  position: relative !important;
  z-index: 3 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  background:
    radial-gradient(circle at 15% 10%, rgba(37,99,235,.13), transparent 34%),
    radial-gradient(circle at 88% 18%, rgba(20,184,166,.12), transparent 34%),
    radial-gradient(circle at 58% 100%, rgba(168,85,247,.10), transparent 36%),
    linear-gradient(135deg, rgba(255,255,255,.95), rgba(248,251,255,.88)) !important;
  border: 1px solid rgba(15,23,42,.075) !important;
  box-shadow:
    0 38px 95px rgba(15,23,42,.09),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}

body.home .srl-directory-hero > .srl-wrap::before{
  content: "" !important;
  position: absolute !important;
  width: 460px !important;
  height: 460px !important;
  right: -170px !important;
  bottom: -220px !important;
  border-radius: 999px !important;
  background: radial-gradient(circle, rgba(37,99,235,.16), transparent 66%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Reset hero-top to normal flow, not grid */
body.home .srl-hero-top{
  display: block !important;
  position: relative !important;
  z-index: 2 !important;
  min-height: 275px !important;
  padding-right: 392px !important;
  box-sizing: border-box !important;
  color: #243044 !important;
  font-size: 15.5px !important;
  line-height: 1.65 !important;
}

body.home .srl-top-label{
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  max-width: max-content !important;
  min-height: 36px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  background: rgba(37,99,235,.10) !important;
  color: #2563eb !important;
  border: 1px solid rgba(37,99,235,.13) !important;
  box-shadow: 0 10px 24px rgba(37,99,235,.08) !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  margin: 0 0 20px !important;
}

body.home .srl-directory-hero h1{
  display: block !important;
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 0 18px !important;
  color: #0b1220 !important;
  font-size: clamp(44px, 5vw, 66px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.055em !important;
  font-weight: 950 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

body.home .srl-directory-hero p{
  display: block !important;
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 0 12px !important;
  color: #526173 !important;
  font-size: 17px !important;
  line-height: 1.75 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* Make CTA line clean even if there is raw text after it */
body.home .srl-hero-top > a,
body.home .srl-directory-hero a{
  color: #2563eb !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}

body.home .srl-hero-top > a{
  display: block !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: 4px 0 10px !important;
}

/* Right insight card: position independent of HTML order */
body.home .srl-hero-card{
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 340px !important;
  min-height: 250px !important;
  padding: 30px !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(45,212,191,.20), transparent 44%),
    radial-gradient(circle at 0% 100%, rgba(37,99,235,.18), transparent 44%),
    linear-gradient(145deg,#101827 0%,#1d293d 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  box-shadow: 0 28px 72px rgba(15,23,42,.22) !important;
}

body.home .srl-hero-card::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, rgba(255,255,255,.10), transparent 42%) !important;
  pointer-events: none !important;
}

body.home .srl-hero-card strong{
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  color: #ffffff !important;
  font-size: 20px !important;
  line-height: 1.25 !important;
  font-weight: 950 !important;
  margin: 8px 0 14px !important;
}

body.home .srl-hero-card span{
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  color: rgba(255,255,255,.72) !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
}

body.home .srl-stats-grid{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: 14px !important;
  margin: 34px 0 0 !important;
  max-width: none !important;
  position: relative !important;
  z-index: 2 !important;
}

body.home .srl-stats-grid div{
  min-height: 106px !important;
  padding: 20px 18px !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.90) !important;
  border: 1px solid rgba(15,23,42,.075) !important;
  box-shadow:
    0 18px 45px rgba(15,23,42,.055),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
  box-sizing: border-box !important;
}

body.home .srl-stats-grid strong{
  display: block !important;
  color: #0f172a !important;
  font-size: 26px !important;
  font-weight: 950 !important;
  margin: 0 0 8px !important;
  line-height: 1.1 !important;
}

body.home .srl-stats-grid span{
  display: block !important;
  color: #64748b !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

body.home .srl-chip-row{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin: 26px 0 0 !important;
  padding: 18px !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.78) !important;
  border: 1px solid rgba(15,23,42,.075) !important;
  box-shadow:
    0 18px 45px rgba(15,23,42,.05),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
  position: relative !important;
  z-index: 2 !important;
}

body.home .srl-chip-row::before{
  content: "Browse by category" !important;
  display: inline-flex !important;
  align-items: center !important;
  margin-right: 6px !important;
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

body.home .srl-chip-row span{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  padding: 0 13px !important;
  border-radius: 999px !important;
  background: rgba(37,99,235,.08) !important;
  color: #1e40af !important;
  border: 1px solid rgba(37,99,235,.12) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

body.home .srl-chip-row span:hover{
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
}

@media (max-width: 1050px){
  body.home .srl-directory-hero{
    padding: 104px 0 48px !important;
  }

  body.home .srl-directory-hero > .srl-wrap{
    padding: 38px !important;
    border-radius: 32px !important;
  }

  body.home .srl-hero-top{
    min-height: auto !important;
    padding-right: 0 !important;
  }

  body.home .srl-hero-card{
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    margin-top: 26px !important;
    min-height: auto !important;
  }

  body.home .srl-stats-grid{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}

@media (max-width: 620px){
  body.home .srl-directory-hero{
    padding: 94px 0 34px !important;
  }

  body.home .srl-directory-hero > .srl-wrap{
    width: min(100% - 28px, 1180px) !important;
    padding: 28px !important;
    border-radius: 28px !important;
  }

  body.home .srl-directory-hero h1{
    font-size: 38px !important;
    line-height: 1.04 !important;
  }

  body.home .srl-directory-hero p,
  body.home .srl-hero-top{
    font-size: 15.5px !important;
  }

  body.home .srl-stats-grid{
    grid-template-columns: 1fr 1fr !important;
  }

  body.home .srl-chip-row::before{
    flex: 0 0 100% !important;
    margin-bottom: 2px !important;
  }
}

/* =========================================================
   V4 — Executive Home Hero Polish
   Goal: more professional directory/review landing header
   - No HTML change required
   - Removes oversized glass-block feeling
   - Turns categories into clean filters, not chunky buttons
   - Keeps current .srl-hero-top structure safe
   ========================================================= */

body.home .srl-directory-page{
  background:
    radial-gradient(circle at 8% 10%, rgba(37,99,235,.12), transparent 30%),
    radial-gradient(circle at 92% 4%, rgba(20,184,166,.13), transparent 32%),
    linear-gradient(180deg,#f8fbff 0%,#eef5fb 52%,#f8fafc 100%) !important;
}

body.home .srl-directory-page::before{
  opacity: .36 !important;
  background-size: 34px 34px !important;
}

body.home .srl-directory-hero{
  padding: 118px 0 66px !important;
  background:
    radial-gradient(800px 420px at 18% 18%, rgba(37,99,235,.14), transparent 58%),
    radial-gradient(760px 460px at 88% 18%, rgba(45,212,191,.14), transparent 60%),
    linear-gradient(180deg,#f8fbff 0%,#edf6ff 100%) !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* Remove the previous giant frosted container look */
body.home .srl-directory-hero > .srl-wrap{
  display: block !important;
  width: min(1180px, calc(100% - 56px)) !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 3 !important;
}

body.home .srl-directory-hero > .srl-wrap::before{
  content: none !important;
  display: none !important;
}

/* Main hero card: clean SaaS/editorial panel */
body.home .srl-hero-top{
  display: block !important;
  position: relative !important;
  z-index: 2 !important;
  min-height: 430px !important;
  padding: 62px 450px 58px 58px !important;
  border-radius: 36px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;

  background:
    radial-gradient(720px 360px at 8% 12%, rgba(37,99,235,.13), transparent 60%),
    radial-gradient(620px 360px at 88% 16%, rgba(20,184,166,.12), transparent 62%),
    linear-gradient(135deg, rgba(255,255,255,.97), rgba(246,249,255,.92)) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow:
    0 28px 80px rgba(15,23,42,.10),
    inset 0 1px 0 rgba(255,255,255,.96) !important;

  color: #334155 !important;
  font-size: 15.5px !important;
  line-height: 1.65 !important;
}

body.home .srl-hero-top::before{
  content: "" !important;
  position: absolute !important;
  right: -160px !important;
  top: -180px !important;
  width: 540px !important;
  height: 540px !important;
  border-radius: 999px !important;
  background: radial-gradient(circle, rgba(37,99,235,.16), transparent 68%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

body.home .srl-hero-top::after{
  content: "" !important;
  position: absolute !important;
  right: 360px !important;
  bottom: -170px !important;
  width: 440px !important;
  height: 440px !important;
  border-radius: 999px !important;
  background: radial-gradient(circle, rgba(168,85,247,.12), transparent 66%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

body.home .srl-hero-top > *{
  position: relative !important;
  z-index: 2 !important;
}

/* Tiny label */
body.home .srl-top-label{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  max-width: max-content !important;
  min-height: 34px !important;
  padding: 0 13px !important;
  border-radius: 999px !important;
  background: rgba(37,99,235,.08) !important;
  color: #1d4ed8 !important;
  border: 1px solid rgba(37,99,235,.14) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: .01em !important;
  margin: 0 0 22px !important;
}

body.home .srl-top-label::before{
  content: "" !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 999px !important;
  background: #22c55e !important;
  box-shadow: 0 0 0 5px rgba(34,197,94,.12) !important;
}

body.home .srl-directory-hero h1{
  display: block !important;
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 0 18px !important;
  color: #0b1220 !important;
  font-size: clamp(48px, 5vw, 74px) !important;
  line-height: .96 !important;
  letter-spacing: -.07em !important;
  font-weight: 950 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

body.home .srl-directory-hero p{
  display: block !important;
  width: 100% !important;
  max-width: 720px !important;
  margin: 0 0 18px !important;
  color: #526173 !important;
  font-size: 17px !important;
  line-height: 1.75 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

body.home .srl-hero-top > a,
body.home .srl-directory-hero a{
  color: #ffffff !important;
  background: linear-gradient(135deg, #0f172a, #1e293b) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  border-radius: 999px !important;
  min-height: 44px !important;
  padding: 0 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: 8px 12px 0 0 !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: 0 14px 34px rgba(15,23,42,.18) !important;
}

body.home .srl-directory-hero a:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 44px rgba(15,23,42,.24) !important;
}

/* Insight card: professional dashboard snapshot */
body.home .srl-hero-card{
  position: absolute !important;
  top: 52px !important;
  right: 52px !important;
  width: 350px !important;
  min-height: 315px !important;
  padding: 28px !important;
  border-radius: 30px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  background:
    radial-gradient(circle at 94% 0%, rgba(34,211,238,.20), transparent 42%),
    radial-gradient(circle at 0% 100%, rgba(37,99,235,.16), transparent 44%),
    linear-gradient(150deg,#0b1220 0%,#172033 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 30px 76px rgba(15,23,42,.28) !important;
}

body.home .srl-hero-card::before{
  content: "" !important;
  position: absolute !important;
  left: 28px !important;
  right: 28px !important;
  bottom: 28px !important;
  height: 86px !important;
  border-radius: 20px !important;
  background:
    linear-gradient(90deg, rgba(37,99,235,.22), rgba(20,184,166,.18)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 1px, transparent 1px 34px) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  opacity: .88 !important;
  pointer-events: none !important;
}

body.home .srl-hero-card::after{
  content: "" !important;
  position: absolute !important;
  left: 54px !important;
  right: 54px !important;
  bottom: 55px !important;
  height: 36px !important;
  background: linear-gradient(135deg, transparent 0 18%, rgba(255,255,255,.72) 18% 22%, transparent 22% 38%, rgba(255,255,255,.60) 38% 42%, transparent 42% 58%, rgba(255,255,255,.74) 58% 62%, transparent 62% 78%, rgba(255,255,255,.62) 78% 82%, transparent 82%) !important;
  opacity: .32 !important;
  pointer-events: none !important;
}

body.home .srl-hero-card strong{
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  color: #ffffff !important;
  font-size: 20px !important;
  line-height: 1.25 !important;
  font-weight: 950 !important;
  margin: 8px 0 16px !important;
}

body.home .srl-hero-card span{
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  color: rgba(226,232,240,.70) !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
}

/* Stats: more premium, less chunky */
body.home .srl-stats-grid{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: 14px !important;
  margin: -36px 42px 0 !important;
  max-width: none !important;
  position: relative !important;
  z-index: 5 !important;
}

body.home .srl-stats-grid div{
  min-height: 112px !important;
  padding: 20px 20px 18px !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.94) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow:
    0 20px 50px rgba(15,23,42,.075),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
  box-sizing: border-box !important;
  position: relative !important;
  overflow: hidden !important;
}

body.home .srl-stats-grid div::before{
  content: "" !important;
  position: absolute !important;
  left: 20px !important;
  top: 14px !important;
  width: 34px !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #2563eb, #22c55e) !important;
}

body.home .srl-stats-grid strong{
  display: block !important;
  color: #0f172a !important;
  font-size: 28px !important;
  font-weight: 950 !important;
  margin: 24px 0 8px !important;
  line-height: 1.05 !important;
}

body.home .srl-stats-grid span{
  display: block !important;
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  line-height: 1.4 !important;
}

/* Categories: clean filter rail instead of large blue buttons */
body.home .srl-chip-row{
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  flex-wrap: wrap !important;
  margin: 22px 42px 0 !important;
  padding: 16px 18px !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(15,23,42,.075) !important;
  box-shadow:
    0 18px 44px rgba(15,23,42,.055),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
  position: relative !important;
  z-index: 4 !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

body.home .srl-chip-row::before{
  content: "Browse:" !important;
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 4px 0 0 !important;
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

body.home .srl-chip-row span{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  padding: 0 13px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #334155 !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: 0 8px 20px rgba(15,23,42,.04) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  transition: all .18s ease !important;
}

body.home .srl-chip-row span:hover{
  transform: translateY(-1px) !important;
  background: #0f172a !important;
  color: #ffffff !important;
  border-color: #0f172a !important;
}

@media (max-width: 1050px){
  body.home .srl-directory-hero{
    padding: 104px 0 48px !important;
  }

  body.home .srl-hero-top{
    min-height: auto !important;
    padding: 42px !important;
  }

  body.home .srl-hero-card{
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    min-height: 260px !important;
    margin-top: 28px !important;
  }

  body.home .srl-stats-grid{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    margin: 18px 0 0 !important;
  }

  body.home .srl-chip-row{
    margin: 18px 0 0 !important;
  }
}

@media (max-width: 620px){
  body.home .srl-directory-hero{
    padding: 92px 0 36px !important;
  }

  body.home .srl-directory-hero > .srl-wrap{
    width: min(100% - 28px, 1180px) !important;
  }

  body.home .srl-hero-top{
    padding: 28px !important;
    border-radius: 28px !important;
  }

  body.home .srl-directory-hero h1{
    font-size: 40px !important;
    line-height: 1.02 !important;
    letter-spacing: -.045em !important;
  }

  body.home .srl-directory-hero p,
  body.home .srl-hero-top{
    font-size: 15.5px !important;
  }

  body.home .srl-stats-grid{
    grid-template-columns: 1fr 1fr !important;
  }

  body.home .srl-chip-row::before{
    flex: 0 0 100% !important;
    margin-bottom: 2px !important;
  }
}

/* =========================================================
   V5 BALANCED HERO — Final compact professional tuning
   - Keeps layout safe without editing front-page.php
   - Reduces oversized hero/card/stat blocks
   - Converts category buttons into lighter chips
   ========================================================= */

body.home .srl-directory-page{
  background:
    radial-gradient(circle at 9% 8%, rgba(37,99,235,.10), transparent 30%),
    radial-gradient(circle at 92% 6%, rgba(20,184,166,.11), transparent 32%),
    linear-gradient(180deg,#f7fbff 0%,#eef5fb 54%,#f8fafc 100%) !important;
}

body.home .srl-directory-hero{
  padding: 96px 0 44px !important;
  background:
    radial-gradient(720px 380px at 18% 18%, rgba(37,99,235,.11), transparent 58%),
    radial-gradient(700px 420px at 88% 16%, rgba(20,184,166,.11), transparent 60%),
    linear-gradient(180deg,#f8fbff 0%,#eef6ff 100%) !important;
  border: 0 !important;
  overflow: hidden !important;
}

body.home .srl-directory-hero > .srl-wrap{
  display: block !important;
  width: min(1080px, calc(100% - 56px)) !important;
  max-width: 1080px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 3 !important;
}

body.home .srl-directory-hero > .srl-wrap::before{
  content: none !important;
  display: none !important;
}

/* Main hero panel: smaller, cleaner, balanced */
body.home .srl-hero-top{
  display: block !important;
  position: relative !important;
  z-index: 2 !important;
  min-height: 330px !important;
  padding: 44px 360px 42px 44px !important;
  border-radius: 28px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;

  background:
    radial-gradient(640px 320px at 8% 10%, rgba(37,99,235,.10), transparent 62%),
    radial-gradient(560px 320px at 90% 15%, rgba(20,184,166,.10), transparent 62%),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(247,250,255,.94)) !important;
  border: 1px solid rgba(15,23,42,.075) !important;
  box-shadow:
    0 22px 62px rgba(15,23,42,.085),
    inset 0 1px 0 rgba(255,255,255,.96) !important;

  color: #334155 !important;
  font-size: 15px !important;
  line-height: 1.62 !important;
}

body.home .srl-hero-top::before{
  content: "" !important;
  position: absolute !important;
  right: -160px !important;
  top: -210px !important;
  width: 480px !important;
  height: 480px !important;
  border-radius: 999px !important;
  background: radial-gradient(circle, rgba(37,99,235,.12), transparent 68%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

body.home .srl-hero-top::after{
  content: "" !important;
  position: absolute !important;
  right: 300px !important;
  bottom: -190px !important;
  width: 360px !important;
  height: 360px !important;
  border-radius: 999px !important;
  background: radial-gradient(circle, rgba(168,85,247,.09), transparent 68%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

body.home .srl-hero-top > *{
  position: relative !important;
  z-index: 2 !important;
}

body.home .srl-top-label{
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  width: auto !important;
  max-width: max-content !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: rgba(37,99,235,.08) !important;
  color: #1d4ed8 !important;
  border: 1px solid rgba(37,99,235,.14) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  margin: 0 0 18px !important;
}

body.home .srl-top-label::before{
  content: "" !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: #22c55e !important;
  box-shadow: 0 0 0 4px rgba(34,197,94,.12) !important;
}

body.home .srl-directory-hero h1{
  display: block !important;
  width: 100% !important;
  max-width: 620px !important;
  margin: 0 0 14px !important;
  color: #0b1220 !important;
  font-size: clamp(38px, 4.2vw, 56px) !important;
  line-height: 1.04 !important;
  letter-spacing: -.055em !important;
  font-weight: 950 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

body.home .srl-directory-hero p{
  display: block !important;
  width: 100% !important;
  max-width: 610px !important;
  margin: 0 0 12px !important;
  color: #526173 !important;
  font-size: 15.5px !important;
  line-height: 1.65 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* CTA: smaller pill, not oversized */
body.home .srl-hero-top > a,
body.home .srl-directory-hero .srl-hero-top > a{
  color: #ffffff !important;
  background: linear-gradient(135deg, #0f172a, #1e293b) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  border-radius: 999px !important;
  min-height: 36px !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: 6px 10px 0 0 !important;
  font-size: 12.5px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.16) !important;
}

body.home .srl-directory-hero a:hover{
  transform: translateY(-1px) !important;
}

/* Right insight card: smaller and calmer */
body.home .srl-hero-card{
  position: absolute !important;
  top: 44px !important;
  right: 44px !important;
  width: 292px !important;
  min-height: 218px !important;
  padding: 24px !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  background:
    radial-gradient(circle at 94% 0%, rgba(34,211,238,.16), transparent 42%),
    radial-gradient(circle at 0% 100%, rgba(37,99,235,.13), transparent 44%),
    linear-gradient(150deg,#0b1220 0%,#172033 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 22px 56px rgba(15,23,42,.24) !important;
}

body.home .srl-hero-card::before{
  content: "" !important;
  position: absolute !important;
  left: 24px !important;
  right: 24px !important;
  bottom: 22px !important;
  height: 54px !important;
  border-radius: 16px !important;
  background:
    linear-gradient(90deg, rgba(37,99,235,.18), rgba(20,184,166,.14)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 1px, transparent 1px 28px) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  opacity: .65 !important;
  pointer-events: none !important;
}

body.home .srl-hero-card::after{
  content: none !important;
  display: none !important;
}

body.home .srl-hero-card strong{
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  color: #ffffff !important;
  font-size: 17px !important;
  line-height: 1.28 !important;
  font-weight: 950 !important;
  margin: 7px 0 12px !important;
}

body.home .srl-hero-card span{
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  color: rgba(226,232,240,.70) !important;
  font-size: 13.5px !important;
  line-height: 1.58 !important;
}

/* Stats: lower height, balanced width */
body.home .srl-stats-grid{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: 12px !important;
  margin: 18px 34px 0 !important;
  max-width: 620px !important;
  position: relative !important;
  z-index: 5 !important;
}

body.home .srl-stats-grid div{
  min-height: 86px !important;
  padding: 15px 16px 14px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.94) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow:
    0 14px 36px rgba(15,23,42,.055),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
  box-sizing: border-box !important;
  position: relative !important;
  overflow: hidden !important;
}

body.home .srl-stats-grid div::before{
  content: "" !important;
  position: absolute !important;
  left: 16px !important;
  top: 12px !important;
  width: 28px !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #2563eb, #22c55e) !important;
}

body.home .srl-stats-grid strong{
  display: block !important;
  color: #0f172a !important;
  font-size: 22px !important;
  font-weight: 950 !important;
  margin: 19px 0 6px !important;
  line-height: 1.05 !important;
}

body.home .srl-stats-grid span{
  display: block !important;
  color: #64748b !important;
  font-size: 11.5px !important;
  font-weight: 750 !important;
  line-height: 1.35 !important;
}

/* Categories: light chips instead of heavy blue buttons */
body.home .srl-chip-row{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin: 16px 34px 0 !important;
  padding: 13px 14px !important;
  max-width: 620px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.74) !important;
  border: 1px solid rgba(15,23,42,.075) !important;
  box-shadow:
    0 14px 34px rgba(15,23,42,.045),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
  position: relative !important;
  z-index: 4 !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

body.home .srl-chip-row::before{
  content: "Browse:" !important;
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 4px 0 0 !important;
  color: #0f172a !important;
  font-size: 12.5px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

body.home .srl-directory-hero .srl-chip-row span,
body.home .srl-directory-hero .srl-chip-row a,
body.home .srl-directory-hero .srl-chip-row button,
body.home .srl-chip-row span,
body.home .srl-chip-row a,
body.home .srl-chip-row button{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 29px !important;
  padding: 0 11px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #2563eb !important;
  border: 1px solid rgba(37,99,235,.17) !important;
  box-shadow: 0 6px 16px rgba(15,23,42,.035) !important;
  font-size: 11.5px !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: all .18s ease !important;
}

body.home .srl-directory-hero .srl-chip-row span:hover,
body.home .srl-directory-hero .srl-chip-row a:hover,
body.home .srl-directory-hero .srl-chip-row button:hover,
body.home .srl-chip-row span:hover,
body.home .srl-chip-row a:hover,
body.home .srl-chip-row button:hover{
  transform: translateY(-1px) !important;
  background: #eef4ff !important;
  color: #1d4ed8 !important;
  border-color: rgba(37,99,235,.28) !important;
}

@media (max-width: 1050px){
  body.home .srl-directory-hero{
    padding: 92px 0 40px !important;
  }

  body.home .srl-hero-top{
    min-height: auto !important;
    padding: 36px !important;
  }

  body.home .srl-hero-card{
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    min-height: 220px !important;
    margin-top: 24px !important;
  }

  body.home .srl-stats-grid{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    margin: 16px 0 0 !important;
    max-width: none !important;
  }

  body.home .srl-chip-row{
    margin: 16px 0 0 !important;
    max-width: none !important;
  }
}

@media (max-width: 620px){
  body.home .srl-directory-hero{
    padding: 86px 0 34px !important;
  }

  body.home .srl-directory-hero > .srl-wrap{
    width: min(100% - 28px, 1080px) !important;
  }

  body.home .srl-hero-top{
    padding: 26px !important;
    border-radius: 24px !important;
  }

  body.home .srl-directory-hero h1{
    font-size: 36px !important;
    line-height: 1.04 !important;
    letter-spacing: -.04em !important;
  }

  body.home .srl-directory-hero p,
  body.home .srl-hero-top{
    font-size: 15px !important;
  }

  body.home .srl-stats-grid{
    grid-template-columns: 1fr 1fr !important;
  }

  body.home .srl-chip-row::before{
    flex: 0 0 100% !important;
    margin-bottom: 2px !important;
  }
}

/* ===== FIX đường cắt ngang giữa hero và section dưới ===== */

/* Cho toàn bộ nền home hòa chung một lớp */
body.home .srl-directory-page{
  background:
    linear-gradient(180deg, #eef3fb 0%, #edf3fb 38%, #eef4fb 70%, #edf4f8 100%) !important;
}

/* Bỏ nền riêng từng section để không bị chia mảng */
body.home .srl-directory-hero,
body.home .srl-directory-body,
body.home .srl-featured-reviews,
body.home .srl-showcase,
body.home .srl-section,
body.home .srl-section-soft{
  background: transparent !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* Kéo sát section dưới lên để mất đường cắt */
body.home .srl-directory-body{
  margin-top: -1px !important;
  padding-top: 0 !important;
}

/* Nếu có pseudo-element tạo vệt ngang thì tắt luôn */
body.home .srl-directory-hero::before,
body.home .srl-directory-hero::after,
body.home .srl-directory-body::before,
body.home .srl-directory-body::after{
  border: 0 !important;
  box-shadow: none !important;
}

/* Nếu khối Featured Reviews đang tạo nền riêng thì làm mềm lại */
body.home .srl-featured-reviews{
  margin-top: 0 !important;
  padding-top: 42px !important;
}

/* =========================================================
   PATCH — Làm mờ khung hero, hòa với nền ngoài
   Dán CUỐI CÙNG trong style.css
   ========================================================= */

body.home .srl-directory-hero > .srl-wrap{
  background: rgba(255,255,255,.46) !important;
  backdrop-filter: blur(22px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(120%) !important;

  border: 1px solid rgba(255,255,255,.20) !important;

  box-shadow:
    0 14px 42px rgba(15,23,42,.035),
    inset 0 1px 0 rgba(255,255,255,.30) !important;
}

/* Làm mềm mép khung để không còn cảm giác vuông cứng */
body.home .srl-directory-hero > .srl-wrap::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;

  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.18), transparent 34%),
    radial-gradient(circle at 82% 16%, rgba(255,255,255,.12), transparent 32%),
    radial-gradient(circle at 50% 100%, rgba(168,85,247,.055), transparent 36%) !important;

  opacity: 1 !important;
}

/* Giữ nội dung nằm trên lớp làm mềm */
body.home .srl-directory-hero > .srl-wrap > *{
  position: relative !important;
  z-index: 2 !important;
}

/* Nền ngoài hòa hơn với khung bên trong */
body.home .srl-directory-page{
  background:
    radial-gradient(circle at 8% 16%, rgba(59,130,246,.09), transparent 28%),
    radial-gradient(circle at 92% 12%, rgba(45,212,191,.075), transparent 28%),
    radial-gradient(circle at 50% 100%, rgba(168,85,247,.06), transparent 30%),
    linear-gradient(180deg, #edf3fb 0%, #eef4fb 48%, #edf4f8 100%) !important;
}

/* Xóa cảm giác đường cắt giữa section */
body.home .srl-directory-hero,
body.home .srl-directory-body{
  background: transparent !important;
  border: 0 !important;
}

/* =========================================================
   FIX: Xóa khung vuông hero, cho hero hòa với nền ngoài
   ========================================================= */

/* Tắt hoàn toàn khung trắng/vuông lớn */
body.home .srl-directory-hero > .srl-wrap{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

/* Tắt lớp phủ giả đang tạo cảm giác hình vuông */
body.home .srl-directory-hero > .srl-wrap::before,
body.home .srl-directory-hero > .srl-wrap::after{
  content: none !important;
  display: none !important;
  opacity: 0 !important;
}

/* Cho nền trên và nền ngoài dùng chung tone, không bị tách mảng */
body.home .srl-directory-page,
body.home .srl-directory-hero{
  background:
    radial-gradient(circle at 10% 12%, rgba(59,130,246,.11), transparent 30%),
    radial-gradient(circle at 88% 8%, rgba(45,212,191,.09), transparent 30%),
    radial-gradient(circle at 52% 92%, rgba(168,85,247,.075), transparent 34%),
    linear-gradient(180deg, #edf4fb 0%, #eef4fb 48%, #edf4f8 100%) !important;
}

/* Xóa mọi đường chia section */
body.home .srl-directory-hero,
body.home .srl-directory-body{
  border: 0 !important;
  box-shadow: none !important;
}

/* Giữ khoảng cách hero vẫn cân đối sau khi bỏ khung */
body.home .srl-directory-hero{
  padding: 92px 0 56px !important;
}

body.home .srl-directory-hero > .srl-wrap{
  width: min(1080px, calc(100% - 56px)) !important;
  max-width: 1080px !important;
  margin: 0 auto !important;
  padding: 34px 48px 42px !important;
}

/* =========================================================
   PRO HERO PATCH — làm phần đầu nhiều hơn & chuyên nghiệp hơn
   DÁN Ở CUỐI style.css
   ========================================================= */

/* Nền tổng thể */
body.home .srl-directory-page,
body.home .srl-directory-hero{
  background:
    radial-gradient(circle at 8% 12%, rgba(59,130,246,.11), transparent 28%),
    radial-gradient(circle at 88% 10%, rgba(45,212,191,.09), transparent 28%),
    radial-gradient(circle at 52% 100%, rgba(168,85,247,.08), transparent 32%),
    linear-gradient(180deg, #edf4fb 0%, #eef4fb 46%, #edf4f8 100%) !important;
}

/* Khung hero chính */
body.home .srl-directory-hero > .srl-wrap{
  width: min(1100px, calc(100% - 56px)) !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 44px 48px 42px !important;
  border-radius: 32px !important;
  position: relative !important;
  overflow: hidden !important;

  background:
    linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.42)) !important;
  backdrop-filter: blur(18px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(125%) !important;

  border: 1px solid rgba(255,255,255,.26) !important;
  box-shadow:
    0 20px 60px rgba(15,23,42,.055),
    inset 0 1px 0 rgba(255,255,255,.42) !important;
}

body.home .srl-directory-hero > .srl-wrap::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.20), transparent 34%),
    radial-gradient(circle at 82% 14%, rgba(255,255,255,.14), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(168,85,247,.06), transparent 34%) !important;
}

body.home .srl-directory-hero > .srl-wrap > *{
  position: relative !important;
  z-index: 2 !important;
}

/* Hero top */
body.home .srl-hero-top{
  display: grid !important;
  grid-template-columns: minmax(0,1fr) 320px !important;
  gap: 42px !important;
  align-items: start !important;
}

/* Nhãn nhỏ phía trên */
body.home .srl-top-label{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 14px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(37,99,235,.14) !important;
  color: #2563eb !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  margin: 0 0 18px !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.04) !important;
}

/* H1 */
body.home .srl-directory-hero h1{
  max-width: 660px !important;
  margin: 0 0 16px !important;
  color: #0b1220 !important;
  font-size: clamp(42px, 4.6vw, 64px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.05em !important;
  font-weight: 950 !important;
}

/* Mô tả */
body.home .srl-directory-hero p{
  max-width: 640px !important;
  margin: 0 0 18px !important;
  color: #5a6779 !important;
  font-size: 16px !important;
  line-height: 1.72 !important;
}

/* CTA */
body.home .srl-directory-hero a{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 46px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #16233d 0%, #0f1b31 100%) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  box-shadow: 0 14px 28px rgba(15,23,42,.14) !important;
}

body.home .srl-directory-hero a:hover{
  transform: translateY(-1px) !important;
  box-shadow: 0 18px 34px rgba(15,23,42,.18) !important;
}

/* Dòng phụ dưới CTA */
body.home .srl-directory-hero .srl-hero-note,
body.home .srl-directory-hero .hero-note,
body.home .srl-directory-hero p:last-of-type{
  color: #5f6c7d !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  margin-top: 12px !important;
}

/* Card phải */
body.home .srl-hero-card{
  width: 100% !important;
  min-height: 235px !important;
  padding: 26px 24px !important;
  border-radius: 26px !important;
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(45,212,191,.18), transparent 44%),
    radial-gradient(circle at 0% 100%, rgba(37,99,235,.14), transparent 44%),
    linear-gradient(145deg, #081326 0%, #0f1f39 58%, #12344a 100%) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 24px 50px rgba(15,23,42,.18) !important;
}

body.home .srl-hero-card::before{
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 120px !important;
  height: 44px !important;
  background:
    linear-gradient(135deg, transparent 0 22%, rgba(255,255,255,.18) 22% 30%, transparent 30% 44%, rgba(255,255,255,.13) 44% 52%, transparent 52%) !important;
  opacity: .65 !important;
}

body.home .srl-hero-card strong{
  display: block !important;
  color: #ffffff !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1.3 !important;
  margin: 8px 0 12px !important;
}

body.home .srl-hero-card span{
  display: block !important;
  color: rgba(255,255,255,.68) !important;
  font-size: 13.5px !important;
  line-height: 1.65 !important;
}

/* Stats */
body.home .srl-stats-grid{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: 14px !important;
  margin: 24px 0 0 !important;
  max-width: 600px !important;
}

body.home .srl-stats-grid div{
  min-height: 92px !important;
  padding: 16px 16px !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.74) !important;
  border: 1px solid rgba(15,23,42,.06) !important;
  box-shadow:
    0 10px 24px rgba(15,23,42,.045),
    inset 0 1px 0 rgba(255,255,255,.55) !important;
}

body.home .srl-stats-grid strong{
  display: block !important;
  color: #0f172a !important;
  font-size: 21px !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
  margin: 0 0 6px !important;
}

body.home .srl-stats-grid span{
  display: block !important;
  color: #64748b !important;
  font-size: 12.5px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
}

/* Browse category */
body.home .srl-chip-row{
  margin: 18px 0 0 !important;
  max-width: 600px !important;
  padding: 16px 16px !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.68) !important;
  border: 1px solid rgba(15,23,42,.06) !important;
  box-shadow:
    0 12px 28px rgba(15,23,42,.04),
    inset 0 1px 0 rgba(255,255,255,.52) !important;
}

body.home .srl-chip-row::before{
  content: "Browse by category" !important;
  display: block !important;
  margin: 0 0 10px !important;
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

body.home .srl-chip-row span{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  margin: 0 8px 8px 0 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.84) !important;
  color: #2563eb !important;
  border: 1px solid rgba(37,99,235,.14) !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.035) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

/* Responsive */
@media (max-width: 980px){
  body.home .srl-hero-top{
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  body.home .srl-stats-grid{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    max-width: 100% !important;
  }

  body.home .srl-chip-row{
    max-width: 100% !important;
  }
}

@media (max-width: 640px){
  body.home .srl-directory-hero > .srl-wrap{
    width: min(100% - 24px, 1100px) !important;
    padding: 28px 22px 28px !important;
    border-radius: 24px !important;
  }

  body.home .srl-directory-hero h1{
    font-size: 36px !important;
    line-height: 1.06 !important;
  }

  body.home .srl-stats-grid{
    grid-template-columns: 1fr 1fr !important;
  }
}

/* =========================================================
   EMERGENCY RESTORE — Fix hero bị kéo dài / chữ bị bóp
   Dán CUỐI CÙNG trong style.css
   ========================================================= */

/* Khung hero chính: vừa phải, không kéo quá dài */
body.home .srl-directory-hero{
  padding: 92px 0 54px !important;
  background:
    radial-gradient(circle at 8% 12%, rgba(59,130,246,.11), transparent 30%),
    radial-gradient(circle at 88% 10%, rgba(45,212,191,.09), transparent 30%),
    radial-gradient(circle at 50% 92%, rgba(168,85,247,.065), transparent 32%),
    linear-gradient(180deg, #edf4fb 0%, #eef4fb 52%, #edf4f8 100%) !important;
  border: 0 !important;
  overflow: hidden !important;
}

body.home .srl-directory-hero > .srl-wrap{
  width: min(1080px, calc(100% - 56px)) !important;
  max-width: 1080px !important;
  margin: 0 auto !important;
  padding: 42px 48px !important;
  border-radius: 30px !important;
  position: relative !important;
  overflow: hidden !important;

  background: rgba(255,255,255,.50) !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  box-shadow:
    0 18px 55px rgba(15,23,42,.05),
    inset 0 1px 0 rgba(255,255,255,.38) !important;

  backdrop-filter: blur(16px) saturate(116%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(116%) !important;
}

/* Tắt các lớp phụ cũ gây đè layout */
body.home .srl-directory-hero > .srl-wrap::before,
body.home .srl-directory-hero > .srl-wrap::after{
  content: none !important;
  display: none !important;
}

/* QUAN TRỌNG: không dùng grid nữa, dùng layout absolute an toàn */
body.home .srl-hero-top{
  display: block !important;
  position: relative !important;
  min-height: 250px !important;
  padding-right: 350px !important;
}

/* Label */
body.home .srl-top-label{
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  width: auto !important;
  max-width: max-content !important;
  min-height: 30px !important;
  padding: 0 13px !important;
  margin: 0 0 16px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.70) !important;
  border: 1px solid rgba(37,99,235,.16) !important;
  color: #2563eb !important;
  font-size: 12.5px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.035) !important;
}

/* Title */
body.home .srl-directory-hero h1{
  width: 100% !important;
  max-width: 650px !important;
  margin: 0 0 14px !important;
  color: #0b1220 !important;
  font-size: clamp(38px, 4.2vw, 56px) !important;
  line-height: 1.04 !important;
  letter-spacing: -.052em !important;
  font-weight: 950 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* Paragraph */
body.home .srl-directory-hero p{
  width: 100% !important;
  max-width: 620px !important;
  margin: 0 0 14px !important;
  color: #526173 !important;
  font-size: 15.5px !important;
  line-height: 1.65 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* Chỉ làm đẹp nút Explore Programs, không làm ảnh hưởng mọi link khác */
body.home .srl-directory-hero a{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  padding: 0 17px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #17233a 0%, #0f1b31 100%) !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  box-shadow: 0 12px 26px rgba(15,23,42,.13) !important;
}

/* Card phải cố định bên phải, không đè vào chữ */
body.home .srl-hero-card{
  position: absolute !important;
  top: 6px !important;
  right: 0 !important;
  width: 300px !important;
  min-height: 210px !important;
  padding: 24px !important;
  border-radius: 22px !important;
  overflow: hidden !important;

  background:
    radial-gradient(circle at 100% 0%, rgba(45,212,191,.18), transparent 44%),
    radial-gradient(circle at 0% 100%, rgba(37,99,235,.14), transparent 44%),
    linear-gradient(145deg, #081326 0%, #0f1f39 58%, #12344a 100%) !important;

  border: 1px solid rgba(255,255,255,.09) !important;
  box-shadow: 0 22px 48px rgba(15,23,42,.18) !important;
  z-index: 5 !important;
}

body.home .srl-hero-card::before,
body.home .srl-hero-card::after{
  pointer-events: none !important;
}

body.home .srl-hero-card strong{
  display: block !important;
  color: #ffffff !important;
  font-size: 17px !important;
  line-height: 1.3 !important;
  font-weight: 900 !important;
  margin: 8px 0 12px !important;
}

body.home .srl-hero-card span{
  display: block !important;
  color: rgba(255,255,255,.68) !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
}

/* Stats gọn lại */
body.home .srl-stats-grid{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: 14px !important;
  margin: 24px 0 0 !important;
  max-width: 620px !important;
}

body.home .srl-stats-grid div{
  min-height: 88px !important;
  padding: 16px 16px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.74) !important;
  border: 1px solid rgba(15,23,42,.065) !important;
  box-shadow:
    0 10px 24px rgba(15,23,42,.04),
    inset 0 1px 0 rgba(255,255,255,.52) !important;
}

body.home .srl-stats-grid strong{
  display: block !important;
  color: #0f172a !important;
  font-size: 21px !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
  margin: 0 0 6px !important;
}

body.home .srl-stats-grid span{
  display: block !important;
  color: #64748b !important;
  font-size: 12.5px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
}

/* Browse category gọn, không kéo dài */
body.home .srl-chip-row{
  margin: 18px 0 0 !important;
  max-width: 620px !important;
  padding: 16px !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.68) !important;
  border: 1px solid rgba(15,23,42,.06) !important;
  box-shadow:
    0 12px 28px rgba(15,23,42,.04),
    inset 0 1px 0 rgba(255,255,255,.52) !important;
}

body.home .srl-chip-row::before{
  content: "Browse:" !important;
  display: block !important;
  margin: 0 0 10px !important;
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

body.home .srl-chip-row span{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  margin: 0 8px 8px 0 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.86) !important;
  color: #2563eb !important;
  border: 1px solid rgba(37,99,235,.14) !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.035) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

/* Responsive */
@media (max-width: 980px){
  body.home .srl-hero-top{
    padding-right: 0 !important;
    min-height: auto !important;
  }

  body.home .srl-hero-card{
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 360px !important;
    margin-top: 24px !important;
  }

  body.home .srl-stats-grid{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    max-width: 100% !important;
  }

  body.home .srl-chip-row{
    max-width: 100% !important;
  }
}

/* =========================================================
   FIX — Xóa đường cắt ngang giữa các section Home
   Dán CUỐI CÙNG trong style.css
   ========================================================= */

body.home,
body.home #page,
body.home #content,
body.home .site-content,
body.home .srl-directory-page{
  background:
    radial-gradient(circle at 8% 12%, rgba(59,130,246,.10), transparent 30%),
    radial-gradient(circle at 88% 10%, rgba(45,212,191,.08), transparent 30%),
    radial-gradient(circle at 50% 92%, rgba(168,85,247,.06), transparent 34%),
    linear-gradient(180deg, #edf4fb 0%, #eef4fb 48%, #edf4f8 100%) !important;
}

/* Các section bên trong dùng nền trong suốt để hòa vào nền chung */
body.home .srl-directory-hero,
body.home .srl-directory-body,
body.home .srl-featured-reviews,
body.home .srl-showcase,
body.home .srl-section,
body.home .srl-section-soft{
  background: transparent !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* Xóa vệt do pseudo-element hoặc border giả tạo ra */
body.home .srl-directory-hero::before,
body.home .srl-directory-hero::after,
body.home .srl-directory-body::before,
body.home .srl-directory-body::after,
body.home .srl-featured-reviews::before,
body.home .srl-featured-reviews::after{
  border: 0 !important;
  box-shadow: none !important;
}

/* Kéo section dưới lên 1px để không còn khe hở render */
body.home .srl-directory-body,
body.home .srl-featured-reviews{
  margin-top: -1px !important;
}

/* =========================================================
   DOWN ARROW — nằm dưới khung hero, chính giữa như mẫu đỏ
   ========================================================= */

body.home .srl-directory-hero{
  position: relative !important;
  padding-bottom: 92px !important; /* tạo khoảng trống cho mũi tên */
}

body.home .srl-down-cue{
  position: absolute !important;
  left: 50% !important;
  bottom: 26px !important;
  transform: translateX(-50%) !important;

  width: 46px !important;
  height: 46px !important;
  border-radius: 999px !important;

  border: 1px solid rgba(37,99,235,.20) !important;
  background: rgba(255,255,255,.72) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  cursor: pointer !important;
  z-index: 99 !important;

  box-shadow:
    0 16px 36px rgba(15,23,42,.10),
    inset 0 1px 0 rgba(255,255,255,.70) !important;

  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;

  animation: srlArrowFloat 1.6s ease-in-out infinite !important;
}

/* mũi tên xanh */
body.home .srl-down-cue span{
  width: 13px !important;
  height: 13px !important;
  border-right: 3px solid #2563eb !important;
  border-bottom: 3px solid #2563eb !important;
  transform: rotate(45deg) translate(-1px, -2px) !important;
  display: block !important;
}

/* vòng sáng nhẹ phía sau */
body.home .srl-down-cue::before{
  content: "" !important;
  position: absolute !important;
  inset: -10px !important;
  border-radius: 999px !important;
  background: radial-gradient(circle, rgba(37,99,235,.18), transparent 68%) !important;
  z-index: -1 !important;
  animation: srlArrowPulse 1.6s ease-in-out infinite !important;
}

body.home .srl-down-cue:hover{
  background: #2563eb !important;
  box-shadow: 0 18px 42px rgba(37,99,235,.25) !important;
}

body.home .srl-down-cue:hover span{
  border-color: #ffffff !important;
}

@keyframes srlArrowFloat{
  0%,100%{
    transform: translateX(-50%) translateY(0);
  }
  50%{
    transform: translateX(-50%) translateY(8px);
  }
}

@keyframes srlArrowPulse{
  0%,100%{
    transform: scale(.9);
    opacity: .45;
  }
  50%{
    transform: scale(1.15);
    opacity: .9;
  }
}

/* =========================================================
   FIX DOWN ARROW — icon rõ ràng, đẹp hơn
   Dán CUỐI CÙNG style.css
   ========================================================= */

body.home .srl-directory-hero{
  position: relative !important;
  padding-bottom: 96px !important;
}

body.home .srl-down-cue{
  position: absolute !important;
  left: 50% !important;
  bottom: 30px !important;
  transform: translateX(-50%) !important;

  width: 52px !important;
  height: 52px !important;
  border-radius: 999px !important;

  border: 1px solid rgba(37,99,235,.18) !important;
  background: rgba(255,255,255,.82) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  cursor: pointer !important;
  z-index: 999 !important;

  box-shadow:
    0 18px 42px rgba(15,23,42,.13),
    inset 0 1px 0 rgba(255,255,255,.85) !important;

  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;

  animation: srlDownMove 1.7s ease-in-out infinite !important;
}

/* Ẩn mũi tên cũ bị xéo */
body.home .srl-down-cue span{
  display: none !important;
}

/* Mũi tên mới */
body.home .srl-down-cue::after{
  content: "↓" !important;
  display: block !important;

  color: #2563eb !important;
  font-size: 28px !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  transform: translateY(-1px) !important;
}

/* Vòng sáng nhẹ phía sau */
body.home .srl-down-cue::before{
  content: "" !important;
  position: absolute !important;
  inset: -11px !important;
  border-radius: 999px !important;
  background: radial-gradient(circle, rgba(37,99,235,.18), transparent 68%) !important;
  z-index: -1 !important;
  animation: srlDownPulse 1.7s ease-in-out infinite !important;
}

body.home .srl-down-cue:hover{
  background: #2563eb !important;
  box-shadow: 0 20px 46px rgba(37,99,235,.28) !important;
}

body.home .srl-down-cue:hover::after{
  color: #ffffff !important;
}

@keyframes srlDownMove{
  0%,100%{
    transform: translateX(-50%) translateY(0);
  }
  50%{
    transform: translateX(-50%) translateY(8px);
  }
}

@keyframes srlDownPulse{
  0%,100%{
    transform: scale(.88);
    opacity: .45;
  }
  50%{
    transform: scale(1.16);
    opacity: .9;
  }
}

/* =========================================================
   FIX ARROW POSITION — nằm ngoài nhưng sát dưới viền khung hero
   ========================================================= */

body.home .srl-directory-hero > .srl-wrap{
  position: relative !important;
  overflow: visible !important;
}

/* tạo thêm khoảng trống dưới khung để mũi tên không bị cắt */
body.home .srl-directory-hero{
  padding-bottom: 82px !important;
}

body.home .srl-down-cue{
  position: absolute !important;
  left: 50% !important;
  bottom: -26px !important; /* kéo ra ngoài khung */
  transform: translateX(-50%) !important;

  width: 52px !important;
  height: 52px !important;
  border-radius: 999px !important;

  border: 1px solid rgba(37,99,235,.18) !important;
  background: rgba(255,255,255,.86) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  cursor: pointer !important;
  z-index: 999 !important;

  box-shadow:
    0 18px 42px rgba(15,23,42,.16),
    inset 0 1px 0 rgba(255,255,255,.88) !important;

  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;

  animation: srlDownMove 1.7s ease-in-out infinite !important;
}

/* Ẩn mũi tên cũ */
body.home .srl-down-cue span{
  display: none !important;
}

/* Mũi tên xuống rõ ràng */
body.home .srl-down-cue::after{
  content: "↓" !important;
  color: #2563eb !important;
  font-size: 28px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  transform: translateY(-1px) !important;
}

/* Vòng sáng sau nút */
body.home .srl-down-cue::before{
  content: "" !important;
  position: absolute !important;
  inset: -10px !important;
  border-radius: 999px !important;
  background: radial-gradient(circle, rgba(37,99,235,.18), transparent 68%) !important;
  z-index: -1 !important;
  animation: srlDownPulse 1.7s ease-in-out infinite !important;
}

body.home .srl-down-cue:hover{
  background: #2563eb !important;
  box-shadow: 0 20px 46px rgba(37,99,235,.28) !important;
}

body.home .srl-down-cue:hover::after{
  color: #ffffff !important;
}

@keyframes srlDownMove{
  0%,100%{
    transform: translateX(-50%) translateY(0);
  }
  50%{
    transform: translateX(-50%) translateY(8px);
  }
}

@keyframes srlDownPulse{
  0%,100%{
    transform: scale(.88);
    opacity: .45;
  }
  50%{
    transform: scale(1.16);
    opacity: .9;
  }
}

/* =========================================================
   FINAL ARROW POSITION — nằm NGOÀI section hero, ngay dưới hero
   ========================================================= */

/* Trả hero về bình thường, không chứa mũi tên nữa */
body.home .srl-directory-hero{
  position: relative !important;
  padding-bottom: 54px !important;
}

/* Mũi tên nằm ngoài section, giữa hero và section kế tiếp */
body.home .srl-down-cue{
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;

  transform: none !important;

  width: 52px !important;
  height: 52px !important;
  margin: -28px auto 34px !important;

  border-radius: 999px !important;
  border: 1px solid rgba(37,99,235,.18) !important;
  background: rgba(255,255,255,.88) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  cursor: pointer !important;
  z-index: 999 !important;

  box-shadow:
    0 18px 42px rgba(15,23,42,.14),
    inset 0 1px 0 rgba(255,255,255,.9) !important;

  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;

  animation: srlDownOutsideMove 1.7s ease-in-out infinite !important;
}

/* Ẩn icon cũ */
body.home .srl-down-cue span{
  display: none !important;
}

/* Icon mũi tên mới */
body.home .srl-down-cue::after{
  content: "↓" !important;
  color: #2563eb !important;
  font-size: 28px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  transform: translateY(-1px) !important;
}

/* Vòng sáng */
body.home .srl-down-cue::before{
  content: "" !important;
  position: absolute !important;
  inset: -10px !important;
  border-radius: 999px !important;
  background: radial-gradient(circle, rgba(37,99,235,.18), transparent 68%) !important;
  z-index: -1 !important;
  animation: srlDownOutsidePulse 1.7s ease-in-out infinite !important;
}

body.home .srl-down-cue:hover{
  background: #2563eb !important;
  box-shadow: 0 20px 46px rgba(37,99,235,.28) !important;
}

body.home .srl-down-cue:hover::after{
  color: #ffffff !important;
}

@keyframes srlDownOutsideMove{
  0%,100%{
    transform: translateY(0);
  }
  50%{
    transform: translateY(8px);
  }
}

@keyframes srlDownOutsidePulse{
  0%,100%{
    transform: scale(.88);
    opacity: .45;
  }
  50%{
    transform: scale(1.16);
    opacity: .9;
  }
}

/* FIX: kéo mũi tên lên cao hơn một chút */
body.home .srl-down-cue{
  margin: -62px auto 30px !important;
  position: relative !important;
  z-index: 9999 !important;
}

/* =========================================================
   TUNE DOWN ARROW — nhỏ gọn hơn + chuyển động thu hút hơn
   Dán CUỐI CÙNG trong style.css
   ========================================================= */

body.home .srl-down-cue{
  width: 44px !important;
  height: 44px !important;

  margin: 0px auto 16px !important;

  border-radius: 999px !important;
  border: 1px solid rgba(37,99,235,.20) !important;
  background: rgba(255,255,255,.90) !important;

  box-shadow:
    0 12px 28px rgba(15,23,42,.12),
    0 0 0 5px rgba(37,99,235,.045),
    inset 0 1px 0 rgba(255,255,255,.92) !important;

  animation: srlArrowBounceStrong 1.15s cubic-bezier(.34,1.56,.64,1) infinite !important;
}

/* Mũi tên nhỏ lại nhưng rõ hơn */
body.home .srl-down-cue::after{
  content: "↓" !important;
  color: #2563eb !important;
  font-size: 25px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  transform: translateY(-1px) !important;
}

/* =========================================================
   FINAL TUNE — Arrow more attractive, no text, same position
   ========================================================= */

body.home .srl-down-cue{
  width: 46px !important;
  height: 46px !important;

  background:
    radial-gradient(circle at 50% 35%, #ffffff 0%, #eef5ff 100%) !important;

  border: 1px solid rgba(37,99,235,.28) !important;

  box-shadow:
    0 16px 34px rgba(37,99,235,.22),
    0 0 0 6px rgba(37,99,235,.055),
    inset 0 1px 0 rgba(255,255,255,.95) !important;

  animation: srlArrowAttract 1.15s cubic-bezier(.34,1.56,.64,1) infinite !important;
}

/* bỏ chữ nếu còn sót */
body.home .srl-down-cue::after{
  content: "↓" !important;
  position: static !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  color: #2563eb !important;
  font-size: 30px !important;
  font-weight: 950 !important;
  line-height: 1 !important;

  transform: translateY(-2px) !important;
}

/* vòng pulse nhỏ, không đè viền */
body.home .srl-down-cue::before{
  content: "" !important;
  position: absolute !important;
  inset: -7px !important;
  border-radius: 999px !important;

  background: transparent !important;
  border: 1px solid rgba(37,99,235,.22) !important;

  z-index: -1 !important;
  animation: srlArrowRing 1.15s ease-out infinite !important;
}

body.home .srl-down-cue span{
  display: none !important;
}

body.home .srl-down-cue:hover{
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow:
    0 20px 46px rgba(37,99,235,.32),
    0 0 0 7px rgba(37,99,235,.10) !important;
}

body.home .srl-down-cue:hover::after{
  color: #ffffff !important;
}

@keyframes srlArrowAttract{
  0%,100%{
    transform: translateY(0) scale(1);
  }
  42%{
    transform: translateY(9px) scale(1.08);
  }
  68%{
    transform: translateY(4px) scale(.98);
  }
}

@keyframes srlArrowRing{
  0%{
    transform: scale(.86);
    opacity: .75;
  }
  70%{
    transform: scale(1.38);
    opacity: 0;
  }
  100%{
    transform: scale(1.38);
    opacity: 0;
  }
}


/* Glow ngoài nhỏ lại, không đè vào viền khung */
body.home .srl-down-cue::before{
  inset: -5px !important;
  background: radial-gradient(circle, rgba(37,99,235,.16), transparent 66%) !important;
  animation: srlArrowPulseTight 1.15s ease-in-out infinite !important;
}

/* Hover rõ hơn */
body.home .srl-down-cue:hover{
  background: #2563eb !important;
  box-shadow:
    0 16px 34px rgba(37,99,235,.26),
    0 0 0 6px rgba(37,99,235,.09) !important;
}

body.home .srl-down-cue:hover::after{
  color: #ffffff !important;
}

/* Chuyển động dứt khoát hơn */
@keyframes srlArrowBounceStrong{
  0%, 100%{
    transform: translateY(0) scale(1);
  }
  45%{
    transform: translateY(10px) scale(1.04);
  }
  70%{
    transform: translateY(5px) scale(.98);
  }
}

@keyframes srlArrowPulseTight{
  0%,100%{
    transform: scale(.88);
    opacity: .35;
  }
  50%{
    transform: scale(1.18);
    opacity: .85;
  }
}

/* =========================================================
   FINAL SEARCH BAR — clean professional search section
   ========================================================= */

body.home .srl-search-section{
  width: 100% !important;
  padding: 34px 20px 38px !important;
  margin: 0 !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Search shell */
body.home .srl-search-shell,
body.home .srl-search-bar{
  width: min(860px, 100%) !important;
  max-width: 860px !important;

  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) 124px !important;
  align-items: center !important;
  gap: 8px !important;

  padding: 8px !important;
  margin: 0 auto !important;

  border-radius: 22px !important;
  background: rgba(255,255,255,.82) !important;
  border: 1px solid rgba(15,23,42,.08) !important;

  box-shadow:
    0 18px 46px rgba(15,23,42,.075),
    inset 0 1px 0 rgba(255,255,255,.82) !important;

  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

/* Icon */
body.home .srl-search-icon{
  width: 46px !important;
  height: 46px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 15px !important;
  background: #f1f6ff !important;
  color: #2563eb !important;

  font-size: 22px !important;
  font-weight: 900 !important;
}

/* Input */
body.home .srl-search-shell input,
body.home .srl-search-bar input,
body.home #srlSearchInput{
  width: 100% !important;
  height: 54px !important;
  min-height: 54px !important;

  padding: 0 16px !important;

  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;

  background: transparent !important;
  color: #0f172a !important;

  font-size: 15px !important;
  font-weight: 650 !important;
  line-height: 54px !important;
}

body.home .srl-search-shell input::placeholder,
body.home .srl-search-bar input::placeholder,
body.home #srlSearchInput::placeholder{
  color: #8b98aa !important;
  font-weight: 600 !important;
}

body.home .srl-search-shell input:focus,
body.home .srl-search-bar input:focus,
body.home #srlSearchInput:focus{
  background: rgba(255,255,255,.72) !important;
  box-shadow: inset 0 0 0 2px rgba(37,99,235,.14) !important;
  border-radius: 15px !important;
}

/* Button */
body.home .srl-search-shell button,
body.home .srl-search-bar button,
body.home #srlSearchBtn{
  width: 100% !important;
  height: 54px !important;
  min-height: 54px !important;

  border: 0 !important;
  outline: none !important;
  border-radius: 16px !important;

  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  color: #ffffff !important;

  font-size: 15px !important;
  font-weight: 900 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  cursor: pointer !important;

  box-shadow:
    0 14px 28px rgba(37,99,235,.24),
    inset 0 1px 0 rgba(255,255,255,.20) !important;

  transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important;
}

body.home .srl-search-shell button:hover,
body.home .srl-search-bar button:hover,
body.home #srlSearchBtn:hover{
  transform: translateY(-2px) !important;
  background: linear-gradient(135deg, #1d4ed8, #1e40af) !important;
  box-shadow: 0 18px 38px rgba(37,99,235,.32) !important;
}

/* Xóa style cũ làm input/button bị full ngang */
body.home .srl-search-bar > input,
body.home .srl-search-bar > button{
  margin: 0 !important;
}

/* Mobile */
@media(max-width: 640px){
  body.home .srl-search-section{
    padding: 24px 14px 30px !important;
  }

  body.home .srl-search-shell,
  body.home .srl-search-bar{
    grid-template-columns: 42px 1fr !important;
    gap: 8px !important;
    padding: 8px !important;
    border-radius: 20px !important;
  }

  body.home .srl-search-icon{
    width: 42px !important;
    height: 42px !important;
  }

  body.home .srl-search-shell button,
  body.home .srl-search-bar button,
  body.home #srlSearchBtn{
    grid-column: 1 / -1 !important;
    height: 48px !important;
    min-height: 48px !important;
  }
}

/* =========================================================
   FINAL FIX SEARCH BAR — ngắn lại, nằm giữa, cùng 1 hàng
   ========================================================= */

body.home .srl-search-section{
  width: 100% !important;
  padding: 28px 20px 34px !important;
  margin: 0 !important;
  background: transparent !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Thanh search ngắn nằm giữa */
body.home .srl-search-bar{
  width: min(720px, calc(100% - 40px)) !important;
  max-width: 720px !important;
  margin: 0 auto !important;

  display: flex !important;
  align-items: center !important;
  gap: 8px !important;

  padding: 8px !important;
  border-radius: 18px !important;

  background: rgba(255,255,255,.86) !important;
  border: 1px solid rgba(15,23,42,.08) !important;

  box-shadow:
    0 16px 38px rgba(15,23,42,.07),
    inset 0 1px 0 rgba(255,255,255,.82) !important;

  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

/* Input không còn full ngang */
body.home .srl-search-bar input,
body.home #srlSearchInput{
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;

  height: 48px !important;
  min-height: 48px !important;

  margin: 0 !important;
  padding: 0 16px !important;

  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;

  background: transparent !important;
  color: #0f172a !important;

  font-size: 15px !important;
  font-weight: 600 !important;
}

body.home .srl-search-bar input::placeholder{
  color: #8b98aa !important;
}

/* Button nằm bên phải, không full ngang */
body.home .srl-search-bar button,
body.home #srlSearchBtn{
  flex: 0 0 112px !important;
  width: 112px !important;
  max-width: 112px !important;

  height: 48px !important;
  min-height: 48px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 14px !important;

  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  color: #ffffff !important;

  font-size: 14px !important;
  font-weight: 900 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  cursor: pointer !important;

  box-shadow: 0 12px 24px rgba(37,99,235,.22) !important;
}

body.home .srl-search-bar button:hover,
body.home #srlSearchBtn:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 32px rgba(37,99,235,.30) !important;
}

/* Chặn mọi style cũ làm input/button full page */
body.home .srl-search-section input,
body.home .srl-search-section button{
  display: inline-flex !important;
}

/* Mobile */
@media(max-width: 620px){
  body.home .srl-search-bar{
    width: calc(100% - 28px) !important;
    flex-direction: column !important;
  }

  body.home .srl-search-bar input,
  body.home #srlSearchInput,
  body.home .srl-search-bar button,
  body.home #srlSearchBtn{
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }
}

/* =========================================================
   FIX SEARCH CENTER — ép thanh search nằm giữa màn hình
   Dán CUỐI CÙNG trong style.css
   ========================================================= */

/* Section chứa search full ngang */
body.home .srl-search-section{
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  padding: 28px 20px 34px !important;
  background: transparent !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Thanh search nằm giữa */
body.home .srl-search-bar{
  width: min(720px, calc(100vw - 40px)) !important;
  max-width: 720px !important;

  margin: 0 auto !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  padding: 8px !important;
  border-radius: 18px !important;

  background: rgba(255,255,255,.86) !important;
  border: 1px solid rgba(15,23,42,.08) !important;

  box-shadow:
    0 16px 38px rgba(15,23,42,.07),
    inset 0 1px 0 rgba(255,255,255,.82) !important;

  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

/* Input */
body.home .srl-search-bar input,
body.home #srlSearchInput{
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;

  height: 48px !important;
  min-height: 48px !important;

  margin: 0 !important;
  padding: 0 16px !important;

  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;

  background: transparent !important;
  color: #0f172a !important;

  font-size: 15px !important;
  font-weight: 600 !important;
}

/* Button */
body.home .srl-search-bar button,
body.home #srlSearchBtn{
  flex: 0 0 112px !important;
  width: 112px !important;
  max-width: 112px !important;

  height: 48px !important;
  min-height: 48px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 14px !important;

  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  color: #ffffff !important;

  font-size: 14px !important;
  font-weight: 900 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  cursor: pointer !important;
  box-shadow: 0 12px 24px rgba(37,99,235,.22) !important;
}

/* Hover */
body.home .srl-search-bar button:hover,
body.home #srlSearchBtn:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 32px rgba(37,99,235,.30) !important;
}

/* Mobile */
@media(max-width: 620px){
  body.home .srl-search-bar{
    width: calc(100vw - 28px) !important;
    flex-direction: column !important;
  }

  body.home .srl-search-bar input,
  body.home #srlSearchInput,
  body.home .srl-search-bar button,
  body.home #srlSearchBtn{
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }
}

/* =========================================================
   SEARCH FINAL HARD LOCK
   Ép thanh Search ngắn lại + nằm giữa, dù HTML wrapper đang sai
   Dán CUỐI CÙNG trong style.css
   ========================================================= */

/* Bắt đúng khung cha đang chứa input search + button */
body.home :is(div, form, section):has(> input[placeholder*="Search projects"]):has(> button),
body.page-id-1028 :is(div, form, section):has(> input[placeholder*="Search projects"]):has(> button){
  width: min(720px, calc(100vw - 40px)) !important;
  max-width: 720px !important;
  min-width: 0 !important;

  margin: 28px auto 34px !important;
  padding: 8px !important;

  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  position: relative !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;

  float: none !important;
  clear: both !important;

  border-radius: 18px !important;
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(15,23,42,.08) !important;

  box-shadow:
    0 16px 38px rgba(15,23,42,.07),
    inset 0 1px 0 rgba(255,255,255,.86) !important;

  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;

  z-index: 20 !important;
}

/* Input search */
body.home input[placeholder*="Search projects"],
body.page-id-1028 input[placeholder*="Search projects"]{
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  height: 48px !important;
  min-height: 48px !important;
  line-height: 48px !important;

  margin: 0 !important;
  padding: 0 16px !important;

  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;

  border-radius: 14px !important;
  background: transparent !important;
  color: #0f172a !important;

  font-size: 15px !important;
  font-weight: 650 !important;
}

body.home input[placeholder*="Search projects"]::placeholder,
body.page-id-1028 input[placeholder*="Search projects"]::placeholder{
  color: #8b98aa !important;
  font-weight: 600 !important;
}

body.home input[placeholder*="Search projects"]:focus,
body.page-id-1028 input[placeholder*="Search projects"]:focus{
  background: rgba(255,255,255,.72) !important;
  box-shadow: inset 0 0 0 2px rgba(37,99,235,.14) !important;
}

/* Button Search nằm bên phải, không full ngang */
body.home input[placeholder*="Search projects"] + button,
body.page-id-1028 input[placeholder*="Search projects"] + button,
body.home #srlSearchBtn,
body.page-id-1028 #srlSearchBtn{
  flex: 0 0 112px !important;
  width: 112px !important;
  max-width: 112px !important;

  height: 48px !important;
  min-height: 48px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  outline: none !important;
  border-radius: 14px !important;

  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  color: #ffffff !important;

  font-size: 14px !important;
  font-weight: 950 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  cursor: pointer !important;
  box-shadow: 0 12px 24px rgba(37,99,235,.22) !important;
}

body.home input[placeholder*="Search projects"] + button:hover,
body.page-id-1028 input[placeholder*="Search projects"] + button:hover,
body.home #srlSearchBtn:hover,
body.page-id-1028 #srlSearchBtn:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 32px rgba(37,99,235,.30) !important;
}

/* Mobile */
@media(max-width: 620px){
  body.home :is(div, form, section):has(> input[placeholder*="Search projects"]):has(> button),
  body.page-id-1028 :is(div, form, section):has(> input[placeholder*="Search projects"]):has(> button){
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    flex-direction: column !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  body.home input[placeholder*="Search projects"],
  body.page-id-1028 input[placeholder*="Search projects"],
  body.home input[placeholder*="Search projects"] + button,
  body.page-id-1028 input[placeholder*="Search projects"] + button,
  body.home #srlSearchBtn,
  body.page-id-1028 #srlSearchBtn{
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }
}

/* =========================================================
   SEARCH CENTER FINAL — Căn giữa thanh search
   Dán CUỐI CÙNG trong style.css
   ========================================================= */

body.home :is(div, form, section):has(> input[placeholder*="Search projects"]):has(> button),
body.page-id-1028 :is(div, form, section):has(> input[placeholder*="Search projects"]):has(> button){
  width: min(720px, calc(100vw - 40px)) !important;
  max-width: 720px !important;

  margin: 28px auto 34px auto !important;
  padding: 8px !important;

  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;

  float: none !important;
  clear: both !important;

  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  border-radius: 18px !important;
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(15,23,42,.08) !important;

  box-shadow:
    0 16px 38px rgba(15,23,42,.07),
    inset 0 1px 0 rgba(255,255,255,.86) !important;

  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;

  z-index: 20 !important;
}

/* Ép section cha nếu có nằm full ngang và canh giữa */
body.home .srl-search-section{
  width: 100% !important;
  max-width: 100% !important;

  margin: 0 auto !important;
  padding: 26px 20px 34px !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  position: relative !important;
  left: auto !important;
  transform: none !important;

  background: transparent !important;
}

/* Input */
body.home input[placeholder*="Search projects"],
body.page-id-1028 input[placeholder*="Search projects"]{
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;

  height: 48px !important;
  min-height: 48px !important;

  margin: 0 !important;
  padding: 0 16px !important;

  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;

  border-radius: 14px !important;
  background: transparent !important;
  color: #0f172a !important;

  font-size: 15px !important;
  font-weight: 650 !important;
}

/* Button */
body.home input[placeholder*="Search projects"] + button,
body.page-id-1028 input[placeholder*="Search projects"] + button,
body.home #srlSearchBtn,
body.page-id-1028 #srlSearchBtn{
  flex: 0 0 112px !important;
  width: 112px !important;
  max-width: 112px !important;

  height: 48px !important;
  min-height: 48px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 14px !important;

  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  color: #ffffff !important;

  font-size: 14px !important;
  font-weight: 950 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  cursor: pointer !important;
  box-shadow: 0 12px 24px rgba(37,99,235,.22) !important;
}

/* =========================================================
   FIX TABLE HEADER ALIGN — căn giữa header với thông tin bên dưới
   ========================================================= */

/* Giữ grid header giống row bên dưới */
body.home .srl-table-head{
  grid-template-columns:
    minmax(260px,1.45fr)
    minmax(92px,.55fr)
    minmax(92px,.55fr)
    minmax(92px,.55fr)
    minmax(105px,.6fr)
    104px !important;

  padding: 0 18px 12px !important;
  align-items: center !important;
}

/* PLATFORM giữ canh trái */
body.home .srl-table-head > div:first-child{
  text-align: left !important;
  justify-self: start !important;
}

/* Các cột còn lại canh giữa đúng với box bên dưới */
body.home .srl-table-head > div:nth-child(2),
body.home .srl-table-head > div:nth-child(3),
body.home .srl-table-head > div:nth-child(4),
body.home .srl-table-head > div:nth-child(5),
body.home .srl-table-head > div:nth-child(6){
  text-align: center !important;
  justify-self: center !important;
  width: 100% !important;
}

/* Cột ACTION căn chính giữa với 2 nút bên dưới */
body.home .srl-table-head > div:last-child{
  text-align: center !important;
  justify-self: center !important;
}

/* =========================================================
   FIX TABLE HEADER — xích hàng chữ tiêu đề qua phải một chút
   Dán CUỐI CÙNG trong style.css
   ========================================================= */

/* Giữ PLATFORM như cũ */
body.home .srl-table-head > div:first-child{
  transform: none !important;
}

/* Xích các chữ RATING / PRICING / USERS / CATEGORY / ACTION qua phải */
body.home .srl-table-head > div:nth-child(2),
body.home .srl-table-head > div:nth-child(3),
body.home .srl-table-head > div:nth-child(4),
body.home .srl-table-head > div:nth-child(5),
body.home .srl-table-head > div:nth-child(6){
  transform: translateX(24px) !important;
}

/* =========================================================
   FIX TABLE HEADER REAL — xích tiêu đề cột qua phải
   Bắt mọi thẻ con, không chỉ div
   ========================================================= */

/* Đảm bảo các item header có thể dịch chuyển */
body.home .srl-table-head > *{
  display: flex !important;
  align-items: center !important;
}

/* PLATFORM giữ nguyên bên trái */
body.home .srl-table-head > *:nth-child(1){
  justify-content: flex-start !important;
  text-align: left !important;
  transform: none !important;
  position: relative !important;
  left: 0 !important;
}

/* RATING / PRICING / USERS / CATEGORY / ACTION xích qua phải */
body.home .srl-table-head > *:nth-child(2),
body.home .srl-table-head > *:nth-child(3),
body.home .srl-table-head > *:nth-child(4),
body.home .srl-table-head > *:nth-child(5),
body.home .srl-table-head > *:nth-child(6){
  justify-content: center !important;
  text-align: center !important;
  position: relative !important;
  left: 0px !important;
}

/* =========================================================
   REVIEW PAGE HEADER BLEND
   Hòa phần header với nền review page + bỏ đường cắt ngang
   Dán CUỐI CÙNG trong style.css
   ========================================================= */

/* Nền chung cho toàn bộ review page */
body.page:not(.home):not(.page-template-page-categories),
body.page:not(.home):not(.page-template-page-categories) #page,
body.page:not(.home):not(.page-template-page-categories) #content,
body.page:not(.home):not(.page-template-page-categories) .site-content,
body.page:not(.home):not(.page-template-page-categories) .site-main{
  background:
    radial-gradient(circle at 12% 14%, rgba(37,99,235,.12), transparent 32%),
    radial-gradient(circle at 88% 18%, rgba(255,107,26,.10), transparent 30%),
    radial-gradient(circle at 50% 92%, rgba(168,85,247,.07), transparent 34%),
    linear-gradient(180deg, #f3f7ff 0%, #f5f7fb 46%, #f7f9fc 100%) !important;
}

/* Cho header dùng cùng nền, không còn mảng trắng riêng */
body.page:not(.home):not(.page-template-page-categories) .site-header,
body.page:not(.home):not(.page-template-page-categories) .ast-site-header-wrap,
body.page:not(.home):not(.page-template-page-categories) .ast-primary-header-bar,
body.page:not(.home):not(.page-template-page-categories) .main-header-bar,
body.page:not(.home):not(.page-template-page-categories) .main-header-bar-wrap{
  background:
    radial-gradient(circle at 12% 14%, rgba(37,99,235,.12), transparent 32%),
    radial-gradient(circle at 88% 18%, rgba(255,107,26,.10), transparent 30%),
    linear-gradient(180deg, #f3f7ff 0%, #f4f7fb 100%) !important;

  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* Xóa đường kẻ do Astra tạo ở header */
body.page:not(.home):not(.page-template-page-categories):not(.page-template-page-categories) .site-header::before,
body.page:not(.home):not(.page-template-page-categories):not(.page-template-page-categories) .site-header::after,
body.page:not(.home):not(.page-template-page-categories):not(.page-template-page-categories) .ast-primary-header-bar::before,
body.page:not(.home):not(.page-template-page-categories):not(.page-template-page-categories) .ast-primary-header-bar::after,
body.page:not(.home):not(.page-template-page-categories):not(.page-template-page-categories) .main-header-bar::before,
body.page:not(.home):not(.page-template-page-categories):not(.page-template-page-categories) .main-header-bar::after{
  content: none !important;
  display: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Xóa border/shadow ở các wrapper bên trong */
body.page:not(.home):not(.page-template-page-categories):not(.page-template-page-categories) .ast-container,
body.page:not(.home):not(.page-template-page-categories):not(.page-template-page-categories) .ast-builder-grid-row,
body.page:not(.home):not(.page-template-page-categories):not(.page-template-page-categories) .site-header-primary-section-left,
body.page:not(.home):not(.page-template-page-categories):not(.page-template-page-categories) .site-header-primary-section-right{
  border: 0 !important;
  box-shadow: none !important;
}

/* Menu vẫn rõ, không bị chìm nền */
body.page:not(.home):not(.page-template-page-categories):not(.page-template-page-categories) .main-header-menu .menu-link,
body.page:not(.home):not(.page-template-page-categories):not(.page-template-page-categories) .ast-builder-menu-1 .menu-item > .menu-link{
  color: #0f172a !important;
  font-weight: 650 !important;
}

body.page:not(.home):not(.page-template-page-categories):not(.page-template-page-categories) .main-header-menu .menu-link:hover,
body.page:not(.home):not(.page-template-page-categories):not(.page-template-page-categories) .ast-builder-menu-1 .menu-item > .menu-link:hover{
  color: #2563eb !important;
}

/* Làm phần đầu review hòa với header hơn */
body.page:not(.home):not(.page-template-page-categories):not(.page-template-page-categories) .srl-review-premium,
body.page:not(.home):not(.page-template-page-categories):not(.page-template-page-categories) .srl-review-detail{
  background: transparent !important;
}

/* Nếu còn vệt line rất mảnh giữa header và content */
body.page:not(.home):not(.page-template-page-categories):not(.page-template-page-categories) .site-content{
  border-top: 0 !important;
  box-shadow: none !important;
  margin-top: -1px !important;
}

body.page:not(.home):not(.page-template-page-categories):not(.page-template-page-categories) .site-header{
  margin-bottom: -1px !important;
}

/* =========================================================
   REVIEW PAGE — One background, no header/content cut line
   Dán CUỐI CÙNG trong style.css
   ========================================================= */

/* 1 nền chung cho toàn bộ trang review */
body.page:not(.home):not(.page-template-page-categories):not(.page-template-page-categories),
body.page:not(.home):not(.page-template-page-categories):not(.page-template-page-categories) #page{
  background:
    radial-gradient(circle at 12% 10%, rgba(59,130,246,.13), transparent 34%),
    radial-gradient(circle at 88% 10%, rgba(255,107,26,.10), transparent 32%),
    radial-gradient(circle at 50% 95%, rgba(168,85,247,.07), transparent 34%),
    linear-gradient(180deg, #f2f7ff 0%, #f4f7fb 42%, #f7f9fc 100%) !important;
  background-attachment: fixed !important;
}

/* Header không được có nền riêng nữa */
body.page:not(.home):not(.page-template-page-categories):not(.page-template-page-categories) .site-header,
body.page:not(.home):not(.page-template-page-categories) .ast-site-header-wrap,
body.page:not(.home):not(.page-template-page-categories) .ast-primary-header-bar,
body.page:not(.home):not(.page-template-page-categories) .main-header-bar,
body.page:not(.home):not(.page-template-page-categories) .main-header-bar-wrap,
body.page:not(.home):not(.page-template-page-categories) .ast-builder-grid-row-container,
body.page:not(.home):not(.page-template-page-categories) .ast-builder-grid-row{
  background: transparent !important;
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* Content cũng trong suốt để ăn chung nền với header */
body.page:not(.home):not(.page-template-page-categories) #content,
body.page:not(.home):not(.page-template-page-categories) .site-content,
body.page:not(.home):not(.page-template-page-categories) .site-content .ast-container,
body.page:not(.home):not(.page-template-page-categories) #primary,
body.page:not(.home):not(.page-template-page-categories) .content-area,
body.page:not(.home):not(.page-template-page-categories) .site-main,
body.page:not(.home):not(.page-template-page-categories) article,
body.page:not(.home):not(.page-template-page-categories) .entry-content,
body.page:not(.home):not(.page-template-page-categories) .srl-review-premium,
body.page:not(.home):not(.page-template-page-categories) .srl-review-detail{
  background: transparent !important;
  border-top: 0 !important;
  box-shadow: none !important;
}

/* Xóa mọi line giả / pseudo element của Astra */
body.page:not(.home):not(.page-template-page-categories) .site-header::before,
body.page:not(.home):not(.page-template-page-categories) .site-header::after,
body.page:not(.home):not(.page-template-page-categories) .ast-site-header-wrap::before,
body.page:not(.home):not(.page-template-page-categories) .ast-site-header-wrap::after,
body.page:not(.home):not(.page-template-page-categories) .ast-primary-header-bar::before,
body.page:not(.home):not(.page-template-page-categories) .ast-primary-header-bar::after,
body.page:not(.home):not(.page-template-page-categories) .main-header-bar::before,
body.page:not(.home):not(.page-template-page-categories) .main-header-bar::after,
body.page:not(.home):not(.page-template-page-categories) #content::before,
body.page:not(.home):not(.page-template-page-categories) #content::after,
body.page:not(.home):not(.page-template-page-categories) .site-content::before,
body.page:not(.home):not(.page-template-page-categories) .site-content::after{
  content: none !important;
  display: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Kéo content lên 1px để xoá khe render nhỏ giữa header và body */
body.page:not(.home):not(.page-template-page-categories) .site-content{
  margin-top: -1px !important;
}

/* Nếu Astra vẫn tạo viền dưới header */
body.page:not(.home):not(.page-template-page-categories) .ast-primary-header-bar{
  border-bottom-width: 0 !important;
}

/* Menu giữ rõ trên nền */
body.page:not(.home):not(.page-template-page-categories) .main-header-menu .menu-link,
body.page:not(.home):not(.page-template-page-categories) .ast-builder-menu-1 .menu-item > .menu-link{
  color: #0f172a !important;
  font-weight: 700 !important;
}

body.page:not(.home):not(.page-template-page-categories) .main-header-menu .menu-link:hover,
body.page:not(.home):not(.page-template-page-categories) .ast-builder-menu-1 .menu-item > .menu-link:hover{
  color: #2563eb !important;
}

/* =========================================================
   REVIEW HERO CARD POLISH — sửa card bên phải trang review
   Dán CUỐI CÙNG trong style.css
   ========================================================= */

/* Card đen bên phải */
body.page:not(.home):not(.page-template-page-categories) .srl-review-hero-card{
  width: 300px !important;
  flex: 0 0 300px !important;

  padding: 28px 24px 24px !important;
  border-radius: 28px !important;

  background:
    radial-gradient(circle at 85% 5%, rgba(37,99,235,.16), transparent 38%),
    radial-gradient(circle at 15% 100%, rgba(255,107,26,.12), transparent 42%),
    linear-gradient(160deg, #0b1220 0%, #101827 100%) !important;

  border: 1px solid rgba(255,255,255,.10) !important;

  box-shadow:
    0 26px 64px rgba(15,23,42,.24),
    inset 0 1px 0 rgba(255,255,255,.08) !important;

  text-align: center !important;
  overflow: hidden !important;
}

/* Logo nhỏ gọn hơn */
body.page:not(.home):not(.page-template-page-categories) .srl-review-hero-card > img{
  width: 72px !important;
  height: 72px !important;

  padding: 13px !important;
  margin: 0 auto 18px !important;

  border-radius: 22px !important;
  background: #ffffff !important;
  border: 1px solid rgba(255,255,255,.18) !important;

  box-shadow: 0 16px 34px rgba(0,0,0,.20) !important;
}

/* Tên tool */
body.page:not(.home):not(.page-template-page-categories) .srl-review-hero-card h3{
  margin: 0 0 10px !important;

  color: #ffffff !important;
  font-size: 23px !important;
  line-height: 1.15 !important;
  font-weight: 950 !important;
}

/* Mô tả */
body.page:not(.home):not(.page-template-page-categories) .srl-review-hero-card p{
  max-width: 230px !important;
  margin: 0 auto 22px !important;

  color: rgba(255,255,255,.74) !important;
  font-size: 13.5px !important;
  line-height: 1.65 !important;
}

/* Nút cam gọn lại */
body.page:not(.home):not(.page-template-page-categories) .srl-review-hero-card a{
  width: 100% !important;
  min-height: 52px !important;

  margin: 0 !important;
  padding: 0 16px !important;

  border-radius: 16px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;

  background: linear-gradient(135deg, #ff8a1d 0%, #ff5f1f 100%) !important;
  color: #ffffff !important;

  font-size: 14px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;

  box-shadow:
    0 18px 36px rgba(255,112,32,.26),
    inset 0 1px 0 rgba(255,255,255,.22) !important;

  position: relative !important;
  overflow: hidden !important;
}

/* Tắt icon lớn / ảnh / svg bên trong nút nếu có */
body.page:not(.home):not(.page-template-page-categories) .srl-review-hero-card a img,
body.page:not(.home):not(.page-template-page-categories) .srl-review-hero-card a svg,
body.page:not(.home):not(.page-template-page-categories) .srl-review-hero-card a i{
  display: none !important;
}

/* Thêm icon nhỏ gọn thay thế */
body.page:not(.home):not(.page-template-page-categories) .srl-review-hero-card a::after{
  content: "↗" !important;

  width: 24px !important;
  height: 24px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 8px !important;

  background: rgba(255,255,255,.18) !important;
  color: #ffffff !important;

  font-size: 14px !important;
  font-weight: 950 !important;
  line-height: 1 !important;

  flex: 0 0 24px !important;
}

/* Hover nút */
body.page:not(.home):not(.page-template-page-categories) .srl-review-hero-card a:hover{
  transform: translateY(-2px) !important;

  background: linear-gradient(135deg, #ff7a00 0%, #f04b18 100%) !important;
  color: #ffffff !important;

  box-shadow:
    0 22px 46px rgba(255,112,32,.34),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
}

body.page:not(.home):not(.page-template-page-categories) .srl-review-hero-card a:hover::after{
  background: rgba(255,255,255,.26) !important;
}

/* =========================================================
   PROGRAMS PAGE FIX — sửa card Programs bị hổng/trống
   Dán CUỐI CÙNG trong style.css
   ========================================================= */

/* Nền và khoảng cách chung cho trang Programs */
body.page:not(.home):not(.page-template-page-categories) .srl-programs-page-v2{
  max-width: 1180px !important;
  margin: 120px auto 80px !important;
  padding: 0 22px !important;
}

/* Hero đầu trang Programs */
body.page:not(.home):not(.page-template-page-categories) .srl-programs-hero-v2{
  padding: 42px 46px !important;
  margin: 0 0 24px !important;
  border-radius: 30px !important;

  background: rgba(255,255,255,.82) !important;
  border: 1px solid rgba(15,23,42,.075) !important;

  box-shadow:
    0 22px 60px rgba(15,23,42,.07),
    inset 0 1px 0 rgba(255,255,255,.86) !important;

  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

body.page:not(.home):not(.page-template-page-categories) .srl-programs-hero-v2 h1{
  margin: 8px 0 16px !important;
  color: #0f172a !important;
  font-size: clamp(34px, 4vw, 46px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.04em !important;
  font-weight: 950 !important;
}

body.page:not(.home):not(.page-template-page-categories) .srl-programs-hero-v2 p{
  max-width: 850px !important;
  margin: 0 !important;
  color: #526173 !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}

/* Grid card Programs: từ list dài thành card đều */
body.page:not(.home):not(.page-template-page-categories) .srl-program-grid-v2{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  margin-top: 24px !important;
}

/* Card từng program */
body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2{
  min-height: 255px !important;
  padding: 24px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 0 !important;

  border-radius: 26px !important;
  background: rgba(255,255,255,.86) !important;
  border: 1px solid rgba(15,23,42,.075) !important;

  box-shadow:
    0 16px 42px rgba(15,23,42,.055),
    inset 0 1px 0 rgba(255,255,255,.86) !important;

  text-decoration: none !important;
  overflow: hidden !important;
  position: relative !important;

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease !important;
}

/* Hover card */
body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2:hover{
  transform: translateY(-5px) !important;
  border-color: rgba(37,99,235,.18) !important;
  box-shadow: 0 26px 64px rgba(37,99,235,.12) !important;
}

/* Logo trong card */
body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2 img{
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;

  object-fit: contain !important;

  margin: 0 0 16px !important;
  padding: 10px !important;

  border-radius: 16px !important;
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,.075) !important;

  box-shadow: 0 12px 26px rgba(15,23,42,.055) !important;
}

/* Category nhỏ */
body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2 span,
body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2 em{
  display: inline-flex !important;
  align-items: center !important;

  margin: 0 0 10px !important;
  padding: 6px 10px !important;

  border-radius: 999px !important;
  background: #eef4ff !important;
  color: #2563eb !important;

  font-style: normal !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

/* Title */
body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2 h2,
body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2 h3{
  margin: 0 0 10px !important;

  color: #0f172a !important;
  font-size: 22px !important;
  line-height: 1.18 !important;
  letter-spacing: -.025em !important;
  font-weight: 950 !important;
}

/* Description */
body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2 p{
  margin: 0 0 18px !important;

  color: #64748b !important;
  font-size: 14.5px !important;
  line-height: 1.65 !important;
}

/* Rating / link dưới cùng */
body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2 strong,
body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2 a{
  color: #2563eb !important;
  font-weight: 950 !important;
  text-decoration: none !important;
}

/* Đẩy dòng sao/View Review xuống cuối card nếu có */
body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2 > *:last-child{
  margin-top: auto !important;
}

/* Nếu bên trong card có div bọc nội dung thì cho full width */
body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2 > div{
  width: 100% !important;
}

/* Responsive */
@media(max-width: 1020px){
  body.page:not(.home):not(.page-template-page-categories) .srl-program-grid-v2{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media(max-width: 640px){
  body.page:not(.home):not(.page-template-page-categories) .srl-programs-page-v2{
    margin-top: 100px !important;
    padding: 0 14px !important;
  }

  body.page:not(.home):not(.page-template-page-categories) .srl-programs-hero-v2{
    padding: 30px 24px !important;
    border-radius: 24px !important;
  }

  body.page:not(.home):not(.page-template-page-categories) .srl-program-grid-v2{
    grid-template-columns: 1fr !important;
  }

  body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2{
    min-height: auto !important;
  }
}

/* =========================================================
   PROGRAMS PAGE — HARD FIX TO 4 SQUARE CARDS
   giống layout hình mẫu: 1 hàng 4 card vuông
   Dán CUỐI CÙNG trong style.css
   ========================================================= */

/* Khung toàn trang Programs */
body.page:not(.home):not(.page-template-page-categories) .srl-programs-page-v2{
  max-width: 1320px !important;
  margin: 120px auto 80px !important;
  padding: 0 20px !important;
}

/* Hero đầu trang */
body.page:not(.home):not(.page-template-page-categories) .srl-programs-hero-v2{
  padding: 42px 44px !important;
  margin: 0 0 26px !important;
  border-radius: 30px !important;
  background: rgba(255,255,255,.86) !important;
  border: 1px solid rgba(15,23,42,.07) !important;
  box-shadow:
    0 20px 54px rgba(15,23,42,.06),
    inset 0 1px 0 rgba(255,255,255,.88) !important;
}

body.page:not(.home):not(.page-template-page-categories) .srl-programs-hero-v2 h1{
  margin: 8px 0 14px !important;
  font-size: clamp(36px, 4.4vw, 56px) !important;
  line-height: 1.05 !important;
  letter-spacing: -.04em !important;
  font-weight: 950 !important;
  color: #0f172a !important;
}

body.page:not(.home):not(.page-template-page-categories) .srl-programs-hero-v2 p{
  max-width: 860px !important;
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: #5f6f84 !important;
}

/* =========================================================
   GRID 4 CỘT
   ========================================================= */

body.page:not(.home):not(.page-template-page-categories) .srl-program-grid-v2{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
  margin-top: 24px !important;
}

/* =========================================================
   CARD VUÔNG
   ========================================================= */

body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2{
  aspect-ratio: 1 / 1 !important;
  min-height: 0 !important;
  height: auto !important;
  width: 100% !important;
  max-width: none !important;

  padding: 24px 20px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;

  border-radius: 24px !important;
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(15,23,42,.08) !important;

  box-shadow:
    0 14px 34px rgba(15,23,42,.05),
    inset 0 1px 0 rgba(255,255,255,.9) !important;

  overflow: hidden !important;
  position: relative !important;
  text-decoration: none !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease !important;
}

body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2:hover{
  transform: translateY(-4px) !important;
  border-color: rgba(37,99,235,.18) !important;
  box-shadow: 0 22px 48px rgba(37,99,235,.10) !important;
}

/* Logo */
body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2 img{
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  object-fit: contain !important;

  margin: 0 auto 14px !important;
  padding: 8px !important;

  border-radius: 14px !important;
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,.07) !important;
  box-shadow: 0 8px 20px rgba(15,23,42,.05) !important;
}

/* Category pill */
body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2 span,
body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2 em{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 0 10px !important;
  padding: 6px 10px !important;

  border-radius: 999px !important;
  background: #eef4ff !important;
  color: #2563eb !important;

  font-style: normal !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

/* Title */
body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2 h2,
body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2 h3{
  margin: 0 0 10px !important;
  color: #0f172a !important;
  font-size: 18px !important;
  line-height: 1.22 !important;
  font-weight: 900 !important;
  letter-spacing: -.02em !important;
}

/* Description */
body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2 p{
  margin: 0 0 12px !important;
  max-width: 92% !important;

  color: #64748b !important;
  font-size: 14px !important;
  line-height: 1.55 !important;

  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Dòng rating + review */
body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2 strong{
  display: inline-block !important;
  margin: 2px 0 0 !important;
  color: #f59e0b !important;
  font-weight: 900 !important;
  font-size: 13px !important;
}

/* Link review ở dưới cùng */
body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2 a{
  margin-top: auto !important;
  color: #2563eb !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}

/* Nếu link là phần cuối, gom rating + review đẹp hơn */
body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2 > *:last-child{
  margin-top: auto !important;
}

/* Nếu card có div bọc trong */
body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2 > div{
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width: 1180px){
  body.page:not(.home):not(.page-template-page-categories) .srl-program-grid-v2{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media(max-width: 860px){
  body.page:not(.home):not(.page-template-page-categories) .srl-program-grid-v2{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media(max-width: 560px){
  body.page:not(.home):not(.page-template-page-categories) .srl-programs-page-v2{
    margin-top: 100px !important;
    padding: 0 14px !important;
  }

  body.page:not(.home):not(.page-template-page-categories) .srl-programs-hero-v2{
    padding: 28px 22px !important;
    border-radius: 24px !important;
  }

  body.page:not(.home):not(.page-template-page-categories) .srl-program-grid-v2{
    grid-template-columns: 1fr !important;
  }

  body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2{
    aspect-ratio: auto !important;
    min-height: 230px !important;
  }
}


/* =========================================================
   CATEGORY CUSTOM DROPDOWN — có thanh kéo lên xuống
   ========================================================= */

.srl-custom-category{
  position: relative !important;
  width: 100% !important;
}

.srl-custom-category-btn{
  width: 100% !important;
  height: 46px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  padding: 0 14px !important;

  border-radius: 12px !important;
  border: 1px solid rgba(15,23,42,.12) !important;
  background: rgba(255,255,255,.92) !important;
  color: #475569 !important;

  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer !important;

  box-shadow: 0 8px 18px rgba(15,23,42,.045) !important;
}

.srl-custom-category-btn::after{
  content: "⌄";
  font-size: 18px;
  color: #64748b;
}

.srl-custom-category-menu{
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  right: 0 !important;

  z-index: 9999 !important;

  max-height: 260px !important;
  overflow-y: auto !important;

  padding: 6px !important;

  border-radius: 14px !important;
  border: 1px solid rgba(15,23,42,.12) !important;
  background: #ffffff !important;

  box-shadow: 0 18px 40px rgba(15,23,42,.16) !important;

  display: none !important;
}

.srl-custom-category.is-open .srl-custom-category-menu{
  display: block !important;
}

.srl-custom-category-option{
  width: 100% !important;

  display: flex !important;
  align-items: center !important;

  padding: 10px 12px !important;

  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #334155 !important;

  font-size: 15px !important;
  font-weight: 600 !important;
  text-align: left !important;

  cursor: pointer !important;
}

.srl-custom-category-option:hover{
  background: #eef4ff !important;
  color: #2563eb !important;
}

.srl-custom-category-option.is-active{
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  color: #ffffff !important;
}

/* Thanh kéo đẹp hơn */
.srl-custom-category-menu::-webkit-scrollbar{
  width: 8px;
}

.srl-custom-category-menu::-webkit-scrollbar-track{
  background: #f1f5f9;
  border-radius: 999px;
}

.srl-custom-category-menu::-webkit-scrollbar-thumb{
  background: #cbd5e1;
  border-radius: 999px;
}

.srl-custom-category-menu::-webkit-scrollbar-thumb:hover{
  background: #94a3b8;
}

/* Ẩn select gốc nhưng vẫn giữ để JS filter cũ chạy */
.srl-category-select-hidden{
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
}

/* =========================================================
   FILTER SELECT ARROW ALIGN FIX
   Cân chỉnh mũi tên dropdown trong Filters
   Dán CUỐI CÙNG trong style.css
   ========================================================= */

/* Select mặc định: Review Type, Platform Type, Country, Use Case */
body.home .srl-filter-card select,
body.home .srl-filters select,
body.home .srl-filter-panel select,
body.page-id-1028 select{
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;

  height: 46px !important;
  line-height: 46px !important;

  padding: 0 42px 0 14px !important;

  background-color: rgba(255,255,255,.92) !important;

  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10L12 15L17 10' stroke='%23475569' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 18px 18px !important;

  border-radius: 12px !important;
  box-sizing: border-box !important;
}

/* Xóa mũi tên cũ của IE/Edge cũ nếu có */
body.home .srl-filter-card select::-ms-expand,
body.home .srl-filters select::-ms-expand,
body.home .srl-filter-panel select::-ms-expand,
body.page-id-1028 select::-ms-expand{
  display: none !important;
}

/* Category custom dropdown: căn lại mũi tên cho đều với select */
.srl-custom-category-btn{
  position: relative !important;

  height: 46px !important;
  line-height: 46px !important;

  padding: 0 42px 0 14px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  text-align: left !important;
}

/* Mũi tên của Category */
.srl-custom-category-btn::after{
  content: "" !important;

  position: absolute !important;
  right: 14px !important;
  top: 50% !important;

  width: 18px !important;
  height: 18px !important;

  transform: translateY(-50%) !important;

  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10L12 15L17 10' stroke='%23475569' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px 18px !important;

  pointer-events: none !important;
}

/* Khi mở dropdown, mũi tên xoay lên nhẹ */
.srl-custom-category.is-open .srl-custom-category-btn::after{
  transform: translateY(-50%) rotate(180deg) !important;
}

/* =========================================================
   FILTER SELECT ARROW — làm 4 mũi tên dưới giống Category
   Dán CUỐI CÙNG trong style.css
   ========================================================= */

/* Bọc select để đặt mũi tên custom */
.srl-filter-select-wrap{
  position: relative !important;
  width: 100% !important;
}

/* Select bên trong */
.srl-filter-select-wrap select{
  width: 100% !important;
  height: 46px !important;

  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;

  padding: 0 42px 0 14px !important;

  border-radius: 12px !important;
  border: 1px solid rgba(15,23,42,.12) !important;

  background: rgba(255,255,255,.92) !important;
  color: #475569 !important;

  font-size: 15px !important;
  font-weight: 500 !important;

  box-shadow: 0 8px 18px rgba(15,23,42,.045) !important;
  cursor: pointer !important;
}

/* Xóa mũi tên mặc định Edge/IE cũ */
.srl-filter-select-wrap select::-ms-expand{
  display: none !important;
}

/* Mũi tên custom giống Category */
.srl-filter-select-wrap::after{
  content: "" !important;

  position: absolute !important;
  right: 14px !important;
  top: 50% !important;

  width: 18px !important;
  height: 18px !important;

  transform: translateY(-50%) !important;

  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10L12 15L17 10' stroke='%23475569' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px 18px !important;

  pointer-events: none !important;
}

/* Category custom dropdown giữ cùng vị trí mũi tên */
.srl-custom-category-btn{
  position: relative !important;
  height: 46px !important;
  padding: 0 42px 0 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

.srl-custom-category-btn::after{
  content: "" !important;

  position: absolute !important;
  right: 14px !important;
  top: 50% !important;

  width: 18px !important;
  height: 18px !important;

  transform: translateY(-50%) !important;

  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10L12 15L17 10' stroke='%23475569' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px 18px !important;

  pointer-events: none !important;
}

/* =========================================================
   SRL PROGRAMS PAGE CLEAN FINAL
   3 card / hàng + View Review hiện chuẩn + pagination đẹp
   ========================================================= */

body.page:not(.home):not(.page-template-page-categories) .srl-programs-page-v2{
  width: min(1120px, calc(100% - 48px)) !important;
  max-width: 1120px !important;
  margin: 120px auto 80px !important;
  padding: 0 !important;
  display: block !important;
}

/* Hero Programs */
body.page:not(.home):not(.page-template-page-categories) .srl-programs-hero-v2{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 36px !important;
  padding: 46px 52px !important;

  display: block !important;

  border-radius: 30px !important;
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(15,23,42,.075) !important;

  box-shadow:
    0 22px 58px rgba(15,23,42,.065),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
}

body.page:not(.home):not(.page-template-page-categories) .srl-programs-hero-v2 span{
  display: block !important;
  margin: 0 0 12px !important;
  color: #475569 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

body.page:not(.home):not(.page-template-page-categories) .srl-programs-hero-v2 h1{
  margin: 0 0 16px !important;
  color: #0f172a !important;
  font-size: clamp(38px, 5vw, 56px) !important;
  line-height: 1.05 !important;
  letter-spacing: -.055em !important;
  font-weight: 950 !important;
}

body.page:not(.home):not(.page-template-page-categories) .srl-programs-hero-v2 p{
  max-width: 820px !important;
  margin: 0 !important;
  color: #64748b !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}

/* Grid: 3 card / hàng */
body.page:not(.home):not(.page-template-page-categories) .srl-programs-grid-v2{
  width: 100% !important;
  max-width: 1080px !important;
  margin: 0 auto !important;
  padding: 0 !important;

  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 28px !important;

  align-items: stretch !important;
  justify-items: stretch !important;
}

/* Card */
body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2{
  position: relative !important;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  height: 365px !important;
  min-height: 365px !important;
  max-height: 365px !important;

  margin: 0 !important;
  padding: 26px 24px 96px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;

  text-align: center !important;
  text-decoration: none !important;

  border-radius: 24px !important;
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(15,23,42,.08) !important;

  box-shadow:
    0 16px 38px rgba(15,23,42,.055),
    inset 0 1px 0 rgba(255,255,255,.90) !important;

  overflow: hidden !important;
  box-sizing: border-box !important;
}

body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2:hover{
  transform: translateY(-4px) !important;
  border-color: rgba(37,99,235,.18) !important;
  box-shadow: 0 24px 54px rgba(37,99,235,.12) !important;
}

/* Logo */
body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2 > img{
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;

  margin: 0 auto 14px !important;
  padding: 8px !important;

  object-fit: contain !important;

  border-radius: 15px !important;
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,.075) !important;

  box-shadow: 0 8px 20px rgba(15,23,42,.05) !important;

  position: static !important;
  transform: none !important;
}

/* Content */
body.page:not(.home):not(.page-template-page-categories) .srl-card-content-v2{
  width: 100% !important;
  min-width: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;

  text-align: center !important;
  overflow: visible !important;
}

/* Badge */
body.page:not(.home):not(.page-template-page-categories) .srl-card-content-v2 span{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  max-width: 100% !important;
  min-height: 24px !important;

  margin: 0 auto 12px !important;
  padding: 5px 11px !important;

  border-radius: 999px !important;
  background: #eef4ff !important;
  border: 1px solid rgba(37,99,235,.10) !important;
  color: #2563eb !important;

  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  font-style: normal !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Title */
body.page:not(.home):not(.page-template-page-categories) .srl-card-content-v2 h2{
  width: 100% !important;

  margin: 0 auto 10px !important;

  color: #0f172a !important;
  font-size: 18px !important;
  line-height: 1.25 !important;
  font-weight: 950 !important;
  letter-spacing: -.02em !important;

  text-align: center !important;

  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Description */
body.page:not(.home):not(.page-template-page-categories) .srl-card-content-v2 p{
  width: 100% !important;
  max-width: 285px !important;

  height: 62px !important;
  min-height: 62px !important;
  max-height: 62px !important;

  margin: 0 auto 14px !important;

  color: #64748b !important;
  font-size: 14px !important;
  line-height: 1.45 !important;

  text-align: center !important;

  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Rating cố định trong card */
body.page:not(.home):not(.page-template-page-categories) .srl-card-content-v2 em{
  position: absolute !important;
  left: 50% !important;
  bottom: 58px !important;
  transform: translateX(-50%) !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 28px !important;
  padding: 5px 12px !important;
  margin: 0 !important;

  border-radius: 999px !important;
  background: #fff7e6 !important;
  border: 1px solid rgba(245,158,11,.32) !important;

  color: #f59e0b !important;
  font-size: 13px !important;
  font-style: normal !important;
  font-weight: 950 !important;
  line-height: 1 !important;

  white-space: nowrap !important;
  z-index: 5 !important;
}

/* View Review thật — không ẩn nữa */
body.page:not(.home):not(.page-template-page-categories) .srl-card-content-v2 strong{
  position: absolute !important;
  left: 50% !important;
  bottom: 18px !important;
  transform: translateX(-50%) !important;

  min-width: 118px !important;
  height: 34px !important;
  min-height: 34px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 0 16px !important;

  border-radius: 999px !important;
  border: 1px solid rgba(37,99,235,.18) !important;

  background: rgba(37,99,235,.10) !important;
  color: #2563eb !important;

  font-size: 13px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-decoration: none !important;

  opacity: 1 !important;
  visibility: visible !important;

  white-space: nowrap !important;
  overflow: visible !important;

  box-shadow: 0 8px 18px rgba(37,99,235,.08) !important;

  z-index: 6 !important;
}

body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2:hover .srl-card-content-v2 strong{
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 12px 24px rgba(37,99,235,.22) !important;
}

/* Tắt nút giả nếu còn sót từ block cũ */
body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2::after{
  content: none !important;
  display: none !important;
}

/* Pagination */
body.page:not(.home):not(.page-template-page-categories) .srl-programs-pagination{
  width: 100% !important;
  max-width: 1080px !important;

  margin: 38px auto 0 !important;
  padding: 0 !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
}

body.page:not(.home):not(.page-template-page-categories) .srl-program-page-btn,
body.page:not(.home):not(.page-template-page-categories) .srl-programs-pagination button{
  width: 48px !important;
  height: 48px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 14px !important;
  border: 1px solid rgba(37,99,235,.18) !important;

  background: rgba(255,255,255,.88) !important;
  color: #2563eb !important;

  font-size: 15px !important;
  font-weight: 950 !important;
  line-height: 1 !important;

  cursor: pointer !important;

  box-shadow:
    0 12px 28px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
}

body.page:not(.home):not(.page-template-page-categories) .srl-program-page-btn.is-active,
body.page:not(.home):not(.page-template-page-categories) .srl-programs-pagination button.is-active{
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 16px 34px rgba(37,99,235,.24) !important;
}

/* Giữ 3 card khi mở nửa màn hình */
@media(max-width: 980px){
  body.page:not(.home):not(.page-template-page-categories) .srl-programs-grid-v2{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 22px !important;
    max-width: 100% !important;
  }

  body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2{
    height: 365px !important;
    min-height: 365px !important;
    max-height: 365px !important;
  }
}

/* Chỉ nhỏ hơn 760px mới xuống 2 card */
@media(max-width: 760px){
  body.page:not(.home):not(.page-template-page-categories) .srl-programs-grid-v2{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Mobile */
@media(max-width: 520px){
  body.page:not(.home):not(.page-template-page-categories) .srl-programs-page-v2{
    width: calc(100% - 28px) !important;
    margin-top: 100px !important;
  }

  body.page:not(.home):not(.page-template-page-categories) .srl-programs-grid-v2{
    grid-template-columns: 1fr !important;
    max-width: 360px !important;
    gap: 22px !important;
  }
}

/* =========================================================
   PROGRAM CARD POLISH OVERRIDE
   Logo lớn hơn + card đầy hơn + giữ View Review
   DÁN CUỐI CÙNG TRONG STYLE.CSS
   ========================================================= */

body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2{
  height: 405px !important;
  min-height: 405px !important;
  max-height: 405px !important;

  padding: 24px 26px 96px !important;

  border-radius: 28px !important;
  background: rgba(255,255,255,.95) !important;

  box-shadow:
    0 20px 46px rgba(15,23,42,.07),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}

body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2 > img{
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  min-height: 72px !important;

  margin: 0 auto 18px !important;
  padding: 11px !important;

  border-radius: 20px !important;
  background: #ffffff !important;

  box-shadow:
    0 14px 30px rgba(15,23,42,.075),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}

body.page:not(.home):not(.page-template-page-categories) .srl-card-content-v2 span{
  margin-bottom: 14px !important;
  padding: 6px 13px !important;
  min-height: 27px !important;
  font-size: 12px !important;
}

body.page:not(.home):not(.page-template-page-categories) .srl-card-content-v2 h2{
  margin-bottom: 13px !important;
  font-size: 20px !important;
  line-height: 1.25 !important;
}

body.page:not(.home):not(.page-template-page-categories) .srl-card-content-v2 p{
  max-width: 305px !important;

  height: 70px !important;
  min-height: 70px !important;
  max-height: 70px !important;

  margin-bottom: 18px !important;

  font-size: 15px !important;
  line-height: 1.5 !important;
}

body.page:not(.home):not(.page-template-page-categories) .srl-card-content-v2 em{
  bottom: 60px !important;

  min-height: 31px !important;
  padding: 6px 15px !important;

  font-size: 14px !important;
}

body.page:not(.home):not(.page-template-page-categories) .srl-card-content-v2 strong{
  bottom: 20px !important;

  min-width: 130px !important;
  height: 37px !important;
  min-height: 37px !important;

  padding: 0 18px !important;

  border-radius: 999px !important;
  background: linear-gradient(180deg, #f8fbff, #e9f1ff) !important;

  font-size: 13px !important;
}

/* Giữ 3 card / hàng */
body.page:not(.home):not(.page-template-page-categories) .srl-programs-grid-v2{
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 30px !important;
  max-width: 1120px !important;
}

/* Nửa màn hình vẫn giữ 3 card */
@media(max-width: 980px){
  body.page:not(.home):not(.page-template-page-categories) .srl-programs-grid-v2{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }

  body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2{
    height: 405px !important;
    min-height: 405px !important;
    max-height: 405px !important;
  }
}

/* Nhỏ hơn mới xuống 2 card */
@media(max-width: 760px){
  body.page:not(.home):not(.page-template-page-categories) .srl-programs-grid-v2{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Mobile */
@media(max-width: 520px){
  body.page:not(.home):not(.page-template-page-categories) .srl-programs-grid-v2{
    grid-template-columns: 1fr !important;
  }
}

body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2{
  height: 370px !important;
  min-height: 370px !important;
  max-height: 370px !important;
  padding: 22px 24px 82px !important;
  border-radius: 28px !important;
}

body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2 > img{
  width: 66px !important;
  height: 66px !important;
  min-width: 66px !important;
  min-height: 66px !important;
  margin: 0 auto 16px !important;
  padding: 10px !important;
}

body.page:not(.home):not(.page-template-page-categories) .srl-card-content-v2 h2{
  margin-bottom: 12px !important;
  font-size: 18px !important;
  line-height: 1.25 !important;
}

body.page:not(.home):not(.page-template-page-categories) .srl-card-content-v2 p{
  max-width: 290px !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  margin-bottom: 14px !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

body.page:not(.home):not(.page-template-page-categories) .srl-card-content-v2 em{
  bottom: 54px !important;
}

body.page:not(.home):not(.page-template-page-categories) .srl-card-content-v2 strong{
  bottom: 16px !important;
  height: 36px !important;
  min-height: 36px !important;
}

/* Thu khoảng cách từ logo xuống phần chữ trong Programs card */
body.page-id-1028 .srl-program-card-v2 > img,
body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2 > img{
  margin: 0 auto 8px !important; /* giảm khoảng cách dưới logo */
}

body.page-id-1028 .srl-program-card-v2 .srl-card-content-v2,
body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2 .srl-card-content-v2{
  padding-top: 0 !important;
}

body.page-id-1028 .srl-program-card-v2 .srl-card-content-v2 h2,
body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2 .srl-card-content-v2 h2{
  margin-top: 8px !important;
}

body.page-id-1028 .srl-program-card-v2 .srl-card-content-v2 .srl-category-badge,
body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2 .srl-card-content-v2 .srl-category-badge,
body.page-id-1028 .srl-program-card-v2 .srl-card-content-v2 span:first-child,
body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2 .srl-card-content-v2 span:first-child{
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}

/* =========================================================
   FIX KHOẢNG CÁCH LOGO -> CHỮ PROGRAM CARD
   Kéo badge/title/desc lên gần logo hơn
   ========================================================= */

body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2 > img + .srl-card-content-v2{
  margin-top: -1px !important;
}

body.page:not(.home):not(.page-template-page-categories) .srl-card-content-v2 span{
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

body.page:not(.home):not(.page-template-page-categories) .srl-card-content-v2 h2{
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

body.page:not(.home):not(.page-template-page-categories) .srl-card-content-v2 p{
  margin-top: 0 !important;
}

/* =========================================================
   PROGRAM CARD COMPACT FINAL
   Card ngắn lại + nội dung gần nhau hơn
   DÁN CUỐI CÙNG TRONG STYLE.CSS
   ========================================================= */

body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2{
  height: 340px !important;
  min-height: 340px !important;
  max-height: 340px !important;

  padding: 20px 22px 78px !important;

  position: relative !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;

  overflow: hidden !important;
}

/* Logo vừa phải */
body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2 > img{
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;

  margin: 0 auto 10px !important;
  padding: 9px !important;
}

/* Content kéo lên sát logo */
body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2 .srl-card-content-v2{
  margin-top: 0 !important;
  padding-top: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Badge */
body.page:not(.home):not(.page-template-page-categories) .srl-card-content-v2 span{
  margin: 0 0 9px !important;
  min-height: 24px !important;
  padding: 5px 11px !important;
}

/* Title */
body.page:not(.home):not(.page-template-page-categories) .srl-card-content-v2 h2{
  margin: 0 0 8px !important;
  font-size: 18px !important;
  line-height: 1.22 !important;
}

/* Description */
body.page:not(.home):not(.page-template-page-categories) .srl-card-content-v2 p{
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;

  margin: 0 auto 8px !important;

  font-size: 14px !important;
  line-height: 1.4 !important;
}

/* Rating kéo lên gần mô tả hơn */
body.page:not(.home):not(.page-template-page-categories) .srl-card-content-v2 em{
  position: absolute !important;
  left: 50% !important;
  bottom: 48px !important;
  transform: translateX(-50%) !important;

  margin: 0 !important;
}

/* View Review */
body.page:not(.home):not(.page-template-page-categories) .srl-card-content-v2 strong{
  position: absolute !important;
  left: 50% !important;
  bottom: 13px !important;
  transform: translateX(-50%) !important;

  height: 34px !important;
  min-height: 34px !important;
  min-width: 122px !important;

  margin: 0 !important;
}

/* Giữ 3 card / hàng */
body.page:not(.home):not(.page-template-page-categories) .srl-programs-grid-v2{
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 28px !important;
}

/* =========================================================
   PROGRAM CARD COMPACT REAL FINAL
   Bỏ ghim đáy rating/nút + thu gọn khoảng trắng
   DÁN CUỐI CÙNG TRONG STYLE.CSS
   ========================================================= */

body.page:not(.home):not(.page-template-page-categories) .srl-programs-grid-v2{
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 28px !important;
  max-width: 1080px !important;
}

/* Card ngắn lại thật */
body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2{
  height: auto !important;
  min-height: 310px !important;
  max-height: none !important;

  padding: 22px 22px 22px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;

  overflow: hidden !important;
}

/* Logo */
body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2 > img{
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;

  margin: 0 auto 10px !important;
  padding: 9px !important;
}

/* Content */
body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2 .srl-card-content-v2{
  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;

  overflow: visible !important;
}

/* Badge */
body.page:not(.home):not(.page-template-page-categories) .srl-card-content-v2 span{
  margin: 0 0 8px !important;
}

/* Title */
body.page:not(.home):not(.page-template-page-categories) .srl-card-content-v2 h2{
  margin: 0 0 8px !important;

  font-size: 18px !important;
  line-height: 1.22 !important;
}

/* Description: giảm chiều cao mô tả */
body.page:not(.home):not(.page-template-page-categories) .srl-card-content-v2 p{
  height: auto !important;
  min-height: 0 !important;
  max-height: 44px !important;

  margin: 0 auto 12px !important;

  font-size: 14px !important;
  line-height: 1.4 !important;

  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Rating: bỏ position absolute để nó nằm ngay dưới mô tả */
body.page:not(.home):not(.page-template-page-categories) .srl-card-content-v2 em{
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;

  margin: 0 auto 8px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* View Review: bỏ position absolute để nằm ngay dưới rating */
body.page:not(.home):not(.page-template-page-categories) .srl-card-content-v2 strong{
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;

  margin: 0 auto !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-width: 122px !important;
  height: 34px !important;
  min-height: 34px !important;
}

/* Nếu còn nút giả từ đoạn cũ thì tắt */
body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2::after{
  content: none !important;
  display: none !important;
}

.srl-page-dots {
  min-width: 34px !important;
  height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 900 !important;
  color: #64748b !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

/* =========================================================
   SRL — Popular Categories Section
   ========================================================= */

body.home .srl-popular-categories{
  padding: 70px 0 36px !important;
  background:
    radial-gradient(circle at 15% 20%, rgba(37,99,235,.08), transparent 32%),
    radial-gradient(circle at 85% 18%, rgba(20,184,166,.08), transparent 30%),
    rgba(248,251,255,.78) !important;
  position: relative !important;
  z-index: 3 !important;
}

body.home .srl-section-head{
  text-align: center !important;
  margin-bottom: 30px !important;
}

body.home .srl-section-head span{
  display: inline-flex !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  background: var(--srl-blue-soft) !important;
  color: var(--srl-blue) !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

body.home .srl-section-head h2{
  margin: 14px 0 8px !important;
  color: var(--srl-dark) !important;
  font-size: clamp(30px, 4vw, 44px) !important;
  line-height: 1.1 !important;
  letter-spacing: -.04em !important;
  font-weight: 950 !important;
}

body.home .srl-section-head p{
  max-width: 680px !important;
  margin: 0 auto !important;
  color: var(--srl-muted) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}

body.home .srl-category-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

body.home .srl-category-card{
  display: block !important;
  min-height: 190px !important;
  padding: 26px !important;
  border-radius: 26px !important;
  background: rgba(255,255,255,.9) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: 0 18px 45px rgba(15,23,42,.06) !important;
  text-decoration: none !important;
  transition: all .22s ease !important;
}

body.home .srl-category-card:hover{
  transform: translateY(-6px) !important;
  border-color: rgba(37,99,235,.28) !important;
  box-shadow: 0 28px 70px rgba(37,99,235,.14) !important;
}

body.home .srl-category-card strong{
  display: block !important;
  margin-bottom: 12px !important;
  color: var(--srl-dark) !important;
  font-size: 22px !important;
  font-weight: 950 !important;
}

body.home .srl-category-card span{
  display: block !important;
  color: var(--srl-muted) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
}

body.home .srl-category-card em{
  display: inline-flex !important;
  margin-top: 18px !important;
  color: var(--srl-blue) !important;
  font-style: normal !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

@media (max-width: 980px){
  body.home .srl-category-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 620px){
  body.home .srl-category-grid{
    grid-template-columns: 1fr !important;
  }
}

body.home .srl-program-row{
  min-height: 132px !important;
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}

body.home .srl-logo,
body.home .srl-logo-img{
  box-shadow: 0 14px 30px rgba(15,23,42,.10) !important;
  background: #fff !important;
}

body.home .srl-program-row .srl-meta{
  height: 74px !important;
}

body.home .srl-brand p{
  line-height: 1.45 !important;
}

body.home .srl-program-row{
  min-height: 132px !important;
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}

body.home .srl-logo,
body.home .srl-logo-img{
  box-shadow: 0 14px 30px rgba(15,23,42,.10) !important;
  background: #fff !important;
}

body.home .srl-program-row .srl-meta{
  height: 74px !important;
}

body.home .srl-brand p{
  line-height: 1.45 !important;
}

body.home .srl-badges em:nth-child(2){
  background: rgba(255,138,29,.12) !important;
  color: #f97316 !important;
  border: 1px solid rgba(249,115,22,.16) !important;
}

body.home .srl-badges em:nth-child(2)::before{
  content: "★ ";
}

/* SRL Trust Indicators */
body.home .srl-trust-row{
  display: flex !important;
  gap: 7px !important;
  flex-wrap: wrap !important;
  margin-top: 9px !important;
}

body.home .srl-trust-row span{
  display: inline-flex !important;
  align-items: center !important;
  min-height: 24px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  background: rgba(15,23,42,.04) !important;
  color: #64748b !important;
  border: 1px solid rgba(15,23,42,.06) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

body.home .srl-trust-row span::before{
  content: "✓";
  margin-right: 5px;
  color: #16a34a;
  font-weight: 950;
}

body.home .srl-program-row:hover .srl-trust-row span{
  background: rgba(37,99,235,.07) !important;
  color: #2563eb !important;
  border-color: rgba(37,99,235,.12) !important;
}

body.home .srl-trust-row{
  flex-wrap: nowrap !important;
  gap: 5px !important;
  margin-top: 8px !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

body.home .srl-trust-row span{
  min-height: 22px !important;
  padding: 0 7px !important;
  font-size: 10.5px !important;
  flex: 0 0 auto !important;
}

body.home .srl-brand p{
  max-width: 340px !important;
}

body.home .srl-trust-row{
  flex-wrap: wrap !important;
  overflow: visible !important;
  gap: 5px !important;
  max-width: 340px !important;
}

body.home .srl-trust-row span{
  min-height: 21px !important;
  padding: 0 6px !important;
  font-size: 10px !important;
}

body.home .srl-brand p{
  max-width: 360px !important;
}

body.home .srl-program-row{
  grid-template-columns: minmax(360px,1.15fr) 108px 108px 108px 120px 112px !important;
  gap: 12px !important;
}

body.home .srl-brand p{
  max-width: 310px !important;
}

body.home .srl-trust-row{
  max-width: 310px !important;
}

body.home .srl-program-row .srl-meta{
  height: 76px !important;
}

body.home .srl-action-buttons{
  width: 112px !important;
}

/* =========================================================
   SRL Categories Page - Hero
   ========================================================= */

.srl-categories-page{
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 15%, rgba(37,99,235,.12), transparent 28%),
    radial-gradient(circle at 85% 15%, rgba(255,138,29,.10), transparent 30%),
    linear-gradient(135deg,#f7fbff 0%,#f8fbff 50%,#fff7f2 100%);
}

.srl-cat-hero{
  padding: 90px 20px 70px;
}

.srl-cat-hero .srl-wrap{
  max-width: 1180px;
  margin: 0 auto;
}

.srl-cat-hero-inner{
  max-width: 780px;
  padding: 52px;
  border-radius: 34px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 35px 90px rgba(15,23,42,.08);
  backdrop-filter: blur(18px);
}

.srl-cat-kicker{
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: rgba(37,99,235,.08);
  color: #2563eb;
  font-size: 13px;
  font-weight: 900;
}

.srl-cat-kicker::before{
  content: "";
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: #22c55e;
}

.srl-cat-hero h1{
  margin: 0 0 16px;
  max-width: 720px;
  color: #0f172a;
  font-size: clamp(42px,5vw,72px);
  line-height: .96;
  letter-spacing: -2.5px;
  font-weight: 950;
}

.srl-cat-hero p{
  max-width: 680px;
  margin: 0;
  color: #64748b;
  font-size: 18px;
  line-height: 1.8;
  font-weight: 600;
}

.srl-cat-hero-actions{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.srl-cat-primary-btn,
.srl-cat-secondary-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 950;
  text-decoration: none !important;
}

.srl-cat-primary-btn{
  color: #fff !important;
  background: #0f172a;
  box-shadow: 0 18px 38px rgba(15,23,42,.18);
}

.srl-cat-secondary-btn{
  color: #2563eb !important;
  background: #fff;
  border: 1px solid rgba(37,99,235,.16);
}

.srl-cat-stats{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 14px;
  margin-top: 34px;
}

.srl-cat-stats div{
  padding: 18px;
  border-radius: 22px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(15,23,42,.07);
}

.srl-cat-stats strong{
  display: block;
  color: #0f172a;
  font-size: 24px;
  font-weight: 950;
}

.srl-cat-stats span{
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}

@media (max-width: 760px){
  .srl-cat-hero{
    padding: 60px 16px 46px;
  }

  .srl-cat-hero-inner{
    padding: 30px;
    border-radius: 26px;
  }

  .srl-cat-stats{
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   SRL Categories Page - Search
   ========================================================= */

.srl-cat-search-section{
  margin-top: -30px;
  padding: 0 20px 70px;
}

.srl-cat-search-box{
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  gap: 10px;
  padding: 10px;
  border-radius: 24px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 24px 65px rgba(15,23,42,.08);
}

.srl-cat-search-box input{
  flex: 1;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  padding: 0 16px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

.srl-cat-search-box button{
  border: 0;
  min-height: 48px;
  padding: 0 26px;
  border-radius: 17px;
  background: #2563eb;
  color: #fff;
  font-weight: 950;
  cursor: pointer;
}

.srl-cat-quick-pills{
  max-width: 900px;
  margin: 20px auto 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.srl-cat-quick-pills a{
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(37,99,235,.14);
  color: #2563eb !important;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none !important;
}

.srl-cat-search-section{
  margin-top: -18px !important;
  padding-bottom: 80px !important;
}

.srl-cat-search-box{
  max-width: 860px !important;
}

.srl-cat-quick-pills{
  max-width: 980px !important;
  gap: 12px !important;
}

.srl-cat-quick-pills a{
  min-width: 112px !important;
  text-align: center !important;
}

/* Fix Categories page full width alignment */
.srl-categories-page .srl-wrap{
  max-width: 1180px !important;
  width: 100% !important;
  margin: 0 auto !important;
}

.srl-categories-page .srl-cat-hero-inner{
  margin: 0 auto !important;
}

.srl-cat-search-section{
  width: 100% !important;
}

/* Force Categories page to full width */
body.page-template-page-categories,
body.page-template-page-categories .site,
body.page-template-page-categories .site-content,
body.page-template-page-categories .ast-container,
body.page-template-page-categories .content-area,
body.page-template-page-categories .site-main,
body.page-template-page-categories article,
body.page-template-page-categories .entry-content{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.page-template-page-categories .srl-categories-page{
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
}

/* =========================================================
   CATEGORIES PAGE REAL FULL WIDTH FIX
   ========================================================= */

body.page-template-page-categories-php,
body.page-template-page-categories-php #page,
body.page-template-page-categories-php #content,
body.page-template-page-categories-php .site,
body.page-template-page-categories-php .site-content,
body.page-template-page-categories-php .ast-container,
body.page-template-page-categories-php #primary,
body.page-template-page-categories-php .content-area,
body.page-template-page-categories-php .site-main,
body.page-template-page-categories-php article,
body.page-template-page-categories-php .entry-content{
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.page-template-page-categories-php .srl-categories-page{
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

body.page-template-page-categories-php .srl-cat-hero,
body.page-template-page-categories-php .srl-cat-search-section{
  width: 100vw !important;
  max-width: 100vw !important;
}

body.page-template-page-categories-php .srl-cat-hero .srl-wrap,
body.page-template-page-categories-php .srl-cat-search-section .srl-wrap{
  width: min(1180px, calc(100vw - 40px)) !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.page-template-page-categories-php .srl-cat-hero-inner{
  margin-left: auto !important;
  margin-right: auto !important;
}
/* HARD FIX CATEGORIES FULL WIDTH */
.srl-categories-page{
  width: 100vw !important;
  max-width: 100vw !important;
  min-height: 100vh !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
}

.srl-categories-page .srl-cat-hero,
.srl-categories-page .srl-cat-search-section{
  width: 100vw !important;
  max-width: 100vw !important;
}

.srl-categories-page .srl-wrap{
  width: min(1180px, calc(100vw - 40px)) !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
}

.srl-categories-page .srl-cat-hero-inner{
  margin: 0 auto !important;
}
/* FINAL CATEGORIES HERO SIZE FIX */
.srl-categories-page .srl-cat-hero-inner{
  max-width: 1180px !important;
  width: 100% !important;
  margin: 0 auto !important;
}

/* SRL Categories - Cards */
.srl-cat-grid-section{
  padding: 20px 20px 90px !important;
}

.srl-cat-section-head{
  text-align: center !important;
  margin: 0 auto 28px !important;
}

.srl-cat-section-head span{
  color: #2563eb !important;
  font-weight: 950 !important;
  font-size: 13px !important;
}

.srl-cat-section-head h2{
  margin: 10px 0 !important;
  color: #0f172a !important;
  font-size: 42px !important;
  line-height: 1.08 !important;
  letter-spacing: -1.5px !important;
  font-weight: 950 !important;
}

.srl-cat-section-head p{
  margin: 0 auto !important;
  max-width: 660px !important;
  color: #64748b !important;
  font-weight: 650 !important;
}

.srl-cat-grid{
  display: grid !important;
  grid-template-columns: repeat(3,1fr) !important;
  gap: 18px !important;
}

.srl-cat-card{
  min-height: 230px !important;
  padding: 28px !important;
  border-radius: 28px !important;
  background: rgba(255,255,255,.86) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: 0 24px 65px rgba(15,23,42,.07) !important;
  text-decoration: none !important;
  transition: .2s ease !important;
}

.srl-cat-card:hover{
  transform: translateY(-5px) !important;
  border-color: rgba(37,99,235,.22) !important;
  box-shadow: 0 32px 78px rgba(37,99,235,.13) !important;
}

.srl-cat-card strong{
  display: block !important;
  color: #0f172a !important;
  font-size: 24px !important;
  font-weight: 950 !important;
  margin-bottom: 12px !important;
}

.srl-cat-card p{
  color: #64748b !important;
  line-height: 1.7 !important;
  font-weight: 650 !important;
}

.srl-cat-card em{
  display: inline-flex !important;
  margin-top: 18px !important;
  color: #2563eb !important;
  font-style: normal !important;
  font-weight: 950 !important;
}

@media(max-width: 900px){
  .srl-cat-grid{
    grid-template-columns: 1fr !important;
  }
}

/* SRL Categories - Premium Cards */
.srl-cat-grid-premium{
  gap: 22px !important;
}

.srl-cat-card.premium{
  position: relative !important;
  overflow: hidden !important;
  min-height: 310px !important;
  padding: 28px !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 90% 0%, rgba(37,99,235,.10), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.82)) !important;
}

.srl-cat-card.premium::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  border: 1px solid rgba(37,99,235,.12) !important;
  pointer-events: none !important;
}

.srl-cat-icon{
  width: 54px !important;
  height: 54px !important;
  border-radius: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f1f6ff !important;
  font-size: 26px !important;
  margin-bottom: 18px !important;
}

.srl-cat-top{
  display: flex !important;
  justify-content: space-between !important;
  gap: 14px !important;
  align-items: flex-start !important;
  margin-bottom: 12px !important;
}

.srl-cat-top strong{
  margin: 0 !important;
}

.srl-cat-top span{
  display: inline-flex !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  background: #eef4ff !important;
  color: #2563eb !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

.srl-cat-mini-list{
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-top: 18px !important;
}

.srl-cat-mini-list em{
  font-style: normal !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  background: rgba(15,23,42,.04) !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

.srl-cat-card.premium b{
  position: absolute !important;
  left: 28px !important;
  bottom: 26px !important;
  color: #2563eb !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

.srl-cat-card.premium:hover .srl-cat-icon{
  transform: scale(1.06) rotate(-3deg) !important;
}

.srl-cat-card.premium:hover b{
  transform: translateX(5px) !important;
}

/* FIX Categories card mini tags spacing */
.srl-cat-card.premium .srl-cat-mini-list{
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin: 18px 0 42px !important;
}

.srl-cat-card.premium .srl-cat-mini-list em{
  display: inline-flex !important;
  margin: 0 !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  background: rgba(37,99,235,.08) !important;
  color: #2563eb !important;
  font-style: normal !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

/* SRL Categories - Featured Reviews */
.srl-cat-featured-section{
  padding: 20px 20px 100px !important;
}

.srl-featured-review-grid{
  display: grid !important;
  grid-template-columns: repeat(2,1fr) !important;
  gap: 18px !important;
  max-width: 980px !important;
  margin: 0 auto !important;
}

.srl-featured-review-card{
  display: flex !important;
  justify-content: space-between !important;
  gap: 22px !important;
  min-height: 180px !important;
  padding: 28px !important;
  border-radius: 28px !important;
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: 0 24px 65px rgba(15,23,42,.06) !important;
  text-decoration: none !important;
  transition: .2s ease !important;
}

.srl-featured-review-card:hover{
  transform: translateY(-4px) !important;
  box-shadow: 0 30px 75px rgba(37,99,235,.12) !important;
}

.srl-featured-review-card span{
  display: inline-flex !important;
  margin-bottom: 10px !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  background: rgba(37,99,235,.08) !important;
  color: #2563eb !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

.srl-featured-review-card strong{
  display: block !important;
  color: #0f172a !important;
  font-size: 22px !important;
  font-weight: 950 !important;
  margin-bottom: 10px !important;
}

.srl-featured-review-card p{
  margin: 0 !important;
  color: #64748b !important;
  line-height: 1.65 !important;
  font-weight: 650 !important;
}

.srl-featured-review-card em{
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 72px !important;
  height: 44px !important;
  border-radius: 999px !important;
  background: #eef4ff !important;
  color: #2563eb !important;
  font-style: normal !important;
  font-weight: 950 !important;
}

@media(max-width: 900px){
  .srl-featured-review-grid{
    grid-template-columns: 1fr !important;
  }
}

/* SRL Categories - All Categories */
.srl-all-categories-section{
  padding: 10px 20px 100px !important;
}

.srl-all-cat-list{
  max-width: 1080px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 12px !important;
}

.srl-all-cat-list a{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.86) !important;
  border: 1px solid rgba(37,99,235,.14) !important;
  color: #2563eb !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  text-decoration: none !important;
  box-shadow: 0 18px 42px rgba(15,23,42,.05) !important;
}

.srl-all-cat-list a:hover{
  transform: translateY(-3px) !important;
  background: #2563eb !important;
  color: #fff !important;
}

/* SRL Categories - FAQ */
.srl-cat-faq-section{
  padding: 10px 20px 120px !important;
}

.srl-cat-faq-list{
  max-width: 900px !important;
  margin: 0 auto !important;
  display: grid !important;
  gap: 16px !important;
}

.srl-cat-faq-item{
  padding: 26px 28px !important;
  border-radius: 26px !important;
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: 0 22px 60px rgba(15,23,42,.05) !important;
}

.srl-cat-faq-item h3{
  margin: 0 0 10px !important;
  color: #0f172a !important;
  font-size: 20px !important;
  font-weight: 950 !important;
}

.srl-cat-faq-item p{
  margin: 0 !important;
  color: #64748b !important;
  line-height: 1.7 !important;
  font-weight: 650 !important;
}

/* SRL Categories - CTA */
.srl-cat-cta-section{
  padding: 0 20px 130px !important;
}

.srl-cat-cta-box{
  max-width: 980px !important;
  margin: 0 auto !important;
  padding: 54px !important;
  border-radius: 34px !important;
  text-align: center !important;
  background:
    radial-gradient(circle at 20% 20%, rgba(37,99,235,.14), transparent 32%),
    radial-gradient(circle at 80% 0%, rgba(255,138,29,.13), transparent 34%),
    rgba(255,255,255,.9) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: 0 34px 90px rgba(15,23,42,.08) !important;
}

.srl-cat-cta-box span{
  color: #2563eb !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

.srl-cat-cta-box h2{
  margin: 12px auto !important;
  max-width: 760px !important;
  color: #0f172a !important;
  font-size: 42px !important;
  line-height: 1.08 !important;
  letter-spacing: -1.4px !important;
  font-weight: 950 !important;
}

.srl-cat-cta-box p{
  max-width: 680px !important;
  margin: 0 auto !important;
  color: #64748b !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
  font-weight: 650 !important;
}

.srl-cat-cta-actions{
  display: flex !important;
  justify-content: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  margin-top: 28px !important;
}

/* SRL Categories - Bottom Note */
.srl-cat-footer-note{
  padding: 0 20px 70px !important;
  text-align: center !important;
}

.srl-cat-footer-note p{
  max-width: 760px !important;
  margin: 0 auto !important;
  color: #64748b !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  font-weight: 650 !important;
}

/* FIX: hide filtered programs */
.srl-hidden-program{
  display: none !important;
}

/* SRL Categories - Autocomplete */
.srl-autocomplete-wrap{
  position: relative !important;
}

.srl-search-suggest{
  display: none;
  position: absolute !important;
  left: 16px !important;
  right: 120px !important;
  top: calc(100% + 10px) !important;
  z-index: 50 !important;
  padding: 10px !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: 0 24px 70px rgba(15,23,42,.14) !important;
}

.srl-search-suggest a{
  display: block !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  color: #0f172a !important;
  font-weight: 850 !important;
  text-decoration: none !important;
}

.srl-search-suggest a:hover{
  background: #eef4ff !important;
  color: #2563eb !important;
}

/* SRL sticky clean header */
.site-header,
#masthead{
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

.srl-program-result-note{
  max-width: 980px !important;
  margin: 0 auto 26px !important;
  padding: 18px 22px !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.82) !important;
  border: 1px solid rgba(37,99,235,.12) !important;
  box-shadow: 0 18px 50px rgba(15,23,42,.08) !important;
  display: flex !important;
  justify-content: space-between !important;
  gap: 12px !important;
  color: #0f172a !important;
}

.srl-program-result-note strong{
  font-weight: 950 !important;
}

.srl-program-result-note span{
  color: #64748b !important;
  font-weight: 800 !important;
}

.srl-clear-search{
  padding: 8px 14px !important;
  border-radius: 999px !important;
  background: #eef4ff !important;
  color: #2563eb !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.srl-clear-search:hover{
  background: #2563eb !important;
  color: #fff !important;
}

.srl-search-mark{
  background: #fff3b0 !important;
  color: #0f172a !important;
  padding: 0 4px !important;
  border-radius: 6px !important;
}

.srl-programs-searchbar{
  max-width: 980px !important;
  margin: 34px auto 28px !important;
  padding: 10px !important;
  display: flex !important;
  gap: 10px !important;
  background: rgba(255,255,255,.82) !important;
  border: 1px solid rgba(37,99,235,.12) !important;
  border-radius: 24px !important;
  box-shadow: 0 18px 50px rgba(15,23,42,.08) !important;
}

.srl-programs-searchbar input{
  flex: 1 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  padding: 14px 18px !important;
  font-weight: 800 !important;
}

.srl-programs-searchbar button{
  border: 0 !important;
  border-radius: 18px !important;
  padding: 0 26px !important;
  background: #2563eb !important;
  color: #fff !important;
  font-weight: 950 !important;
}

.srl-programs-searchbar{
  position: relative !important;
}

.srl-programs-suggestions{
  display: none;
  position: absolute !important;
  left: 18px !important;
  right: 120px !important;
  top: calc(100% + 10px) !important;
  z-index: 99999 !important;
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(37,99,235,.14) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 50px rgba(15,23,42,.12) !important;
  overflow: hidden !important;
}

.srl-program-suggest-item{
  padding: 13px 18px !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  cursor: pointer !important;
}

.srl-program-suggest-item:hover,
.srl-program-suggest-item.is-active{
  background: #eef4ff !important;
  color: #2563eb !important;
}

.srl-search-suggest{
  display: none;
  position: absolute !important;
  left: 18px !important;
  right: 120px !important;
  top: calc(100% + 10px) !important;
  z-index: 99999 !important;
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(37,99,235,.14) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 50px rgba(15,23,42,.12) !important;
  overflow: hidden !important;
}

.srl-cat-suggest-item{
  padding: 13px 18px !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  cursor: pointer !important;
}

.srl-cat-suggest-item:hover,
.srl-cat-suggest-item.is-active{
  background: #eef4ff !important;
  color: #2563eb !important;
}

.srl-cat-suggest-item{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.srl-cat-suggest-item small{
  font-size: 11px !important;
  font-weight: 900 !important;
  color: #2563eb !important;
  background: #eef4ff !important;
  padding: 5px 9px !important;
  border-radius: 999px !important;
}

.srl-cat-search-mark{
  background: #fff3b0 !important;
  color: #0f172a !important;
  padding: 0 4px !important;
  border-radius: 6px !important;
}

.srl-cat-search-mark{
  background: #eaf2ff !important;
  color: #2563eb !important;
  padding: 2px 5px !important;
  border-radius: 7px !important;
  font-weight: 950 !important;
}

.srl-cat-suggest-item small{
  min-width: 72px !important;
  text-align: center !important;
}

.srl-program-suggest-item{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.srl-program-suggest-item small{
  font-size: 11px !important;
  font-weight: 900 !important;
  color: #2563eb !important;
  background: #eef4ff !important;
  padding: 5px 9px !important;
  border-radius: 999px !important;
}

.srl-program-suggest-item.is-active,
.srl-program-suggest-item:hover{
  background: #eef4ff !important;
  color: #2563eb !important;
}

.srl-search-mark{
  background: #fff3b0 !important;
  color: #0f172a !important;
  padding: 0 5px !important;
  border-radius: 6px !important;
  font-weight: 950 !important;
}

.srl-program-suggest-right{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.srl-remove-recent{
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #eef3ff !important;
  color: #2563eb !important;
  font-size: 13px !important;
  line-height: 18px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

.srl-remove-recent:hover{
  background: #2563eb !important;
  color: #fff !important;
}

.srl-program-suggest-item .srl-remove-recent{
  width: 18px !important;
  max-width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 18px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

.srl-program-suggest-right{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:8px !important;
}

.srl-remove-recent{
    order:2 !important;      /* X nằm sau */
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:16px !important;
    height:16px !important;
    min-width:16px !important;
    min-height:16px !important;

    padding:0 !important;
    margin:0 !important;

    border:none !important;
    border-radius:50% !important;

    background:#2563eb !important;
    color:#fff !important;

    font-size:10px !important;
    line-height:1 !important;
    font-weight:700 !important;

    vertical-align:middle !important;
    transform:translateY(-1px) !important;
    cursor:pointer !important;
}

.srl-program-suggest-badge{
    order:1 !important;      /* Recent đứng trước */
}

.srl-remove-recent{
  position: relative !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #2563eb !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: none !important;
}

.srl-remove-recent::before{
  content: "×" !important;
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 16px !important;
  transform: translateY(-3px) !important;
}

/* FINAL FIX X RECENT - center tuyệt đối */
.srl-program-suggest-right{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 7px !important;
}

.srl-program-suggest-right small{
  order: 1 !important;
}

.srl-program-suggest-right .srl-remove-recent{
  order: 2 !important;
  appearance: none !important;
  -webkit-appearance: none !important;

  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  min-height: 15px !important;
  max-width: 15px !important;
  max-height: 15px !important;

  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;

  background: #2563eb !important;
  color: #fff !important;

  display: grid !important;
  place-items: center !important;

  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
  overflow: hidden !important;

  transform: none !important;
  vertical-align: middle !important;
  cursor: pointer !important;
}

.srl-program-suggest-right .srl-remove-recent::before{
  content: "×" !important;
  text-indent: 0 !important;

  display: block !important;
  width: 15px !important;
  height: 15px !important;

  color: #fff !important;
  font-size: 11px !important;
  line-height: 13px !important;
  font-weight: 900 !important;
  text-align: center !important;

  transform: translateY(-1px) !important;
}

/* FINAL REAL CENTER X INSIDE BLUE CIRCLE */
.srl-program-suggest-right .srl-remove-recent{
  position: relative !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #2563eb !important;
  overflow: hidden !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

.srl-program-suggest-right .srl-remove-recent::before{
  content: "×" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: auto !important;
  height: auto !important;
  transform: translate(-45%, -54%) !important;
  color: #fff !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

/* FINAL FIX - Recent remove X căn giữa bằng 2 nét, không dùng ký tự */
.srl-program-suggest-right .srl-remove-recent{
  position: relative !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #2563eb !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
}

.srl-program-suggest-right .srl-remove-recent::before,
.srl-program-suggest-right .srl-remove-recent::after{
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 8px !important;
  height: 2px !important;
  background: #fff !important;
  border-radius: 99px !important;
  transform-origin: center !important;
}

.srl-program-suggest-right .srl-remove-recent::before{
  transform: translate(-50%, -50%) rotate(45deg) !important;
}

.srl-program-suggest-right .srl-remove-recent::after{
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}

.srl-suggest-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 18px 8px;
    border-bottom:1px solid #eef2f7;
    margin-bottom:6px;
}

.srl-suggest-header span{
    font-size:12px;
    font-weight:700;
    color:#64748b;
}

.srl-clear-recent{
    border:none;
    background:none;
    color:#2563eb;
    font-size:12px;
    font-weight:700;
    cursor:pointer;
}

.srl-cat-clear-recent{
  border:0 !important;
  background:transparent !important;
  color:#2563eb !important;
  font-size:12px !important;
  font-weight:900 !important;
  cursor:pointer !important;
  padding:0 !important;
  width:auto !important;
  min-width:auto !important;
  height:auto !important;
  min-height:auto !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

.srl-suggest-header .srl-cat-clear-recent{
  background:transparent !important;
}

.srl-clear-recent{
  border:0 !important;
  background:transparent !important;
  color:#2563eb !important;
  font-size:12px !important;
  font-weight:900 !important;
  cursor:pointer !important;
  padding:0 !important;
  width:auto !important;
  min-width:auto !important;
  height:auto !important;
  min-height:auto !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

.srl-suggest-header .srl-clear-recent{
  background:transparent !important;
}

.srl-suggest-header .srl-clear-recent,
.srl-suggest-header .srl-cat-clear-recent{
  display:inline-block !important;
  opacity:1 !important;
  visibility:visible !important;
  color:#2563eb !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  width:auto !important;
  min-width:0 !important;
  height:auto !important;
  min-height:0 !important;
  padding:0 !important;
  margin-left:auto !important;
  font-size:12px !important;
  font-weight:900 !important;
  line-height:1 !important;
  text-indent:0 !important;
  overflow:visible !important;
}

/* ==========================================
   MOBILE SEARCH (Programs + Categories)
========================================== */

@media (max-width: 991px){

    /* Search box */
    .srl-search-wrap,
    .srl-category-search-wrap{
        width:100% !important;
        margin:0 auto 20px !important;
    }

    .srl-search-input,
    .srl-category-search-input{
        width:100% !important;
        padding-right:115px !important;
        font-size:16px !important;
    }

    .srl-search-btn,
    .srl-category-search-btn{
        width:100px !important;
    }

    /* Dropdown */
    .srl-program-suggest,
    .srl-cat-suggest{
        width:100% !important;
        left:0 !important;
        right:0 !important;
        max-height:420px !important;
        overflow-y:auto !important;
        border-radius:18px !important;
    }

    /* Item */
    .srl-program-suggest-item,
    .srl-cat-suggest-item{
        padding:14px 18px !important;
        min-height:58px !important;
    }

    /* Right badge */
    .srl-program-suggest-right{
        gap:8px !important;
    }

    /* Badge */
    .srl-program-suggest-right small{
        font-size:11px !important;
        padding:5px 10px !important;
    }

    /* Remove X */
    .srl-remove-recent{
        width:18px !important;
        height:18px !important;
        min-width:18px !important;
        font-size:12px !important;
    }

    /* Header */
    .srl-suggest-header{
        padding:12px 16px 8px !important;
    }

}

/* Smooth dropdown animation - Programs + Categories */
.srl-programs-suggestions,
.srl-cat-suggest,
.srl-program-suggest{
  animation: srlDropdownFade .18s ease-out !important;
  transform-origin: top center !important;
}

@keyframes srlDropdownFade{
  from{
    opacity:0;
    transform:translateY(-6px) scale(.98);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

.srl-program-suggest-item,
.srl-cat-suggest-item{
  transition:background .16s ease, color .16s ease, transform .16s ease !important;
}

.srl-program-suggest-item:hover,
.srl-program-suggest-item.is-active,
.srl-cat-suggest-item:hover,
.srl-cat-suggest-item.is-active{
  transform:translateX(2px) !important;
}

.srl-no-suggest{
  padding:18px 20px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:4px !important;
}

.srl-no-suggest strong{
  font-size:14px !important;
  color:#0f172a !important;
}

.srl-no-suggest span{
  font-size:12px !important;
  color:#64748b !important;
}

/* Result bar spacing fix */
.srl-program-result-note{
  position: relative !important;
  z-index: 1 !important;
  margin: 26px auto 26px !important;
}

.srl-programs-searchbar{
  position: relative !important;
  z-index: 20 !important;
  margin-bottom: 18px !important;
}

.srl-programs-suggestions{
  z-index: 999 !important;
}

.srl-programs-grid-v2{
  position: relative !important;
  z-index: 0 !important;
}

.srl-cat-suggest-item .srl-search-mark{
  background:#fff3b0 !important;
  color:#0f172a !important;
  padding:0 4px !important;
  border-radius:6px !important;
  font-weight:950 !important;
}

.srl-cat-suggest-item .srl-cat-search-mark,
.srl-cat-suggest-item mark.srl-cat-search-mark{
  background:#fff3b0 !important;
  color:#0f172a !important;
  padding:0 5px !important;
  border-radius:6px !important;
  font-weight:950 !important;
}

/* ==========================================
   REVIEW CARD HOVER POLISH
========================================== */

.srl-program-card,
.srl-program-card-v2,
.srl-category-card{
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    background .22s ease !important;
}

.srl-program-card:hover,
.srl-program-card-v2:hover,
.srl-category-card:hover{
  transform:translateY(-6px) !important;
  border-color:rgba(37,99,235,.22) !important;
  box-shadow:0 28px 70px rgba(15,23,42,.12) !important;
  background:rgba(255,255,255,.96) !important;
}

.srl-program-card img,
.srl-program-card-v2 img,
.srl-category-card img{
  transition:transform .22s ease, filter .22s ease !important;
}

.srl-program-card:hover img,
.srl-program-card-v2:hover img,
.srl-category-card:hover img{
  transform:scale(1.06) !important;
  filter:saturate(1.08) contrast(1.03) !important;
}

.srl-program-card .srl-stars,
.srl-program-card-v2 .srl-stars{
  transition:filter .22s ease, transform .22s ease !important;
}

.srl-program-card:hover .srl-stars,
.srl-program-card-v2:hover .srl-stars{
  filter:drop-shadow(0 4px 10px rgba(245,158,11,.28)) !important;
  transform:translateY(-1px) !important;
}

.srl-program-card .srl-view-btn,
.srl-program-card-v2 .srl-view-btn,
.srl-category-card a{
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease !important;
}

.srl-program-card:hover .srl-view-btn,
.srl-program-card-v2:hover .srl-view-btn,
.srl-category-card:hover a{
  transform:translateY(-2px) !important;
  box-shadow:0 14px 28px rgba(37,99,235,.18) !important;
}

/* FINAL CARD HOVER - Programs page */
body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2{
  transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease, background .24s ease !important;
  will-change:transform !important;
}

body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2:hover{
  transform:translateY(-8px) !important;
  border-color:rgba(37,99,235,.26) !important;
  background:rgba(255,255,255,.98) !important;

  box-shadow:
    0 18px 45px rgba(15,23,42,.08),
    0 35px 80px rgba(37,99,235,.12) !important;
}
body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2 img{
  transition:transform .24s ease, filter .24s ease !important;
}

body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2:hover img{
  transform:scale(1.08) rotate(2deg) !important;
  filter:saturate(1.1) contrast(1.04) !important;
}

body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2 .srl-card-content-v2{
  transition:transform .24s ease !important;
}

body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2:hover .srl-card-content-v2{
  transform:translateY(-2px) !important;
}

/* ==========================================
   CARD LOAD / SEARCH FADE ANIMATION
========================================== */

@keyframes srlCardFadeUp{
  from{
    opacity:0;
    transform:translateY(14px) scale(.985);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2{
  animation:srlCardFadeUp .34s ease both !important;
}

body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2:nth-child(1){ animation-delay:.02s !important; }
body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2:nth-child(2){ animation-delay:.05s !important; }
body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2:nth-child(3){ animation-delay:.08s !important; }
body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2:nth-child(4){ animation-delay:.11s !important; }
body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2:nth-child(5){ animation-delay:.14s !important; }
body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2:nth-child(6){ animation-delay:.17s !important; }

/* ==========================================
   VIEW REVIEW BUTTON POLISH
========================================== */

body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2 .srl-view-btn{
  position:relative !important;
  overflow:hidden !important;
}

body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2 .srl-view-btn::after{
  content:"" !important;
  position:absolute !important;
  top:0 !important;
  left:-80% !important;
  width:60% !important;
  height:100% !important;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent) !important;
  transform:skewX(-20deg) !important;
  transition:left .42s ease !important;
}

body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2:hover .srl-view-btn::after{
  left:120% !important;
}

/* ==========================================
   SKELETON LOADING - PROGRAM CARDS
========================================== */

.srl-program-card-v2.is-loading{
  pointer-events:none !important;
  position:relative !important;
  overflow:hidden !important;
}

.srl-program-card-v2.is-loading > *{
  opacity:0 !important;
}

.srl-program-card-v2.is-loading::before{
  content:"" !important;
  position:absolute !important;
  inset:24px !important;
  border-radius:20px !important;
  background:
    linear-gradient(90deg,#eef3fb 25%,#f8fbff 50%,#eef3fb 75%) !important;
  background-size:220% 100% !important;
  animation:srlSkeletonMove 1.15s linear infinite !important;
}

@keyframes srlSkeletonMove{
  from{ background-position:220% 0; }
  to{ background-position:-220% 0; }
}

/* ==========================================
   SKELETON LOADING - PROGRAM CARDS
========================================== */

body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2.is-loading{
  pointer-events:none !important;
  position:relative !important;
  overflow:hidden !important;
}

body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2.is-loading > *{
  opacity:0 !important;
}

body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2.is-loading::before{
  content:"" !important;
  position:absolute !important;
  inset:26px !important;
  border-radius:22px !important;
  background:linear-gradient(90deg,#eef3fb 25%,#ffffff 50%,#eef3fb 75%) !important;
  background-size:220% 100% !important;
  animation:srlSkeletonMove 1.15s linear infinite !important;
}

@keyframes srlSkeletonMove{
  from{ background-position:220% 0; }
  to{ background-position:-220% 0; }
}

/* ==========================================
   PROGRAMS NO RESULTS POLISH
========================================== */

body.page:not(.home):not(.page-template-page-categories) .srl-program-result-note{
  margin:24px 0 26px !important;
  padding:18px 20px !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.88) !important;
  border:1px solid rgba(15,23,42,.08) !important;
  box-shadow:0 14px 36px rgba(15,23,42,.06) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:14px !important;
  flex-wrap:wrap !important;
}

body.page:not(.home):not(.page-template-page-categories) .srl-program-result-note strong{
  color:#0f172a !important;
  font-size:16px !important;
  font-weight:950 !important;
}

body.page:not(.home):not(.page-template-page-categories) .srl-program-result-note span{
  color:#64748b !important;
  font-size:14px !important;
  font-weight:700 !important;
}

body.page:not(.home):not(.page-template-page-categories) .srl-program-result-note .srl-clear-search{
  height:38px !important;
  padding:0 14px !important;
  border-radius:999px !important;
  background:#0f172a !important;
  color:#fff !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-decoration:none !important;
  font-size:13px !important;
  font-weight:950 !important;
  box-shadow:0 12px 24px rgba(15,23,42,.16) !important;
}

body.page:not(.home):not(.page-template-page-categories) .srl-program-result-note .srl-clear-search:hover{
  background:#2563eb !important;
  color:#fff !important;
  transform:translateY(-1px) !important;
}

/* ==========================================
   PROGRAMS PAGE MOBILE RESPONSIVE
========================================== */

@media (max-width: 768px){

  body.page:not(.home):not(.page-template-page-categories) .srl-programs-page-v2{
    margin: 90px auto 60px !important;
    padding: 0 16px !important;
  }

  body.page:not(.home):not(.page-template-page-categories) .srl-programs-hero-v2{
    padding: 34px 24px !important;
    border-radius: 26px !important;
  }

  body.page:not(.home):not(.page-template-page-categories) .srl-programs-hero-v2 h1{
    font-size: 28px !important;
    line-height: 1.15 !important;
    letter-spacing: -.045em !important;
  }

  body.page:not(.home):not(.page-template-page-categories) .srl-programs-searchbar{
    width: 100% !important;
    display: flex !important;
    gap: 8px !important;
  }

  body.page:not(.home):not(.page-template-page-categories) .srl-programs-search-input{
    min-width: 0 !important;
  }

  body.page:not(.home):not(.page-template-page-categories) .srl-programs-searchbar button{
    flex: 0 0 96px !important;
    width: 96px !important;
  }

  body.page:not(.home):not(.page-template-page-categories) .srl-programs-grid-v2,
  body.page:not(.home):not(.page-template-page-categories) .srl-program-grid-v2{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2{
    min-height: auto  !important;
    padding: 22px 18px !important;
  }

  body.page:not(.home):not(.page-template-page-categories) .srl-program-result-note{
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  body.page:not(.home):not(.page-template-page-categories) .srl-program-result-note .srl-clear-search{
    width: 100% !important;
  }
}

@media (max-width: 480px){

  body.page:not(.home):not(.page-template-page-categories) .srl-programs-hero-v2 h1{
    font-size: 30px !important;
  }

  body.page:not(.home):not(.page-template-page-categories) .srl-programs-searchbar{
    flex-direction: column !important;
  }

  body.page:not(.home):not(.page-template-page-categories) .srl-programs-searchbar button{
    width: 100% !important;
    flex: none !important;
  }

  body.page:not(.home):not(.page-template-page-categories) .srl-programs-suggestions{
    width: 100% !important;
  }
}

@media (max-width:768px){

  body.page:not(.home):not(.page-template-page-categories) .srl-program-card-v2 p{
    display:-webkit-box !important;
    -webkit-line-clamp:3 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
  }

}

/* ==========================================
   HOME LOGO MARQUEE POLISH
========================================== */

.srl-logo-marquee{
  margin-top:34px !important;
  padding:20px 0 !important;
  border-radius:24px !important;
  background:rgba(255,255,255,.48) !important;
  border:1px solid rgba(148,163,184,.16) !important;
  box-shadow:0 18px 50px rgba(15,23,42,.06) !important;
  overflow:hidden !important;
}

.srl-logo-track{
  gap:20px !important;
  align-items:center !important;
}

.srl-logo-track img{
  width:54px !important;
  height:54px !important;
  padding:12px !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.92) !important;
  border:1px solid rgba(15,23,42,.08) !important;
  box-shadow:0 10px 24px rgba(15,23,42,.07) !important;
  object-fit:contain !important;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}

.srl-logo-track img:hover{
  transform:translateY(-6px) scale(1.08) !important;
  border-color:rgba(37,99,235,.28) !important;
  box-shadow:0 20px 40px rgba(37,99,235,.18) !important;
}

.srl-feature-card{
    transition:.28s ease;
}

.srl-feature-card:hover{
    transform:translateY(-8px);
    box-shadow:0 35px 80px rgba(15,23,42,.14);
}

/* ==========================================
   HOME PROGRAMS LIST CARD POLISH
========================================== */

.home .srl-program-row{
  position:relative !important;
  overflow:hidden !important;
  transition:
    transform .26s ease,
    box-shadow .26s ease,
    border-color .26s ease,
    background .26s ease !important;
}

.home .srl-program-row:hover{
  transform:translateY(-6px) !important;
  border-color:rgba(37,99,235,.24) !important;
  background:rgba(255,255,255,.98) !important;
  box-shadow:
    0 18px 45px rgba(15,23,42,.08),
    0 34px 80px rgba(37,99,235,.10) !important;
}

.home .srl-program-row .srl-logo-img{
  transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease !important;
}

.home .srl-program-row:hover .srl-logo-img{
  transform:scale(1.06) rotate(2deg) !important;
  border-color:rgba(37,99,235,.24) !important;
  box-shadow:0 14px 30px rgba(37,99,235,.12) !important;
}

.home .srl-program-row .srl-review-btn,
.home .srl-program-row .srl-visit-btn{
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease !important;
}

.home .srl-program-row:hover .srl-review-btn,
.home .srl-program-row:hover .srl-visit-btn{
  transform:translateY(-1px) !important;
}

/* ==========================================
   HOME PROGRAMS CARD HOVER UPGRADE
========================================== */

.home .srl-program-row:hover{
  transform:translateY(-8px) !important;
  border-color:rgba(37,99,235,.34) !important;
  box-shadow:
    0 25px 70px rgba(15,23,42,.12),
    0 50px 120px rgba(37,99,235,.10) !important;
}

.home .srl-program-row:hover .srl-logo-img{
  transform:scale(1.08) rotate(3deg) !important;
  box-shadow:0 18px 38px rgba(37,99,235,.16) !important;
}

.home .srl-program-row:hover .srl-trust-row span{
  background:rgba(239,246,255,.98) !important;
  color:#2563eb !important;
  box-shadow:0 8px 18px rgba(37,99,235,.10) !important;
}

.home .srl-program-row:hover .srl-meta{
  transform:scale(1.035) !important;
  background:rgba(255,255,255,.98) !important;
  border-color:rgba(37,99,235,.22) !important;
  box-shadow:0 12px 28px rgba(37,99,235,.10) !important;
}

.home .srl-program-row .srl-meta{
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease !important;
}

.home .srl-program-row:hover .srl-review-btn{
  background:#2563eb !important;
  color:#fff !important;
  box-shadow:0 14px 30px rgba(37,99,235,.24) !important;
}

/* ==========================================
   HOME PROGRAMS FILTER FADE ANIMATION
========================================== */

.home .srl-program-list{
  transition:opacity .22s ease, transform .22s ease !important;
}

.home .srl-program-list.is-filtering{
  opacity:.35 !important;
  transform:translateY(8px) !important;
}

.home .srl-program-row{
  animation:srlHomeProgramFadeUp .28s ease both !important;
}

@keyframes srlHomeProgramFadeUp{
  from{
    opacity:0;
    transform:translateY(10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* ==========================================
   HOME SORT DROPDOWN POLISH
========================================== */

.home .srl-custom-sort{
  position:relative !important;
}

.home .srl-sort-current{
  border-radius:16px !important;
  border:1px solid rgba(37,99,235,.18) !important;
  background:rgba(255,255,255,.9) !important;
  box-shadow:0 12px 28px rgba(37,99,235,.08) !important;
  transition:.22s ease !important;
}

.home .srl-sort-current:hover{
  border-color:rgba(37,99,235,.36) !important;
  box-shadow:0 16px 36px rgba(37,99,235,.14) !important;
}

.home .srl-sort-menu{
  border-radius:18px !important;
  padding:8px !important;
  background:rgba(255,255,255,.98) !important;
  border:1px solid rgba(15,23,42,.08) !important;
  box-shadow:0 24px 60px rgba(15,23,42,.14) !important;
}

.home .srl-sort-menu button{
  border-radius:12px !important;
  padding:11px 12px !important;
  font-weight:900 !important;
}

.home .srl-sort-menu button:hover{
    background:#2563eb !important;
    color:#fff !important;
}

.home .srl-sort-menu{
    margin-top:10px !important;
}

.home .srl-sort-menu{
    animation:srlSortFade .18s ease;
    transform-origin:top;
}

@keyframes srlSortFade{

    from{
        opacity:0;
        transform:translateY(-8px) scale(.98);
    }

    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }

}

/* FIX HOME TOP MENU — ngang với logo + cố định khi cuộn */
body.home .srl-pill-header{
  position: fixed !important;
  top: 16px !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  padding: 0 20px !important;
  z-index: 999998 !important;
  pointer-events: none !important;
}

body.home .srl-pill-inner{
  width: min(760px, calc(100% - 360px)) !important;
  min-height: 50px !important;
  margin: 0 auto !important;
  border-radius: 999px !important;
  pointer-events: auto !important;
}

/* tránh đè trên mobile */
@media(max-width: 900px){
  body.home .srl-pill-header{
    top: 78px !important;
  }

  body.home .srl-pill-inner{
    width: calc(100% - 32px) !important;
  }
}

/* FIX HOME TOP GAP — đôn hero lên sát menu hơn */
body.home .srl-directory-hero{
  padding-top: 34px !important;
}

body.home .srl-directory-hero > .srl-wrap{
  margin-top: 0 !important;
}

/* Nếu vẫn còn hơi xa, giảm tiếp dòng này xuống 20px */
body.home .srl-hero-top{
  margin-top: 0 !important;
}

/* HOME HERO HEIGHT TUNE — gọn hero hơn */
body.home .srl-hero-top{
  min-height: 210px !important;
}

body.home .srl-directory-hero > .srl-wrap{
  padding-top: 32px !important;
  padding-bottom: 28px !important;
}

body.home .srl-chip-row{
  margin-top: 14px !important;
}

/* ==========================================
   SRL MICRO ANIMATION POLISH
========================================== */

/* Hero CTA */
body.home .srl-directory-hero a{
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease !important;
}

body.home .srl-directory-hero a:hover{
  transform:translateY(-3px) scale(1.02) !important;
}

/* Hero insight card */
body.home .srl-hero-card{
  transition:transform .28s ease, box-shadow .28s ease !important;
}

body.home .srl-hero-card:hover{
  transform:translateY(-6px) !important;
  box-shadow:0 34px 78px rgba(15,23,42,.26) !important;
}

/* Stats cards */
body.home .srl-stats-grid div{
  transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease !important;
}

body.home .srl-stats-grid div:hover{
  transform:translateY(-5px) !important;
  border-color:rgba(37,99,235,.18) !important;
  box-shadow:0 20px 48px rgba(37,99,235,.10) !important;
}

/* Browse chips */
body.home .srl-chip-row span{
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease !important;
}

body.home .srl-chip-row span:hover{
  transform:translateY(-2px) !important;
  background:#2563eb !important;
  color:#fff !important;
  box-shadow:0 10px 22px rgba(37,99,235,.18) !important;
}

/* Header pill menu */
body.home .srl-pill-nav a{
  transition:color .18s ease, transform .18s ease !important;
}

body.home .srl-pill-nav a:hover{
  transform:translateY(-1px) !important;
}

/* Featured cards */
body.home .srl-featured-card{
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease !important;
}

/* Program rows */
body.home .srl-program-row{
  will-change:transform !important;
}

/* Reduce motion safety */
@media (prefers-reduced-motion: reduce){
  body.home .srl-hero-card,
  body.home .srl-stats-grid div,
  body.home .srl-chip-row span,
  body.home .srl-directory-hero a{
    transition:none !important;
    animation:none !important;
  }
}

/* ==========================================
   PROGRAM ROW PREMIUM HOVER
========================================== */

.home .srl-program-row{
    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease;
}

.home .srl-program-row:hover{

    transform:translateY(-8px);

    border-color:rgba(37,99,235,.18);

    box-shadow:
        0 28px 70px rgba(15,23,42,.12);

}

.home .srl-program-row img{

    transition:
        transform .25s ease;

}

.home .srl-program-row:hover img{

    transform:
        scale(1.08)
        rotate(2deg);

}

.home .srl-review-btn{

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        background .22s ease;

}

.home .srl-review-btn:hover{

    transform:translateY(-2px);

    box-shadow:
        0 14px 30px rgba(37,99,235,.22);

}

.home .srl-program-row .badge{

    transition:
        transform .22s ease;

}

.home .srl-program-row:hover .badge{

    transform:translateY(-2px);

}

.home .srl-meta{

    transition:
        transform .22s ease,
        box-shadow .22s ease;

}

.home .srl-program-row:hover .srl-meta{

    transform:translateY(-3px);

    box-shadow:
        0 12px 26px rgba(37,99,235,.08);

}

/* ==========================================
   HOME SCROLL REVEAL — CSS ONLY
========================================== */

body.home .srl-featured-card,
body.home .srl-logo-marquee,
body.home .srl-search-bar,
body.home .srl-filter-box,
body.home .srl-list-head,
body.home .srl-quick-filters,
body.home .srl-program-row{
  animation:srlRevealUp .62s ease both !important;
  animation-timeline:view() !important;
  animation-range:entry 0% cover 22% !important;
}

@keyframes srlRevealUp{
  from{
    opacity:0;
    transform:translateY(24px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

body.home .srl-featured-card:focus,
body.home .srl-featured-card:active{
  outline:none !important;
  border-color:rgba(15,23,42,.08) !important;
  box-shadow:0 16px 42px rgba(15,23,42,.06) !important;
}

/* ==========================================
   HOME MOBILE POLISH
========================================== */

@media(max-width: 640px){

  body.home .srl-pill-header{
    top: 76px !important;
    padding: 0 14px !important;
  }

  body.home .srl-pill-inner{
    width: calc(100vw - 28px) !important;
    min-height: 46px !important;
    padding: 0 14px !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
  }

  body.home .srl-pill-nav{
    flex-wrap: nowrap !important;
    gap: 18px !important;
  }

  body.home .srl-pill-nav a{
    font-size: 12px !important;
  }

  body.home .srl-directory-hero{
    padding-top: 128px !important;
  }

  body.home .srl-directory-hero > .srl-wrap{
    width: calc(100vw - 24px) !important;
    padding: 18px !important;
    border-radius: 24px !important;
  }

  body.home .srl-directory-hero h1{
    font-size: 34px !important;
    line-height: 1.06 !important;
  }

  body.home .srl-hero-card{
    max-width: 100% !important;
  }

  body.home .srl-stats-grid{
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  body.home .srl-chip-row{
    padding: 14px !important;
  }

  body.home .srl-featured-grid{
    grid-template-columns: 1fr !important;
  }

}

/* ==========================================
   MOBILE HEADER — hide pill menu, keep hamburger
========================================== */

@media(max-width: 640px){

  body.home .srl-pill-header{
    display:none !important;
  }

  body.home .site-header{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    height:82px !important;
    background:rgba(238,246,255,.82) !important;
    backdrop-filter:blur(14px) !important;
    -webkit-backdrop-filter:blur(14px) !important;
    z-index:999990 !important;
    box-shadow:0 10px 26px rgba(15,23,42,.06) !important;
  }

  body.home .site-title,
  body.home .ast-site-title{
    top:18px !important;
    left:16px !important;
  }

  body.home .main-header-menu,
  body.home .ast-header-menu,
  body.home .main-navigation,
  body.home .ast-main-header-bar-alignment{
    display:block !important;
  }

  body.home .menu-toggle,
  body.home .ast-button-wrap .menu-toggle{
    display:flex !important;
    position:fixed !important;
    top:24px !important;
    right:18px !important;
    width:42px !important;
    height:42px !important;
    align-items:center !important;
    justify-content:center !important;
    border:0 !important;
    background:transparent !important;
    color:#2563eb !important;
    z-index:999999 !important;
  }

  body.home .srl-directory-hero{
    padding-top:108px !important;
  }

}

/* MOBILE HERO CARD TUNE */
@media(max-width:640px){

  body.home .srl-hero-card{
    margin-top:18px !important;
    min-height:auto !important;
    padding:20px !important;
    border-radius:20px !important;
  }

  body.home .srl-hero-card strong{
    font-size:16px !important;
  }

  body.home .srl-hero-card span{
    font-size:13px !important;
    line-height:1.55 !important;
  }

  body.home .srl-directory-hero > .srl-wrap{
    padding-bottom:20px !important;
  }

}

@media(max-width:640px){

  body.home .srl-hero-card{
      padding:18px !important;
      min-height:130px !important;
  }

}

@media(max-width:640px){

body.home .srl-directory-hero>.srl-wrap{
    width:calc(100% - 32px)!important;
}

}

/* ==========================================
   MOBILE HERO FINAL TUNE
========================================== */

@media(max-width:640px){

  body.home .srl-directory-hero > .srl-wrap{
    width:calc(100% - 32px) !important;
  }

  body.home .srl-hero-card{
    padding:18px !important;
    min-height:130px !important;
    border-radius:18px !important;
  }

  body.home .srl-hero-card strong{
    font-size:15px !important;
    margin-bottom:8px !important;
  }

  body.home .srl-hero-card span{
    font-size:12.5px !important;
    line-height:1.45 !important;
  }

}

/* ==========================================
   PROGRAMS STICKY FILTER
========================================== */

@media(min-width:1024px){

.home .srl-filter-box,
.page-template-page-categories .srl-filter-box{

    position:sticky;
    top:110px;

    align-self:flex-start;

}

}

/* ==========================================
   PROGRAMS PAGE FOOTER + BOTTOM SPACING
========================================== */

/* Giảm khoảng trắng dưới pagination */
body.page-template-page-programs .srl-programs-pagination,
body.page-id-102 .srl-programs-pagination,
body.page-template-page-categories .srl-programs-pagination{
  margin-bottom:40px !important;
}

/* Footer hiện rõ trên Programs/Categories */
body.page-template-page-programs .srl-footer,
body.page-id-102 .srl-footer,
body.page-template-page-categories .srl-footer{
  display:block !important;
  margin-top:40px !important;
}

/* ==========================================
   PROGRAMS BREADCRUMB
========================================== */

.srl-breadcrumb{
  width:min(1120px, calc(100% - 40px));
  margin:120px auto 18px;
  color:#64748b;
  font-size:13px;
  font-weight:800;
}

.srl-breadcrumb a{
  color:#2563eb;
  text-decoration:none;
  font-weight:900;
}

.srl-breadcrumb span{
  color:#0f172a;
}

/* ==========================================
   REVIEW PAGE HERO POLISH
========================================== */

body.page:not(.home):not(.page-template-page-categories) .srl-review-hero{
  margin-top:110px !important;
  border-radius:32px !important;
  background:
    radial-gradient(circle at 12% 10%, rgba(37,99,235,.10), transparent 34%),
    radial-gradient(circle at 88% 12%, rgba(255,107,26,.10), transparent 32%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,251,255,.92)) !important;
  border:1px solid rgba(15,23,42,.08) !important;
  box-shadow:0 34px 90px rgba(15,23,42,.10) !important;
}

body.page:not(.home):not(.page-template-page-categories) .srl-review-hero-card{
  transition:transform .28s ease, box-shadow .28s ease !important;
}

body.page:not(.home):not(.page-template-page-categories) .srl-review-hero-card:hover{
  transform:translateY(-6px) !important;
  box-shadow:0 34px 80px rgba(15,23,42,.26) !important;
}

body.page:not(.home):not(.page-template-page-categories) .srl-score-row div{
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}

body.page:not(.home):not(.page-template-page-categories) .srl-score-row div:hover{
  transform:translateY(-4px) !important;
  border-color:rgba(37,99,235,.20) !important;
  box-shadow:0 16px 36px rgba(37,99,235,.10) !important;
}

/* ==========================================
   REVIEW SUMMARY STICKY
========================================== */

.srl-review-sidebar{
    position:sticky;
    top:110px;
    align-self:flex-start;
}

@media (max-width:1024px){

.srl-review-sidebar{
    position:relative;
    top:auto;
}

}

/* ==========================================
   REVIEW PAGE TABLE OF CONTENTS
========================================== */

.srl-toc{
  background:rgba(255,255,255,.96);
  border:1px solid rgba(15,23,42,.08);
  border-radius:24px;
  padding:24px;
  box-shadow:0 20px 55px rgba(15,23,42,.08);
  margin-bottom:24px;
}

.srl-toc h3{
  margin:0 0 14px;
  font-size:20px;
  color:#0f172a;
}

.srl-toc a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  margin-bottom:8px;
  border-radius:14px;
  background:#f8fbff;
  color:#334155;
  text-decoration:none;
  font-weight:900;
  transition:.2s ease;
}

.srl-toc a:hover{
  background:#2563eb;
  color:#fff;
  transform:translateX(4px);
}

.srl-toc a::after{
  content:"→";
  opacity:.65;
}

/* REVIEW SIDEBAR CLEANUP — giữ TOC + CTA, ẩn Summary bị dư */
.srl-review-sidebar .srl-review-side-box.premium{
  display:none !important;
}

.srl-review-sidebar .srl-toc{
  margin-bottom:20px !important;
}

/* ==========================================
   FIX HOME CARD ACTION BUTTONS RESTORE
========================================== */

body.home .srl-program-row{
  grid-template-columns:
    minmax(320px,1.15fr)
    108px
    108px
    108px
    120px
    130px !important;
}

body.home .srl-table-head{
  grid-template-columns:
    minmax(320px,1.15fr)
    108px
    108px
    108px
    120px
    130px !important;
}

body.home .srl-action-buttons{
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  width:130px !important;
  min-width:130px !important;
  max-width:130px !important;
  justify-self:end !important;
  align-self:center !important;
  opacity:1 !important;
  visibility:visible !important;
}

body.home .srl-action-buttons a,
body.home .srl-action-buttons .srl-review-btn,
body.home .srl-action-buttons .srl-visit-btn{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  height:36px !important;
  min-height:36px !important;
  border-radius:10px !important;
  text-decoration:none !important;
  font-size:12px !important;
  font-weight:950 !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

body.home .srl-action-buttons .srl-review-btn{
  background:#0f172a !important;
  color:#fff !important;
}

body.home .srl-action-buttons .srl-visit-btn{
  background:linear-gradient(135deg,#ff8a1d,#ff5f1f) !important;
  color:#fff !important;
  box-shadow:0 12px 26px rgba(255,112,32,.25) !important;
}

/* FIX HOME ACTION BUTTONS FIT INSIDE ROW */
body.home .srl-program-row,
body.home .srl-table-head{
  grid-template-columns:
    minmax(300px,1fr)
    96px
    96px
    96px
    104px
    96px !important;
  gap:8px !important;
}

body.home .srl-action-buttons{
  width:96px !important;
  min-width:96px !important;
  max-width:96px !important;
  justify-self:center !important;
}

body.home .srl-action-buttons a,
body.home .srl-action-buttons .srl-review-btn,
body.home .srl-action-buttons .srl-visit-btn{
  width:96px !important;
  height:34px !important;
  min-height:34px !important;
  padding:0 6px !important;
  font-size:11px !important;
  border-radius:9px !important;
  overflow:hidden !important;
  white-space:nowrap !important;
}

body.home .srl-main-list,
body.home .srl-program-list{
  overflow:visible !important;
}

/* FIX ANCHOR JUMP OFFSET FOR REVIEW TOC */
#overview,
#best-for,
#pricing,
#pros-cons,
#alternatives,
#faq{
  scroll-margin-top:500px !important;
}

html{
  scroll-behavior:smooth;
}

.srl-toc a{
    transition: all .25s ease;
}

.srl-toc a.is-active{
    transform: translateX(6px);
}

/* ==========================================
   REVIEW READING PROGRESS
========================================== */

.srl-reading-progress{
  margin:0 0 14px;
  padding:12px 14px;
  border:1px solid rgba(37,99,235,.12);
  border-radius:15px;
  background:linear-gradient(180deg,#f8fbff 0%,#f1f6ff 100%);
}

.srl-reading-progress-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
  color:#334155;
  font-size:12px;
  font-weight:900;
}

.srl-reading-progress-percent{
  color:#2563eb;
}

.srl-reading-progress-track{
  width:100%;
  height:7px;
  overflow:hidden;
  border-radius:999px;
  background:#dfe8f6;
}

.srl-reading-progress-fill{
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#2563eb 0%,#06b6d4 100%);
  transition:width .15s linear;
}

/* ==========================================
   REVIEW SIDEBAR — STICKY FULL PANEL
========================================== */

.srl-review-sidebar{
  position:sticky !important;
  top:92px !important;
  align-self:start !important;
  height:max-content !important;
}

.srl-review-sidebar .srl-toc,
.srl-review-sidebar .srl-review-side-box,
.srl-review-sidebar .srl-review-cta{
  position:relative !important;
}

.srl-review-sidebar .srl-review-side-box.premium{
  display:block !important;
  margin-top:18px !important;
  padding:22px !important;
  border-radius:22px !important;
  background:rgba(255,255,255,.96) !important;
  border:1px solid rgba(15,23,42,.08) !important;
  box-shadow:0 18px 45px rgba(15,23,42,.08) !important;
}

.srl-review-sidebar .srl-review-side-box.premium h3{
  margin:0 0 16px !important;
  font-size:20px !important;
  color:#0f172a !important;
}

.srl-review-sidebar .srl-review-side-box.premium p{
  margin:0 0 12px !important;
  font-size:14px !important;
  line-height:1.6 !important;
  color:#64748b !important;
}

.srl-review-sidebar .srl-review-side-box.premium p:last-child{
  margin-bottom:0 !important;
}

.srl-review-sidebar .srl-review-cta{
  display:flex !important;
  width:100% !important;
  margin-top:18px !important;
  min-height:48px !important;
  align-items:center !important;
  justify-content:center !important;
}

.srl-feature-grid div h3 {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 800;
  color: #11274e;
  line-height: 1.35;
}

.srl-feature-grid div p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: #5b6b82;
}

/* ==========================================
   REVIEW SIDEBAR PREMIUM CTA
========================================== */

.srl-review-sidebar{
  padding-bottom:70px !important;
}

.srl-review-sidebar .srl-review-cta{
  position:sticky !important;
  bottom:28px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  width:100% !important;
  min-height:54px !important;

  margin-top:20px !important;
  margin-bottom:0 !important;
  padding:0 18px !important;

  border-radius:16px !important;
  background:linear-gradient(135deg,#ff8a1d 0%,#ff5f1f 100%) !important;
  color:#fff !important;

  font-size:14px !important;
  font-weight:950 !important;
  letter-spacing:.01em !important;
  text-decoration:none !important;

  box-shadow:
    0 18px 42px rgba(255,95,31,.32),
    0 0 0 1px rgba(255,255,255,.22) inset !important;

  transition:
    transform .22s ease,
    box-shadow .22s ease,
    filter .22s ease !important;

  z-index:15 !important;
  overflow:hidden !important;
}

.srl-review-sidebar .srl-review-cta::before{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:70%;
  height:100%;
  background:linear-gradient(
    110deg,
    transparent 0%,
    rgba(255,255,255,.15) 35%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,.15) 65%,
    transparent 100%
  );
  transform:skewX(-20deg);
  transition:left .55s ease;
}

.srl-review-sidebar .srl-review-cta:hover{
  transform:translateY(-5px) scale(1.02) !important;
  filter:saturate(1.08) brightness(1.03) !important;
  box-shadow:
    0 24px 54px rgba(255,95,31,.42),
    0 0 0 1px rgba(255,255,255,.32) inset !important;
}

.srl-review-sidebar .srl-review-cta:hover::before{
  left:145%;
}

.srl-review-sidebar .srl-review-cta:active{
  transform:translateY(-2px) scale(.99) !important;
}

/* Nhịp sáng nhẹ để thu hút CTA */
@keyframes srlCtaPulse{
  0%,100%{
    box-shadow:
      0 18px 42px rgba(255,95,31,.30),
      0 0 0 0 rgba(255,126,45,.18);
  }

  50%{
    box-shadow:
      0 22px 50px rgba(255,95,31,.38),
      0 0 0 9px rgba(255,126,45,0);
  }
}

.srl-review-sidebar .srl-review-cta{
  animation:srlCtaPulse 2.8s ease-in-out infinite !important;
}

/* Tắt animation khi rê chuột để hover mượt hơn */
.srl-review-sidebar .srl-review-cta:hover{
  animation:none !important;
}

/* Mobile: không dùng sticky đáy */
@media (max-width:768px){
  .srl-review-sidebar{
    padding-bottom:20px !important;
  }

  .srl-review-sidebar .srl-review-cta{
    position:relative !important;
    bottom:auto !important;
    min-height:50px !important;
  }
}

/* ==========================================
   GLOBAL VISIT SITE BUTTON EFFECT
   Áp dụng cho nút Visit Site toàn website
========================================== */

.srl-review-cta,
.srl-review-hero-card a,
.srl-visit-btn,
a[href*="hostinger.com"],
a[href*="canva.com"],
a[href*="semrush.com"]{
  position:relative !important;
  overflow:hidden !important;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    filter .22s ease !important;
}

/* Ánh sáng quét ngang */
.srl-review-cta::before,
.srl-review-hero-card a::before,
.srl-visit-btn::before{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:70%;
  height:100%;
  pointer-events:none;
  background:linear-gradient(
    110deg,
    transparent 0%,
    rgba(255,255,255,.14) 35%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,.14) 65%,
    transparent 100%
  );
  transform:skewX(-20deg);
  transition:left .55s ease;
}

/* Hover nảy lên */
.srl-review-cta:hover,
.srl-review-hero-card a:hover,
.srl-visit-btn:hover{
  transform:translateY(-5px) scale(1.025) !important;
  filter:saturate(1.08) brightness(1.03) !important;
  box-shadow:
    0 24px 54px rgba(255,95,31,.38),
    0 0 0 1px rgba(255,255,255,.28) inset !important;
}

/* Chạy ánh sáng */
.srl-review-cta:hover::before,
.srl-review-hero-card a:hover::before,
.srl-visit-btn:hover::before{
  left:145%;
}

/* Khi click */
.srl-review-cta:active,
.srl-review-hero-card a:active,
.srl-visit-btn:active{
  transform:translateY(-2px) scale(.99) !important;
}

/* Nhịp sáng nhẹ */
@keyframes srlVisitPulse{
  0%,100%{
    box-shadow:
      0 16px 38px rgba(255,95,31,.24),
      0 0 0 0 rgba(255,126,45,.16);
  }

  50%{
    box-shadow:
      0 20px 46px rgba(255,95,31,.34),
      0 0 0 8px rgba(255,126,45,0);
  }
}

.srl-review-cta,
.srl-review-hero-card a,
.srl-visit-btn{
  animation:srlVisitPulse 2.8s ease-in-out infinite;
}

/* Hover thì dừng pulse để hiệu ứng mượt */
.srl-review-cta:hover,
.srl-review-hero-card a:hover,
.srl-visit-btn:hover{
  animation:none !important;
}

/* Mobile: giảm hiệu ứng để tránh rung */
@media (max-width:768px){
  .srl-review-cta,
  .srl-review-hero-card a,
  .srl-visit-btn{
    animation:none !important;
  }

  .srl-review-cta:hover,
  .srl-review-hero-card a:hover,
  .srl-visit-btn:hover{
    transform:none !important;
  }
}

/* =========================================================
   REVIEW PAGE — FIX LARGE GAP BELOW HEADER
   ========================================================= */

body.page:not(.home):not(.page-template-page-categories)
.entry-content > section.srl-review-detail{
  width:min(1240px, calc(100% - 40px)) !important;
  max-width:1240px !important;

  margin:12px auto 60px !important;
  padding:0 !important;
}

/* Xóa khoảng trống từ các lớp Astra bao ngoài */
body.page:not(.home):not(.page-template-page-categories) .entry-content,
body.page:not(.home):not(.page-template-page-categories) .ast-article-single,
body.page:not(.home):not(.page-template-page-categories) .site-main,
body.page:not(.home):not(.page-template-page-categories) #primary,
body.page:not(.home):not(.page-template-page-categories) .content-area{
  margin-top:0 !important;
  padding-top:0 !important;
}

/* Khoảng cách nhỏ, cân đối giữa header và hero */
body.page:not(.home):not(.page-template-page-categories) .srl-review-hero{
  margin-top:0 !important;
}

/* ==========================================
   REVIEW HERO CARD PREMIUM
========================================== */

.srl-review-hero-card{
  position:relative !important;
  overflow:hidden !important;
}

.srl-hero-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 14px;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(37,99,235,.16);
  border:1px solid rgba(96,165,250,.22);
  color:#dbeafe;
  font-size:11px;
  font-weight:900;
  letter-spacing:.03em;
}

.srl-hero-meta{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  width:100%;
  margin:18px 0;
}

.srl-hero-meta > div{
  padding:10px 6px;
  border-radius:14px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.10);
  text-align:center;
}

.srl-hero-meta strong{
  display:block;
  color:#fff;
  font-size:13px;
  line-height:1.2;
}

.srl-hero-meta span{
  display:block;
  margin-top:4px;
  color:#94a3b8;
  font-size:10px;
  font-weight:800;
}

.srl-review-hero-card::after{
  content:"";
  position:absolute;
  inset:auto -40px -70px auto;
  width:160px;
  height:160px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,112,32,.22),transparent 70%);
  pointer-events:none;
}

@media (max-width:768px){
  .srl-hero-meta{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   REVIEW HERO CARD — REMOVE EXTRA EMPTY SPACE
========================================================= */

.srl-review-hero-card {
  align-self: start !important;
  height: auto !important;
  min-height: 0 !important;
  padding-bottom: 24px !important;
}

.srl-review-hero-card .srl-review-cta,
.srl-review-hero-card .srl-visit-btn {
  margin-bottom: 0 !important;
}

@media (max-width: 900px) {
  .srl-review-hero-card {
    width: 100% !important;
    max-width: none !important;
  }
}

/* =========================================================
   SIDEBAR QUICK FACTS — PREVENT CTA OVERLAP
========================================================= */

.srl-review-sidebar {
  overflow: visible !important;
}

.srl-review-sidebar .srl-review-side-box.premium {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding-bottom: 22px !important;
}

/* Đưa nút Visit Site xuống dưới Quick Facts */
.srl-review-sidebar > .srl-review-cta {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  display: flex !important;
  width: 100% !important;
  margin: 14px 0 0 !important;
  z-index: 2 !important;
}

/* Tạo khoảng trống phía dưới sidebar */
.srl-review-sidebar {
  padding-bottom: 30px !important;
}

@media (max-width: 900px) {
  .srl-review-sidebar > .srl-review-cta {
    margin-top: 14px !important;
  }
}

/* =========================================================
   QUICK FACTS + MINI VISIT BUTTON
========================================================= */

.srl-review-sidebar .srl-review-side-box.premium {
  padding: 24px 20px !important;
}

.srl-qf-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.srl-qf-head h3 {
  margin: 0 !important;
  font-size: 1.18rem !important;
  line-height: 1.2 !important;
}

.srl-qf-mini-cta {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  min-height: 36px !important;
  border-radius: 12px !important;
  white-space: nowrap !important;
  font-size: 13px !important;
  line-height: 1 !important;
  box-shadow: 0 10px 22px rgba(255, 124, 27, 0.20) !important;
}

.srl-review-sidebar .srl-review-side-box.premium p {
  margin: 0 0 12px !important;
}

.srl-review-sidebar .srl-review-side-box.premium p:last-child {
  margin-bottom: 0 !important;
}

/* Ẩn nút cũ bên dưới sau khi đã chuyển vào Quick Facts */
.srl-review-sidebar > .srl-review-cta[data-srl-hidden-cta="true"] {
  display: none !important;
}

@media (max-width: 900px) {
  .srl-qf-head {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .srl-qf-mini-cta {
    margin-top: 4px !important;
  }
}

/* =========================================================
   QUICK FACTS MINI BUTTON — SMALLER & HIGHER
========================================================= */

.srl-qf-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
}

.srl-qf-head h3 {
  flex: 1 1 auto !important;
  margin: 0 !important;
  padding-top: 1px !important;
  font-size: 17px !important;
  line-height: 1.2 !important;
}

/* Thu nhỏ nút Visit Site */
.srl-qf-head .srl-qf-mini-cta {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 88px !important;
  max-width: 100px !important;
  min-height: 30px !important;

  margin: -5px 0 0 !important;
  padding: 6px 9px !important;

  border-radius: 9px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  white-space: nowrap !important;

  box-shadow: 0 7px 16px rgba(255, 124, 27, 0.22) !important;
}

/* Thu gọn khoảng cách trong Quick Facts */
.srl-review-sidebar .srl-review-side-box.premium {
  padding: 21px 18px 18px !important;
}

.srl-review-sidebar .srl-review-side-box.premium p {
  margin: 0 0 9px !important;
  line-height: 1.55 !important;
}

.srl-review-sidebar .srl-review-side-box.premium p:last-child {
  margin-bottom: 0 !important;
}

/* =========================================================
   QUICK FACTS VISIT BUTTON — BALANCED SIZE
========================================================= */

.srl-qf-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
}

.srl-qf-head h3 {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;

  font-size: 18px !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
}

/* Kích thước nút vừa phải */
.srl-qf-head .srl-qf-mini-cta {
  position: relative !important;
  flex: 0 0 auto !important;

  width: auto !important;
  min-width: 106px !important;
  max-width: none !important;
  min-height: 36px !important;

  margin: 0 !important;
  padding: 8px 13px !important;

  border-radius: 10px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  white-space: nowrap !important;

  transform: none !important;
  box-shadow: 0 8px 18px rgba(255, 124, 27, 0.22) !important;
}

/* Giữ nội dung Quick Facts nằm riêng bên dưới */
.srl-review-sidebar .srl-review-side-box.premium {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding: 20px 17px 18px !important;
}

.srl-review-sidebar .srl-review-side-box.premium p {
  position: relative !important;
  display: block !important;
  clear: both !important;
  margin: 0 0 10px !important;
  line-height: 1.55 !important;
}

.srl-review-sidebar .srl-review-side-box.premium p:last-child {
  margin-bottom: 0 !important;
}

/* Màn hình hẹp: tự xuống hàng để không đè chữ */
@media (max-width: 1100px) {
  .srl-qf-head {
    flex-wrap: wrap !important;
  }

  .srl-qf-head .srl-qf-mini-cta {
    min-width: 100px !important;
  }
}

/* =========================================================
   QUICK FACTS HEADER — KEEP BUTTON INSIDE
========================================================= */

.srl-review-sidebar .srl-review-side-box.premium {
  box-sizing: border-box !important;
  width: 100% !important;
  padding: 20px 17px 18px !important;
  overflow: hidden !important;
}

/* Tiêu đề và nút luôn nằm ngang */
.srl-qf-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 100px !important;
  align-items: center !important;
  gap: 10px !important;

  width: 100% !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.srl-qf-head h3 {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;

  font-size: 18px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

/* Nút cân đối và không vượt khỏi ô */
.srl-qf-head .srl-qf-mini-cta {
  position: relative !important;
  inset: auto !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100px !important;
  min-width: 100px !important;
  max-width: 100px !important;
  height: 36px !important;
  min-height: 36px !important;

  margin: 0 !important;
  padding: 0 9px !important;
  box-sizing: border-box !important;

  border-radius: 10px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  transform: none !important;
}

/* Nội dung bắt đầu hoàn toàn bên dưới hàng tiêu đề */
.srl-review-sidebar .srl-review-side-box.premium p {
  display: block !important;
  width: 100% !important;
  margin: 0 0 10px !important;
  line-height: 1.55 !important;
  box-sizing: border-box !important;
}

.srl-review-sidebar .srl-review-side-box.premium p:last-child {
  margin-bottom: 0 !important;
}

/* Ghi đè đoạn responsive cũ đang làm nút xuống hàng */
@media (max-width: 1100px) {
  .srl-qf-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 96px !important;
    flex-wrap: nowrap !important;
  }

  .srl-qf-head .srl-qf-mini-cta {
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
  }
}

/* QUICK FACTS BUTTON — FINAL ALIGNMENT */

.srl-qf-head {
  align-items: center !important;
  grid-template-columns: minmax(0, 1fr) 112px !important;
}

.srl-qf-head .srl-qf-mini-cta {
  width: 112px !important;
  min-width: 112px !important;
  max-width: 112px !important;

  height: 36px !important;
  min-height: 36px !important;

  padding: 0 12px !important;
  transform: translateY(-2px) !important;
}

/* =========================================================
   REVIEW FAQ ACCORDION
========================================================= */

.srl-review-detail .srl-faq-item {
  overflow: hidden !important;
  padding: 0 !important;
}

.srl-faq-question {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  width: 100%;
  margin: 0;
  padding: 20px 22px;

  border: 0;
  background: transparent;
  color: #101828;

  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.4;
  text-align: left;

  cursor: pointer;
}

.srl-faq-question:hover {
  color: #155eef;
}

.srl-faq-question-text {
  flex: 1 1 auto;
}

.srl-faq-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;

  width: 32px;
  height: 32px;
  border-radius: 50%;

  background: #eaf2ff;
  color: #155eef;

  font-size: 21px;
  font-weight: 700;
  line-height: 1;
}

.srl-faq-answer {
  max-height: 0;
  margin: 0 !important;
  padding: 0 22px !important;
  overflow: hidden;

  opacity: 0;
  transition:
    max-height 0.35s ease,
    padding 0.35s ease,
    opacity 0.25s ease;
}

.srl-faq-item.is-open .srl-faq-answer {
  max-height: 500px;
  padding: 0 22px 21px !important;
  opacity: 1;
}

.srl-faq-item.is-open .srl-faq-toggle-icon {
  background: #155eef;
  color: #ffffff;
}

@media (max-width: 600px) {
  .srl-faq-question {
    padding: 17px 16px;
    font-size: 15px;
  }

  .srl-faq-answer {
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  .srl-faq-item.is-open .srl-faq-answer {
    padding: 0 16px 18px !important;
  }

  .srl-faq-toggle-icon {
    flex-basis: 29px;
    width: 29px;
    height: 29px;
    font-size: 19px;
  }
}

/* =========================================================
   FAQ ACCORDION — LIGHTER ACTIVE & CLEAR HOVER
========================================================= */

/* Câu hỏi đang mở */
.srl-review-detail .srl-faq-item.is-open .srl-faq-question {
  background: #eaf2ff !important;
  color: #101828 !important;
}

/* Rê chuột vào câu hỏi */
.srl-review-detail .srl-faq-question:hover {
  background: #f0f6ff !important;
  color: #101828 !important;
}

/* Chữ câu hỏi luôn rõ */
.srl-review-detail .srl-faq-question-text {
  color: inherit !important;
  opacity: 1 !important;
}

/* Nút dấu cộng/trừ */
.srl-review-detail .srl-faq-toggle-icon {
  background: #e2ecff !important;
  color: #155eef !important;
}

/* Nút của câu đang mở */
.srl-review-detail .srl-faq-item.is-open .srl-faq-toggle-icon {
  background: #155eef !important;
  color: #ffffff !important;
}

/* Hiệu ứng chuyển nhẹ */
.srl-review-detail .srl-faq-question,
.srl-review-detail .srl-faq-toggle-icon {
  transition:
    background-color 0.22s ease,
    color 0.22s ease,
    box-shadow 0.22s ease !important;
}

/* =========================================================
   FAQ — BLUE ONLY ON HOVER OR OPEN
========================================================= */

/* Trạng thái bình thường: không xanh */
.srl-review-detail .srl-faq-question {
  background: transparent !important;
  color: #101828 !important;
}

/* Câu hỏi đóng và không rê chuột */
.srl-review-detail .srl-faq-item:not(.is-open) .srl-faq-question {
  background: #f8fafc !important;
  color: #101828 !important;
}

/* Rê chuột vào mới chuyển xanh */
.srl-review-detail .srl-faq-question:hover {
  background: #1769c2 !important;
  color: #ffffff !important;
}

/* Câu đã bấm mở sẽ giữ màu xanh */
.srl-review-detail .srl-faq-item.is-open .srl-faq-question {
  background: #1769c2 !important;
  color: #ffffff !important;
}

/* Chữ luôn theo màu của nút */
.srl-review-detail .srl-faq-question-text {
  color: inherit !important;
  opacity: 1 !important;
}

/* Dấu cộng ở trạng thái bình thường */
.srl-review-detail .srl-faq-toggle-icon {
  background: #e8f0ff !important;
  color: #155eef !important;
}

/* Khi hover hoặc đang mở */
.srl-review-detail .srl-faq-question:hover .srl-faq-toggle-icon,
.srl-review-detail .srl-faq-item.is-open .srl-faq-toggle-icon {
  background: #ffffff !important;
  color: #155eef !important;
}

/* Phần câu trả lời vẫn nền sáng */
.srl-review-detail .srl-faq-item.is-open .srl-faq-answer {
  background: #f8fafc !important;
  color: #5c6f8d !important;
}

/* Chuyển màu mềm */
.srl-review-detail .srl-faq-question,
.srl-review-detail .srl-faq-toggle-icon {
  transition:
    background-color 0.22s ease,
    color 0.22s ease,
    box-shadow 0.22s ease !important;
}

/* =========================================================
   FAQ — FIX BLUE HOVER
========================================================= */

/* Câu đang đóng: rê chuột vào toàn bộ ô sẽ chuyển xanh */
.srl-review-detail
.srl-faq-item:not(.is-open):hover
.srl-faq-question {
  background: #1769c2 !important;
  color: #ffffff !important;
}

/* Giữ chữ rõ khi hover */
.srl-review-detail
.srl-faq-item:not(.is-open):hover
.srl-faq-question-text {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Dấu cộng khi hover */
.srl-review-detail
.srl-faq-item:not(.is-open):hover
.srl-faq-toggle-icon {
  background: #ffffff !important;
  color: #155eef !important;
}

/* Con trỏ bàn tay trên toàn bộ câu hỏi */
.srl-review-detail .srl-faq-item,
.srl-review-detail .srl-faq-question {
  cursor: pointer !important;
}

/* =========================================================
   KEY FEATURES ACCORDION
========================================================= */

.srl-key-features-accordion {
  align-items: start !important;
}

/* Card accordion */
.srl-key-features-accordion .srl-kf-item {
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 16px !important;
}

/* Nút tiêu đề */
.srl-kf-question {
  appearance: none;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;

  width: 100% !important;
  margin: 0 !important;
  padding: 18px 16px !important;

  border: 0 !important;
  background: #f8fafc !important;
  color: #101828 !important;

  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  text-align: left !important;

  cursor: pointer !important;
  transition:
    background-color 0.22s ease,
    color 0.22s ease !important;
}

.srl-kf-question-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  color: inherit !important;
}

/* Dấu cộng và trừ */
.srl-kf-toggle-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 30px !important;

  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;

  background: #e8f0ff !important;
  color: #155eef !important;

  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  transition:
    background-color 0.22s ease,
    color 0.22s ease !important;
}

/* Phần nội dung đang đóng */
.srl-kf-answer {
  max-height: 0 !important;
  padding: 0 16px !important;
  overflow: hidden !important;
  opacity: 0 !important;

  background: #f8fafc !important;

  transition:
    max-height 0.38s ease,
    padding 0.32s ease,
    opacity 0.22s ease !important;
}

.srl-kf-answer p {
  margin: 0 !important;
  color: #5c6f8d !important;
  font-weight: 500 !important;
  line-height: 1.7 !important;
}

/* Rê chuột mới chuyển xanh */
.srl-kf-item:not(.is-open):hover .srl-kf-question {
  background: #1769c2 !important;
  color: #ffffff !important;
}

.srl-kf-item:not(.is-open):hover .srl-kf-toggle-icon {
  background: #ffffff !important;
  color: #155eef !important;
}

/* Card đang mở giữ màu xanh */
.srl-kf-item.is-open .srl-kf-question {
  background: #1769c2 !important;
  color: #ffffff !important;
}

.srl-kf-item.is-open .srl-kf-toggle-icon {
  background: #ffffff !important;
  color: #155eef !important;
}

/* Hiện nội dung */
.srl-kf-item.is-open .srl-kf-answer {
  max-height: 900px !important;
  padding: 17px 16px 20px !important;
  opacity: 1 !important;
}

/* Card chỉ có một dòng */
.srl-key-features-accordion .srl-kf-simple-card {
  cursor: default !important;
  transition:
    background-color 0.22s ease,
    color 0.22s ease,
    transform 0.22s ease !important;
}

.srl-key-features-accordion .srl-kf-simple-card:hover {
  background: #1769c2 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

/* Mobile */
@media (max-width: 700px) {
  .srl-key-features-accordion {
    grid-template-columns: 1fr !important;
  }

  .srl-kf-question {
    padding: 16px 14px !important;
    font-size: 14px !important;
  }

  .srl-kf-item.is-open .srl-kf-answer {
    padding: 15px 14px 18px !important;
  }
}

/* =========================================================
   REVIEW SCORE BREAKDOWN BARS
========================================================= */

.srl-score-breakdown-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.srl-score-breakdown-grid .srl-score-item {
  display: block !important;
  padding: 17px 18px !important;
  border: 1px solid #e1e7ef !important;
  border-radius: 15px !important;
  background: #f8fafc !important;
  overflow: hidden !important;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease !important;
}

.srl-score-breakdown-grid .srl-score-item:hover {
  transform: translateY(-2px) !important;
  border-color: #bdd2ff !important;
  box-shadow: 0 12px 25px rgba(21, 94, 239, 0.10) !important;
}

.srl-score-item-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}

.srl-score-label {
  color: #101828 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}

.srl-score-value {
  flex: 0 0 auto !important;
  color: #155eef !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

.srl-score-track {
  position: relative !important;
  width: 100% !important;
  height: 9px !important;
  border-radius: 999px !important;
  background: #e5edf8 !important;
  overflow: hidden !important;
}

.srl-score-bar {
  display: block !important;
  width: 0 !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(
    90deg,
    #155eef 0%,
    #13b8d3 100%
  ) !important;

  transition: width 0.9s cubic-bezier(.2, .8, .2, 1) !important;
}

.srl-score-breakdown-grid.is-visible .srl-score-bar {
  width: var(--srl-score-width) !important;
}

@media (max-width: 700px) {
  .srl-score-breakdown-grid {
    grid-template-columns: 1fr !important;
  }

  .srl-score-breakdown-grid .srl-score-item {
    padding: 15px 16px !important;
  }

  .srl-score-label {
    font-size: 14px !important;
  }
}

/* =========================================================
   SCORE BREAKDOWN — FINAL CLEANUP
========================================================= */

/* Xóa kiểu card bị áp nhầm lên phần tiêu đề bên trong */
.srl-score-breakdown-grid
.srl-score-item
> .srl-score-item-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;

  width: 100% !important;
  min-height: 0 !important;
  margin: 0 0 12px !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Khôi phục đúng hình dạng thanh điểm */
.srl-score-breakdown-grid
.srl-score-item
> .srl-score-track {
  display: block !important;
  position: relative !important;

  width: 100% !important;
  height: 9px !important;
  min-height: 9px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 999px !important;
  background: #e5edf8 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.srl-score-breakdown-grid .srl-score-bar {
  display: block !important;
  height: 100% !important;
  min-height: 9px !important;

  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;

  background: linear-gradient(
    90deg,
    #155eef 0%,
    #13b8d3 100%
  ) !important;
}

/* =========================================================
   REVIEW ALTERNATIVES — PREMIUM CARDS
========================================================= */

.srl-review-detail #alternatives .srl-alternative-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-top: 22px !important;
}

/* Card công cụ */
.srl-review-detail
#alternatives
.srl-alternative-grid
> div {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;

  min-height: 130px !important;
  padding: 20px 52px 20px 20px !important;

  border: 1px solid #e1e7ef !important;
  border-radius: 16px !important;
  background: #f8fafc !important;
  overflow: hidden !important;

  cursor: default !important;

  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    background-color 0.24s ease,
    box-shadow 0.24s ease !important;
}

/* Vệt sáng nhẹ ở mép trên */
.srl-review-detail
#alternatives
.srl-alternative-grid
> div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;

  height: 3px;
  border-radius: 0 0 999px 999px;

  background: linear-gradient(
    90deg,
    #155eef 0%,
    #13b8d3 100%
  );

  opacity: 0;
  transform: scaleX(0.35);

  transition:
    opacity 0.24s ease,
    transform 0.24s ease !important;
}

/* Mũi tên góc phải */
.srl-review-detail
#alternatives
.srl-alternative-grid
> div::after {
  content: "↗";

  position: absolute;
  top: 18px;
  right: 18px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 30px;
  height: 30px;
  border-radius: 50%;

  background: #e8f0ff;
  color: #155eef;

  font-size: 15px;
  font-weight: 800;
  line-height: 1;

  transition:
    background-color 0.24s ease,
    color 0.24s ease,
    transform 0.24s ease !important;
}

/* Tên công cụ */
.srl-review-detail
#alternatives
.srl-alternative-grid
> div
> strong {
  display: block !important;
  margin: 0 0 9px !important;

  color: #101828 !important;
  font-size: 16px !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
}

/* Mô tả */
.srl-review-detail
#alternatives
.srl-alternative-grid
> div
> span {
  display: block !important;
  margin: 0 !important;

  color: #5c6f8d !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.65 !important;
}

/* Hiệu ứng hover */
.srl-review-detail
#alternatives
.srl-alternative-grid
> div:hover {
  transform: translateY(-4px) !important;
  border-color: #a9c7ff !important;
  background: #ffffff !important;

  box-shadow:
    0 16px 34px rgba(21, 94, 239, 0.11) !important;
}

.srl-review-detail
#alternatives
.srl-alternative-grid
> div:hover::before {
  opacity: 1;
  transform: scaleX(1);
}

.srl-review-detail
#alternatives
.srl-alternative-grid
> div:hover::after {
  background: #155eef;
  color: #ffffff;
  transform: translate(2px, -2px);
}

/* Mobile */
@media (max-width: 700px) {
  .srl-review-detail #alternatives .srl-alternative-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .srl-review-detail
  #alternatives
  .srl-alternative-grid
  > div {
    min-height: 0 !important;
    padding: 18px 50px 18px 17px !important;
  }

  .srl-review-detail
  #alternatives
  .srl-alternative-grid
  > div
  > strong {
    font-size: 15px !important;
  }

  .srl-review-detail
  #alternatives
  .srl-alternative-grid
  > div
  > span {
    font-size: 13.5px !important;
  }
}

/* =========================================================
   REVIEW PROS & CONS — PREMIUM CARDS
========================================================= */

.srl-review-detail #pros-cons .srl-pros-cons {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  margin-top: 22px !important;
}

/* Hai card chung */
.srl-review-detail #pros-cons .srl-pros-cons > div {
  position: relative !important;
  min-width: 0 !important;
  padding: 24px 22px 22px !important;

  border: 1px solid #e1e7ef !important;
  border-radius: 18px !important;
  overflow: hidden !important;

  transition:
    transform 0.24s ease,
    box-shadow 0.24s ease,
    border-color 0.24s ease !important;
}

/* Pros */
.srl-review-detail #pros-cons .srl-pros-cons > div:first-child {
  border-color: #c9ead7 !important;
  background:
    linear-gradient(
      145deg,
      #f4fff8 0%,
      #ffffff 100%
    ) !important;
}

/* Cons */
.srl-review-detail #pros-cons .srl-pros-cons > div:last-child {
  border-color: #f0d1d1 !important;
  background:
    linear-gradient(
      145deg,
      #fff7f6 0%,
      #ffffff 100%
    ) !important;
}

/* Thanh màu phía trên */
.srl-review-detail #pros-cons .srl-pros-cons > div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;

  height: 4px;
  border-radius: 0 0 999px 999px;
}

.srl-review-detail
#pros-cons
.srl-pros-cons
> div:first-child::before {
  background: linear-gradient(
    90deg,
    #19a463,
    #54d98c
  );
}

.srl-review-detail
#pros-cons
.srl-pros-cons
> div:last-child::before {
  background: linear-gradient(
    90deg,
    #ef5555,
    #ff8b62
  );
}

/* Tiêu đề Pros / Cons */
.srl-review-detail #pros-cons .srl-pros-cons h3 {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;

  margin: 0 0 18px !important;

  color: #101828 !important;
  font-size: 21px !important;
  font-weight: 850 !important;
  line-height: 1.3 !important;
}

/* Icon tiêu đề */
.srl-review-detail
#pros-cons
.srl-pros-cons
> div:first-child
h3::before {
  content: "✓";

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 32px;
  height: 32px;
  border-radius: 50%;

  background: #dff7e9;
  color: #14804a;

  font-size: 18px;
  font-weight: 900;
}

.srl-review-detail
#pros-cons
.srl-pros-cons
> div:last-child
h3::before {
  content: "×";

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 32px;
  height: 32px;
  border-radius: 50%;

  background: #ffe5e2;
  color: #d83d3d;

  font-size: 21px;
  font-weight: 900;
}

/* Danh sách */
.srl-review-detail #pros-cons .srl-pros-cons ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.srl-review-detail #pros-cons .srl-pros-cons li {
  position: relative !important;

  margin: 0 0 13px !important;
  padding: 0 0 0 30px !important;

  color: #5c6f8d !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.65 !important;
}

.srl-review-detail #pros-cons .srl-pros-cons li:last-child {
  margin-bottom: 0 !important;
}

/* Icon từng dòng Pros */
.srl-review-detail
#pros-cons
.srl-pros-cons
> div:first-child
li::before {
  content: "✓";

  position: absolute;
  top: 2px;
  left: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 20px;
  height: 20px;
  border-radius: 50%;

  background: #dff7e9;
  color: #14804a;

  font-size: 12px;
  font-weight: 900;
}

/* Icon từng dòng Cons */
.srl-review-detail
#pros-cons
.srl-pros-cons
> div:last-child
li::before {
  content: "×";

  position: absolute;
  top: 2px;
  left: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 20px;
  height: 20px;
  border-radius: 50%;

  background: #ffe5e2;
  color: #d83d3d;

  font-size: 14px;
  font-weight: 900;
}

/* Hover */
.srl-review-detail #pros-cons .srl-pros-cons > div:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 34px rgba(16, 24, 40, 0.09) !important;
}

.srl-review-detail
#pros-cons
.srl-pros-cons
> div:first-child:hover {
  border-color: #82d6a5 !important;
}

.srl-review-detail
#pros-cons
.srl-pros-cons
> div:last-child:hover {
  border-color: #efa5a0 !important;
}

/* Mobile */
@media (max-width: 700px) {
  .srl-review-detail #pros-cons .srl-pros-cons {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .srl-review-detail #pros-cons .srl-pros-cons > div {
    padding: 22px 18px 20px !important;
  }

  .srl-review-detail #pros-cons .srl-pros-cons h3 {
    font-size: 19px !important;
  }

  .srl-review-detail #pros-cons .srl-pros-cons li {
    font-size: 14px !important;
  }
}

/* =========================================================
   REVIEW BEST FOR — PREMIUM TAGS
========================================================= */

.srl-review-detail #best-for .srl-bestfor {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 20px !important;
}

/* Từng đối tượng sử dụng */
.srl-review-detail #best-for .srl-bestfor > span {
  position: relative !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 9px !important;

  min-height: 46px !important;
  padding: 11px 17px 11px 13px !important;

  border: 1px solid #dfe7f2 !important;
  border-radius: 14px !important;
  background: #f8fafc !important;

  color: #253858 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;

  cursor: default !important;

  transition:
    transform 0.22s ease,
    background-color 0.22s ease,
    color 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease !important;
}

/* Icon dấu check */
.srl-review-detail #best-for .srl-bestfor > span::before {
  content: "✓";

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 24px !important;

  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;

  background: #e8f0ff !important;
  color: #155eef !important;

  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  transition:
    background-color 0.22s ease,
    color 0.22s ease,
    transform 0.22s ease !important;
}

/* Hover */
.srl-review-detail #best-for .srl-bestfor > span:hover {
  transform: translateY(-3px) !important;

  border-color: #155eef !important;
  background: #1769c2 !important;
  color: #ffffff !important;

  box-shadow:
    0 12px 24px rgba(21, 94, 239, 0.16) !important;
}

.srl-review-detail #best-for .srl-bestfor > span:hover::before {
  background: #ffffff !important;
  color: #155eef !important;
  transform: scale(1.05) !important;
}

/* Mobile */
@media (max-width: 600px) {
  .srl-review-detail #best-for .srl-bestfor {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .srl-review-detail #best-for .srl-bestfor > span {
    width: 100% !important;
    min-height: 44px !important;
    padding: 10px 12px !important;

    font-size: 13px !important;
  }

  .srl-review-detail #best-for .srl-bestfor > span::before {
    flex-basis: 22px !important;
    width: 22px !important;
    height: 22px !important;
  }
}

/* Điện thoại rất nhỏ */
@media (max-width: 380px) {
  .srl-review-detail #best-for .srl-bestfor {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   REVIEW PRICING DETAILS — PREMIUM STYLE
========================================================= */

.srl-review-detail #pricing {
  position: relative !important;
}

/* Đoạn giới thiệu giá đầu tiên */
.srl-review-detail #pricing > p:first-of-type {
  position: relative !important;

  margin: 20px 0 16px !important;
  padding: 20px 22px 20px 68px !important;

  border: 1px solid #cfe0ff !important;
  border-radius: 16px !important;

  background:
    linear-gradient(
      145deg,
      #f2f7ff 0%,
      #ffffff 100%
    ) !important;

  color: #435574 !important;
  line-height: 1.75 !important;

  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease !important;
}

/* Icon giá */
.srl-review-detail #pricing > p:first-of-type::before {
  content: "$";

  position: absolute !important;
  top: 20px !important;
  left: 20px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 32px !important;
  height: 32px !important;

  border-radius: 50% !important;

  background: #155eef !important;
  color: #ffffff !important;

  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  box-shadow:
    0 8px 18px rgba(21, 94, 239, 0.20) !important;
}

/* Đoạn giải thích bổ sung */
.srl-review-detail #pricing > p:not(:first-of-type) {
  margin: 0 0 17px !important;

  color: #5c6f8d !important;
  line-height: 1.75 !important;
}

/* Box lưu ý về giá chính thức */
.srl-review-detail #pricing .srl-pricing-note {
  position: relative !important;

  margin-top: 20px !important;
  padding: 20px 22px 20px 60px !important;

  border: 1px solid #c7d9ff !important;
  border-left: 4px solid #155eef !important;
  border-radius: 14px !important;

  background:
    linear-gradient(
      135deg,
      #edf4ff 0%,
      #f8fbff 100%
    ) !important;

  color: #27466f !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.7 !important;

  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease !important;
}

/* Icon thông tin */
.srl-review-detail #pricing .srl-pricing-note::before {
  content: "i";

  position: absolute !important;
  top: 20px !important;
  left: 18px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 26px !important;
  height: 26px !important;

  border-radius: 50% !important;

  background: #155eef !important;
  color: #ffffff !important;

  font-size: 15px !important;
  font-style: normal !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

/* Hover nhẹ */
.srl-review-detail #pricing > p:first-of-type:hover,
.srl-review-detail #pricing .srl-pricing-note:hover {
  transform: translateY(-2px) !important;
  border-color: #9cbcff !important;

  box-shadow:
    0 13px 28px rgba(21, 94, 239, 0.10) !important;
}

/* Mobile */
@media (max-width: 600px) {
  .srl-review-detail #pricing > p:first-of-type {
    padding: 18px 17px 18px 57px !important;
  }

  .srl-review-detail #pricing > p:first-of-type::before {
    top: 18px !important;
    left: 16px !important;

    width: 29px !important;
    height: 29px !important;

    font-size: 16px !important;
  }

  .srl-review-detail #pricing .srl-pricing-note {
    padding: 18px 16px 18px 52px !important;
    font-size: 13.5px !important;
  }

  .srl-review-detail #pricing .srl-pricing-note::before {
    top: 18px !important;
    left: 15px !important;

    width: 24px !important;
    height: 24px !important;
  }
}

/* =========================================================
   REVIEW OVERVIEW — PREMIUM INTRODUCTION
========================================================= */

.srl-review-detail #overview {
  position: relative !important;
}

/* Tiêu đề phụ như: What Is CodeRabbit? */
.srl-review-detail #overview > h3 {
  position: relative !important;

  margin: 20px 0 14px !important;
  padding-left: 18px !important;

  color: #101828 !important;
  font-size: 20px !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
}

/* Vạch xanh bên trái tiêu đề phụ */
.srl-review-detail #overview > h3::before {
  content: "";

  position: absolute !important;
  top: 3px !important;
  bottom: 3px !important;
  left: 0 !important;

  width: 5px !important;
  border-radius: 999px !important;

  background: linear-gradient(
    180deg,
    #155eef 0%,
    #13b8d3 100%
  ) !important;
}

/* Đoạn mở đầu */
.srl-review-detail #overview > p:first-of-type {
  position: relative !important;

  margin: 18px 0 17px !important;
  padding: 22px 24px 22px 68px !important;

  border: 1px solid #d2e1ff !important;
  border-radius: 17px !important;

  background:
    linear-gradient(
      145deg,
      #f2f7ff 0%,
      #ffffff 100%
    ) !important;

  color: #435574 !important;
  line-height: 1.8 !important;

  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease !important;
}

/* Icon giới thiệu */
.srl-review-detail #overview > p:first-of-type::before {
  content: "i";

  position: absolute !important;
  top: 22px !important;
  left: 21px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 31px !important;
  height: 31px !important;
  border-radius: 50% !important;

  background: #155eef !important;
  color: #ffffff !important;

  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  box-shadow:
    0 8px 18px rgba(21, 94, 239, 0.18) !important;
}

/* Các đoạn văn còn lại */
.srl-review-detail #overview > p:not(:first-of-type) {
  margin: 0 0 16px !important;

  color: #5c6f8d !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
}

/* Đoạn cuối không tạo khoảng trống thừa */
.srl-review-detail #overview > p:last-child {
  margin-bottom: 0 !important;
}

/* Hover nhẹ cho phần giới thiệu */
.srl-review-detail #overview > p:first-of-type:hover {
  transform: translateY(-2px) !important;
  border-color: #9fbeff !important;

  box-shadow:
    0 13px 28px rgba(21, 94, 239, 0.09) !important;
}

/* Mobile */
@media (max-width: 600px) {
  .srl-review-detail #overview > h3 {
    font-size: 18px !important;
    padding-left: 15px !important;
  }

  .srl-review-detail #overview > p:first-of-type {
    padding: 18px 17px 18px 57px !important;
    font-size: 14px !important;
  }

  .srl-review-detail #overview > p:first-of-type::before {
    top: 18px !important;
    left: 16px !important;

    width: 29px !important;
    height: 29px !important;

    font-size: 15px !important;
  }

  .srl-review-detail #overview > p:not(:first-of-type) {
    font-size: 14px !important;
    line-height: 1.75 !important;
  }
}

/* =========================================================
   REVIEW FINAL VERDICT — PREMIUM CONCLUSION
========================================================= */

.srl-review-detail .srl-final-verdict {
  position: relative !important;
  overflow: hidden !important;

  border: 1px solid #d8e4fb !important;
  background:
    linear-gradient(
      145deg,
      #f6f9ff 0%,
      #ffffff 58%,
      #f9fcff 100%
    ) !important;

  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease !important;
}

/* Thanh gradient trên cùng */
.srl-review-detail .srl-final-verdict::before {
  content: "";

  position: absolute !important;
  top: 0 !important;
  left: 28px !important;
  right: 28px !important;

  height: 4px !important;
  border-radius: 0 0 999px 999px !important;

  background:
    linear-gradient(
      90deg,
      #155eef 0%,
      #13b8d3 100%
    ) !important;
}

/* Hàng tiêu đề */
.srl-final-verdict-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;

  margin: 0 0 20px !important;
  padding-top: 4px !important;
}

/* Tiêu đề Final Verdict */
.srl-final-verdict-head h2 {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #101828 !important;
}

/* Icon cạnh tiêu đề */
.srl-final-verdict-head h2::before {
  content: "★";

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 38px !important;

  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;

  background:
    linear-gradient(
      135deg,
      #155eef,
      #13b8d3
    ) !important;

  color: #ffffff !important;

  font-size: 17px !important;
  line-height: 1 !important;

  box-shadow:
    0 9px 20px rgba(21, 94, 239, 0.20) !important;
}

/* Nhãn Editorial Take */
.srl-final-verdict-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 8px 13px !important;

  border: 1px solid #cbdcff !important;
  border-radius: 999px !important;

  background: #edf4ff !important;
  color: #155eef !important;

  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Nội dung kết luận */
.srl-review-detail
.srl-final-verdict
> p:first-of-type {
  position: relative !important;

  margin: 0 !important;
  padding: 21px 23px !important;

  border: 1px solid #dfe7f2 !important;
  border-left: 4px solid #155eef !important;
  border-radius: 15px !important;

  background: rgba(255, 255, 255, 0.82) !important;

  color: #526785 !important;
  font-size: 15px !important;
  line-height: 1.85 !important;
}

/* Các đoạn kết luận bổ sung */
.srl-review-detail
.srl-final-verdict
> p:not(:first-of-type) {
  margin: 16px 0 0 !important;

  color: #5c6f8d !important;
  line-height: 1.8 !important;
}

/* Hover */
.srl-review-detail .srl-final-verdict:hover {
  transform: translateY(-3px) !important;
  border-color: #aac5ff !important;

  box-shadow:
    0 17px 36px rgba(21, 94, 239, 0.10) !important;
}

/* Mobile */
@media (max-width: 600px) {
  .srl-final-verdict-head {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    gap: 13px !important;
  }

  .srl-final-verdict-head h2::before {
    flex-basis: 34px !important;
    width: 34px !important;
    height: 34px !important;
    font-size: 15px !important;
  }

  .srl-final-verdict-badge {
    padding: 7px 11px !important;
    font-size: 11px !important;
  }

  .srl-review-detail
  .srl-final-verdict
  > p:first-of-type {
    padding: 18px 17px !important;
    font-size: 14px !important;
    line-height: 1.75 !important;
  }
}

/* =========================================================
   REVIEW FINAL CTA — PREMIUM CONVERSION BOX
========================================================= */

.srl-review-detail .srl-final-cta-box {
  position: relative !important;
  overflow: hidden !important;

  border: 1px solid #ffd6bd !important;
  background:
    radial-gradient(
      circle at 92% 12%,
      rgba(255, 126, 31, 0.13),
      transparent 29%
    ),
    linear-gradient(
      145deg,
      #fff8f2 0%,
      #ffffff 56%,
      #fffaf6 100%
    ) !important;

  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease !important;
}

/* Thanh cam phía trên */
.srl-review-detail .srl-final-cta-box::before {
  content: "";

  position: absolute !important;
  top: 0 !important;
  left: 28px !important;
  right: 28px !important;

  height: 4px !important;
  border-radius: 0 0 999px 999px !important;

  background:
    linear-gradient(
      90deg,
      #ff8a1f 0%,
      #ff5f2e 100%
    ) !important;
}

/* Hàng tiêu đề */
.srl-final-cta-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;

  margin: 0 0 16px !important;
  padding-top: 3px !important;
}

.srl-final-cta-head h2 {
  margin: 0 !important;
  padding: 0 !important;
}

/* Nhãn Official Website */
.srl-final-cta-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 8px 13px !important;

  border: 1px solid #ffd0b1 !important;
  border-radius: 999px !important;

  background: #fff0e5 !important;
  color: #e85f0c !important;

  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Nội dung CTA */
.srl-review-detail .srl-final-cta-box > p {
  max-width: 760px !important;
  margin: 0 0 21px !important;

  color: #5c6f8d !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
}

/* Nút CTA cuối bài */
.srl-review-detail
.srl-final-cta-box
> .srl-review-cta {
  position: relative !important;
  inset: auto !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  min-width: 190px !important;
  min-height: 50px !important;

  margin: 0 !important;
  padding: 13px 22px !important;

  border-radius: 13px !important;

  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  white-space: nowrap !important;

  box-shadow:
    0 12px 27px rgba(255, 104, 34, 0.24) !important;
}

/* Hover toàn box */
.srl-review-detail .srl-final-cta-box:hover {
  transform: translateY(-3px) !important;
  border-color: #ffb98b !important;

  box-shadow:
    0 17px 36px rgba(255, 104, 34, 0.11) !important;
}

/* Hover nút */
.srl-review-detail
.srl-final-cta-box
> .srl-review-cta:hover {
  transform: translateY(-3px) scale(1.02) !important;

  box-shadow:
    0 16px 32px rgba(255, 104, 34, 0.31) !important;
}

/* Mobile */
@media (max-width: 600px) {
  .srl-final-cta-head {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  .srl-final-cta-badge {
    padding: 7px 11px !important;
    font-size: 11px !important;
  }

  .srl-review-detail .srl-final-cta-box > p {
    font-size: 14px !important;
    line-height: 1.75 !important;
  }

  .srl-review-detail
  .srl-final-cta-box
  > .srl-review-cta {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
  }
}

/* =========================================================
   RELATED REVIEWS — PREMIUM CARDS
========================================================= */

.srl-review-detail .srl-related-premium {
  position: relative !important;
  overflow: hidden !important;

  border: 1px solid #dce6f5 !important;

  background:
    radial-gradient(
      circle at 92% 5%,
      rgba(21, 94, 239, 0.07),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      #ffffff 0%,
      #f9fbff 100%
    ) !important;
}

/* Thanh gradient trên cùng */
.srl-review-detail .srl-related-premium::before {
  content: "";

  position: absolute !important;
  top: 0 !important;
  left: 28px !important;
  right: 28px !important;

  height: 4px !important;
  border-radius: 0 0 999px 999px !important;

  background:
    linear-gradient(
      90deg,
      #7557ff 0%,
      #155eef 52%,
      #13b8d3 100%
    ) !important;
}

.srl-review-detail .srl-related-premium > h2 {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;

  margin-bottom: 10px !important;
}

/* Icon cạnh tiêu đề */
.srl-review-detail .srl-related-premium > h2::before {
  content: "✦";

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 36px !important;
  height: 36px !important;
  flex: 0 0 36px !important;

  border-radius: 50% !important;

  background:
    linear-gradient(
      135deg,
      #7557ff,
      #155eef
    ) !important;

  color: #ffffff !important;
  font-size: 16px !important;

  box-shadow:
    0 9px 20px rgba(78, 70, 229, 0.20) !important;
}

.srl-review-detail .srl-related-premium > p {
  margin-bottom: 24px !important;
  color: #5c6f8d !important;
}

/* Giữ bố cục carousel hiện có */
.srl-review-detail
.srl-related-premium
.srl-related-grid {
  gap: 14px !important;
}

/* Vỏ ngoài của card */
.srl-related-card-shell {
  min-width: 0 !important;
  height: 100% !important;
}

/* Card */
.srl-related-card-premium {
  position: relative !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;

  width: 100% !important;
  height: 100% !important;
  min-height: 190px !important;

  padding: 22px 18px 19px !important;

  border: 1px solid #dfe6ef !important;
  border-radius: 17px !important;

  background: #ffffff !important;
  overflow: hidden !important;

  color: inherit !important;
  text-align: center !important;
  text-decoration: none !important;

  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease,
    background-color 0.24s ease !important;
}

/* Vệt màu trên card */
.srl-related-card-premium::before {
  content: "";

  position: absolute !important;
  top: 0 !important;
  left: 18px !important;
  right: 18px !important;

  height: 3px !important;
  border-radius: 0 0 999px 999px !important;

  background:
    linear-gradient(
      90deg,
      #7557ff,
      #155eef,
      #13b8d3
    ) !important;

  opacity: 0 !important;
  transform: scaleX(0.35) !important;

  transition:
    opacity 0.24s ease,
    transform 0.24s ease !important;
}

/* Icon góc phải */
.srl-related-card-premium::after {
  content: "↗";

  position: absolute !important;
  top: 14px !important;
  right: 14px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 27px !important;
  height: 27px !important;

  border-radius: 50% !important;

  background: #edf3ff !important;
  color: #155eef !important;

  font-size: 13px !important;
  font-weight: 900 !important;

  opacity: 0 !important;
  transform: translateY(3px) !important;

  transition:
    opacity 0.24s ease,
    transform 0.24s ease,
    background-color 0.24s ease,
    color 0.24s ease !important;
}

/* Logo */
.srl-related-card-premium .srl-related-logo {
  display: block !important;

  width: 46px !important;
  height: 46px !important;
  max-width: 46px !important;

  margin: 0 auto 13px !important;
  padding: 8px !important;

  border: 1px solid #e3e9f2 !important;
  border-radius: 13px !important;

  background: #ffffff !important;

  object-fit: contain !important;

  box-shadow:
    0 7px 17px rgba(16, 24, 40, 0.07) !important;
}

/* Tiêu đề */
.srl-related-card-premium .srl-related-title {
  display: block !important;

  margin: 0 0 7px !important;

  color: #101828 !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  line-height: 1.4 !important;
}

/* Rating */
.srl-related-card-premium .srl-related-rating {
  margin: 0 0 8px !important;

  color: #f59e0b !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
}

/* Mô tả */
.srl-related-card-premium .srl-related-description {
  margin: 0 !important;

  color: #667892 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
}

/* Hover card */
.srl-related-card-premium:hover {
  transform: translateY(-5px) !important;

  border-color: #abc5ff !important;
  background: #ffffff !important;

  box-shadow:
    0 17px 34px rgba(21, 94, 239, 0.12) !important;
}

.srl-related-card-premium:hover::before {
  opacity: 1 !important;
  transform: scaleX(1) !important;
}

.srl-related-card-premium:hover::after {
  opacity: 1 !important;
  transform: translateY(0) !important;

  background: #155eef !important;
  color: #ffffff !important;
}

/* Nút điều hướng carousel */
.srl-related-premium button,
.srl-related-premium [role="button"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 38px !important;
  height: 38px !important;

  border: 1px solid #dce5f3 !important;
  border-radius: 50% !important;

  background: #ffffff !important;
  color: #155eef !important;

  box-shadow:
    0 8px 18px rgba(16, 24, 40, 0.08) !important;

  transition:
    transform 0.22s ease,
    background-color 0.22s ease,
    color 0.22s ease,
    border-color 0.22s ease !important;
}

.srl-related-premium button:hover,
.srl-related-premium [role="button"]:hover {
  transform: scale(1.07) !important;

  border-color: #155eef !important;
  background: #155eef !important;
  color: #ffffff !important;
}

/* Mobile */
@media (max-width: 600px) {
  .srl-related-card-premium {
    min-height: 175px !important;
    padding: 20px 16px 17px !important;
  }

  .srl-related-card-premium .srl-related-logo {
    width: 43px !important;
    height: 43px !important;
  }

  .srl-related-card-premium .srl-related-title {
    font-size: 14px !important;
  }

  .srl-related-card-premium .srl-related-description {
    font-size: 12.5px !important;
  }

  .srl-related-premium button,
  .srl-related-premium [role="button"] {
    width: 35px !important;
    height: 35px !important;
  }
}

/* =========================================================
   REVIEW HERO TAGS + SCORE CARDS
========================================================= */

/* Các tag ngành phía trên tiêu đề */
.srl-review-detail .srl-review-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 9px !important;
  margin: 0 0 18px !important;
}

.srl-review-detail .srl-review-tags > span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;

  padding: 8px 13px !important;

  border: 1px solid #d7e4ff !important;
  border-radius: 999px !important;

  background: #f3f7ff !important;
  color: #155eef !important;

  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1 !important;

  cursor: default !important;

  transition:
    transform 0.22s ease,
    background-color 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease,
    box-shadow 0.22s ease !important;
}

/* Chấm nhỏ trước tên tag */
.srl-review-detail .srl-review-tags > span::before {
  content: "";

  width: 7px !important;
  height: 7px !important;
  flex: 0 0 7px !important;

  border-radius: 50% !important;

  background: linear-gradient(
    135deg,
    #155eef,
    #13b8d3
  ) !important;
}

/* Hover tag */
.srl-review-detail .srl-review-tags > span:hover {
  transform: translateY(-2px) !important;

  border-color: #155eef !important;
  background: #155eef !important;
  color: #ffffff !important;

  box-shadow:
    0 9px 20px rgba(21, 94, 239, 0.16) !important;
}

.srl-review-detail .srl-review-tags > span:hover::before {
  background: #ffffff !important;
}

/* Hàng Rating – Pricing – Users */
.srl-review-detail .srl-score-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-top: 24px !important;
}

/* Từng ô thông tin */
.srl-review-detail .srl-score-row > div {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;

  min-width: 0 !important;
  min-height: 94px !important;

  padding: 19px 17px !important;

  border: 1px solid #dfe6ef !important;
  border-radius: 16px !important;

  background:
    linear-gradient(
      145deg,
      #f8fafc 0%,
      #ffffff 100%
    ) !important;

  overflow: hidden !important;

  transition:
    transform 0.23s ease,
    border-color 0.23s ease,
    box-shadow 0.23s ease,
    background-color 0.23s ease !important;
}

/* Thanh gradient phía trên mỗi ô */
.srl-review-detail .srl-score-row > div::before {
  content: "";

  position: absolute !important;
  top: 0 !important;
  left: 16px !important;
  right: 16px !important;

  height: 3px !important;
  border-radius: 0 0 999px 999px !important;

  background: linear-gradient(
    90deg,
    #155eef 0%,
    #13b8d3 100%
  ) !important;

  opacity: 0.65 !important;

  transition:
    opacity 0.23s ease,
    left 0.23s ease,
    right 0.23s ease !important;
}

/* Giá trị chính */
.srl-review-detail .srl-score-row > div > strong {
  display: block !important;
  margin: 0 0 7px !important;

  color: #101828 !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1.3 !important;
}

/* Nhãn nhỏ */
.srl-review-detail .srl-score-row > div > span {
  display: block !important;
  margin: 0 !important;

  color: #667892 !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 1.4 !important;
}

/* Hover ô */
.srl-review-detail .srl-score-row > div:hover {
  transform: translateY(-4px) !important;

  border-color: #aac5ff !important;
  background: #ffffff !important;

  box-shadow:
    0 15px 30px rgba(21, 94, 239, 0.11) !important;
}

.srl-review-detail .srl-score-row > div:hover::before {
  left: 0 !important;
  right: 0 !important;
  opacity: 1 !important;
}

/* Mobile */
@media (max-width: 700px) {
  .srl-review-detail .srl-score-row {
    grid-template-columns: 1fr !important;
    gap: 11px !important;
  }

  .srl-review-detail .srl-score-row > div {
    min-height: 78px !important;
    padding: 16px !important;
  }

  .srl-review-detail .srl-score-row > div > strong {
    font-size: 17px !important;
  }

  .srl-review-detail .srl-review-tags > span {
    padding: 7px 11px !important;
    font-size: 11px !important;
  }
}

/* =========================================================
   STANDARD REVIEW CONTENT SECTIONS
========================================================= */

.srl-review-detail .srl-standard-section {
  position: relative !important;
  overflow: hidden !important;

  border: 1px solid #dfe7f2 !important;

  background:
    radial-gradient(
      circle at 94% 8%,
      rgba(21, 94, 239, 0.055),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      #ffffff 0%,
      #fbfdff 100%
    ) !important;

  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease !important;
}

/* Thanh gradient phía trên */
.srl-review-detail .srl-standard-section::before {
  content: "";

  position: absolute !important;
  top: 0 !important;
  left: 28px !important;
  right: 28px !important;

  height: 4px !important;
  border-radius: 0 0 999px 999px !important;

  background:
    linear-gradient(
      90deg,
      #155eef 0%,
      #13b8d3 100%
    ) !important;

  opacity: 0.8 !important;
}

/* Tiêu đề */
.srl-review-detail .srl-standard-section > h2 {
  position: relative !important;

  margin-bottom: 20px !important;
  padding-left: 18px !important;
}

/* Vạch nhỏ cạnh tiêu đề */
.srl-review-detail .srl-standard-section > h2::before {
  content: "";

  position: absolute !important;
  top: 5px !important;
  bottom: 5px !important;
  left: 0 !important;

  width: 5px !important;
  border-radius: 999px !important;

  background:
    linear-gradient(
      180deg,
      #155eef,
      #13b8d3
    ) !important;
}

/* Đoạn đầu nổi bật nhẹ */
.srl-review-detail
.srl-standard-section
> p:first-of-type {
  margin: 0 0 17px !important;
  padding: 19px 21px !important;

  border: 1px solid #dce7f8 !important;
  border-left: 4px solid #155eef !important;
  border-radius: 14px !important;

  background:
    linear-gradient(
      145deg,
      #f5f9ff 0%,
      #ffffff 100%
    ) !important;

  color: #526785 !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
}

/* Các đoạn còn lại */
.srl-review-detail
.srl-standard-section
> p:not(:first-of-type) {
  margin: 0 0 16px !important;

  color: #5c6f8d !important;
  font-size: 15px !important;
  line-height: 1.82 !important;
}

.srl-review-detail
.srl-standard-section
> p:last-child {
  margin-bottom: 0 !important;
}

/* Hover nhẹ */
.srl-review-detail .srl-standard-section:hover {
  transform: translateY(-3px) !important;
  border-color: #afc8f9 !important;

  box-shadow:
    0 16px 34px rgba(21, 94, 239, 0.09) !important;
}

/* Mobile */
@media (max-width: 600px) {
  .srl-review-detail .srl-standard-section > h2 {
    padding-left: 15px !important;
  }

  .srl-review-detail
  .srl-standard-section
  > p:first-of-type {
    padding: 17px 16px !important;
    font-size: 14px !important;
    line-height: 1.75 !important;
  }

  .srl-review-detail
  .srl-standard-section
  > p:not(:first-of-type) {
    font-size: 14px !important;
    line-height: 1.75 !important;
  }
}

/* =========================================================
   REVIEW TEXT PARAGRAPHS — AUTO CONTENT CARDS
========================================================= */

/*
 * Tự đóng khung các đoạn thứ hai trở đi trong:
 * - Overview
 * - Pricing Details
 * - Các section nội dung thông thường
 */
.srl-review-detail #overview > p:not(:first-of-type),
.srl-review-detail #pricing > p:not(:first-of-type),
.srl-review-detail .srl-standard-section > p:not(:first-of-type) {
  position: relative !important;
  display: block !important;

  margin: 14px 0 0 !important;
  padding: 18px 20px !important;

  border: 1px solid #dfe7f2 !important;
  border-radius: 14px !important;

  background:
    linear-gradient(
      145deg,
      #f9fbff 0%,
      #ffffff 100%
    ) !important;

  color: #5c6f8d !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.8 !important;

  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    background-color 0.22s ease,
    box-shadow 0.22s ease !important;
}

/* Vạch nhấn nhỏ bên trái */
.srl-review-detail #overview > p:not(:first-of-type)::before,
.srl-review-detail #pricing > p:not(:first-of-type)::before,
.srl-review-detail .srl-standard-section > p:not(:first-of-type)::before {
  content: "";

  position: absolute !important;
  top: 17px !important;
  bottom: 17px !important;
  left: 0 !important;

  width: 3px !important;
  border-radius: 0 999px 999px 0 !important;

  background:
    linear-gradient(
      180deg,
      #155eef 0%,
      #13b8d3 100%
    ) !important;

  opacity: 0.65 !important;
}

/* Hover nhẹ */
.srl-review-detail #overview > p:not(:first-of-type):hover,
.srl-review-detail #pricing > p:not(:first-of-type):hover,
.srl-review-detail .srl-standard-section > p:not(:first-of-type):hover {
  transform: translateY(-2px) !important;

  border-color: #b5caf5 !important;
  background: #ffffff !important;

  box-shadow:
    0 12px 25px rgba(21, 94, 239, 0.08) !important;
}

/* Giữ Pricing Note là kiểu thông báo riêng */
.srl-review-detail #pricing .srl-pricing-note {
  margin-top: 14px !important;
}

/* Mobile */
@media (max-width: 600px) {
  .srl-review-detail #overview > p:not(:first-of-type),
  .srl-review-detail #pricing > p:not(:first-of-type),
  .srl-review-detail .srl-standard-section > p:not(:first-of-type) {
    padding: 16px !important;

    font-size: 14px !important;
    line-height: 1.75 !important;
  }

  .srl-review-detail #overview > p:not(:first-of-type)::before,
  .srl-review-detail #pricing > p:not(:first-of-type)::before,
  .srl-review-detail .srl-standard-section > p:not(:first-of-type)::before {
    top: 15px !important;
    bottom: 15px !important;
  }
}

/* =========================================================
   RELATED REVIEWS ARROWS — CENTER & ALIGN
========================================================= */

.srl-review-detail
.srl-related-reviews
.srl-related-arrow {
  position: absolute !important;
  top: 50% !important;
  bottom: auto !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  margin: 0 !important;

  border: 1px solid #dce5f3 !important;
  border-radius: 50% !important;

  background: #ffffff !important;
  color: #155eef !important;

  font-size: 25px !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  transform: translateY(-50%) !important;
  z-index: 30 !important;

  box-shadow: 0 8px 18px rgba(16, 24, 40, 0.10) !important;
}

/* Nút trái */
.srl-review-detail
.srl-related-reviews
.srl-related-prev {
  left: 8px !important;
  right: auto !important;
}

/* Nút phải */
.srl-review-detail
.srl-related-reviews
.srl-related-next {
  right: 8px !important;
  left: auto !important;
}

/* Hover vẫn giữ đúng tâm */
.srl-review-detail
.srl-related-reviews
.srl-related-arrow:hover {
  background: #155eef !important;
  color: #ffffff !important;
  border-color: #155eef !important;

  transform: translateY(-50%) scale(1.06) !important;
}

/* Không cho icon bên trong bị lệch */
.srl-review-detail
.srl-related-reviews
.srl-related-arrow span {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  transform: translateY(-1px) !important;
}

/* =========================================================
   RELATED REVIEWS — ARROWS ONLY
========================================================= */

.srl-review-detail
.srl-related-reviews
.srl-related-arrow {
  position: absolute !important;
  top: 50% !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 30px !important;
  height: 46px !important;
  min-width: 0 !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  color: #155eef !important;
  font-size: 34px !important;
  font-weight: 500 !important;
  line-height: 1 !important;

  transform: translateY(-50%) !important;
  cursor: pointer !important;
  z-index: 30 !important;

  transition:
    color 0.2s ease,
    transform 0.2s ease !important;
}

/* Mũi tên trái */
.srl-review-detail
.srl-related-reviews
.srl-related-prev {
  left: 10px !important;
  right: auto !important;
}

/* Mũi tên phải */
.srl-review-detail
.srl-related-reviews
.srl-related-next {
  right: 10px !important;
  left: auto !important;
}

/* Hover chỉ đổi màu và nhích nhẹ */
.srl-review-detail
.srl-related-reviews
.srl-related-prev:hover {
  background: transparent !important;
  color: #0f3fae !important;
  transform: translateY(-50%) translateX(-2px) !important;
  box-shadow: none !important;
}

.srl-review-detail
.srl-related-reviews
.srl-related-next:hover {
  background: transparent !important;
  color: #0f3fae !important;
  transform: translateY(-50%) translateX(2px) !important;
  box-shadow: none !important;
}

/* Tắt mọi vòng tròn hoặc nền còn sót */
.srl-review-detail
.srl-related-reviews
.srl-related-arrow::before,
.srl-review-detail
.srl-related-reviews
.srl-related-arrow::after {
  display: none !important;
  content: none !important;
}

/* =========================================================
   SRL — EACH PARAGRAPH GETS ITS OWN FRAME
   Applies to Alternatives and Final Verdict
========================================================= */

/* Alternatives: mỗi đoạn văn là một khung riêng */
.srl-review-main > #alternatives > p,

/*
 * Final Verdict trong format review hiện tại:
 * nằm trước Ready to Try và Related Reviews,
 * tức box thứ 3 tính từ cuối.
 */
.srl-review-main > .srl-review-box:nth-last-of-type(3) > p {
  display: block;
  width: 100%;
  box-sizing: border-box;

  background: #ffffff !important;
  border: 1px solid #d7e1ef !important;
  border-left: 4px solid #1f6fff !important;
  border-radius: 16px !important;

  padding: 20px 24px !important;
  margin: 16px 0 !important;

  box-shadow: none !important;
}

/* Khoảng cách khung đầu tiên với tiêu đề */
.srl-review-main > #alternatives > h2 + p,
.srl-review-main > .srl-review-box:nth-last-of-type(3) > h2 + p {
  margin-top: 18px !important;
}

/* Link bên trong khung vẫn hiển thị bình thường */
.srl-review-main > #alternatives > p a,
.srl-review-main > .srl-review-box:nth-last-of-type(3) > p a {
  position: relative;
  z-index: 1;
}

/* Mobile */
@media (max-width: 768px) {
  .srl-review-main > #alternatives > p,
  .srl-review-main > .srl-review-box:nth-last-of-type(3) > p {
    padding: 17px 18px !important;
    border-radius: 14px !important;
    margin: 14px 0 !important;
  }
}

/* Hiệu ứng nổi lên khi rê chuột */
.srl-review-main > #alternatives > p,
.srl-review-main > .srl-review-box:nth-last-of-type(3) > p {
  position: relative;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease !important;
  will-change: transform;
}

/* Chỉ chạy hover trên máy tính */
@media (hover: hover) and (pointer: fine) {
  .srl-review-main > #alternatives > p:hover,
  .srl-review-main > .srl-review-box:nth-last-of-type(3) > p:hover {
    transform: translateY(-6px);
    border-color: #b8ceff !important;
    border-left-color: #1f6fff !important;
    box-shadow: 0 14px 30px rgba(31, 111, 255, 0.14) !important;
  }
}

/* =========================================================
   SRL — AUTO HOVER FOR ALL PARAGRAPH CARDS
   Mỗi đoạn <p> thêm mới trong review box đều tự nẩy
========================================================= */

.srl-review-main > .srl-review-box > p {
  position: relative;
  transform: translateY(0) !important;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease,
    background-color 0.25s ease !important;

  will-change: transform;
}

/* Hover chỉ chạy trên máy có chuột */
@media (hover: hover) and (pointer: fine) {
  .srl-review-main > .srl-review-box > p:hover {
    transform: translateY(-6px) !important;

    border-color: #b8ceff !important;
    border-left-color: #1f6fff !important;

    background: #ffffff !important;

    box-shadow:
      0 14px 30px rgba(31, 111, 255, 0.14) !important;
  }
}

/* =========================================================
   FIX LOGO CENTER – COMPARE TABLE
   ========================================================= */

.srl-compare-table .srl-compare-product-logo,
.srl-compare-page .srl-compare-preview-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 !important;
  overflow: hidden !important;

  box-sizing: border-box !important;
}

.srl-compare-table .srl-compare-product-logo img,
.srl-compare-page .srl-compare-preview-logo img {
  --logo-x: 0px;
  --logo-y: 0px;
  --logo-scale: 0.88;

  display: block !important;

  width: 38px !important;
  height: 38px !important;
  max-width: none !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: contain !important;
  object-position: center center !important;

  position: relative !important;
  top: auto !important;
  left: auto !important;

  transform:
    translate(var(--logo-x), var(--logo-y))
    scale(var(--logo-scale)) !important;

  transform-origin: center center !important;
}


/* ChatGPT */
.srl-compare-page img[src*="chatgpt.png"] {
  --logo-y: 1px;
  --logo-scale: 0.88;
}


/* Claude */
.srl-compare-page img[src*="claude.png"] {
  --logo-y: 4px;
  --logo-scale: 0.86;
}


/* Google Gemini */
.srl-compare-page img[src*="gemini.png"] {
  --logo-y: 1px;
  --logo-scale: 0.90;
}


/* ActiveCampaign */
.srl-compare-page img[src*="activecampaign.png"] {
  --logo-y: 3px;
  --logo-scale: 0.88;
}


/* Canva */
.srl-compare-page img[src*="Canva.png"],
.srl-compare-page img[src*="canva.png"] {
  --logo-y: 1px;
  --logo-scale: 0.90;
}


/* Adobe Express */
.srl-compare-page img[src*="adobe.png"] {
  --logo-y: 2px;
  --logo-scale: 0.88;
}


/* n8n */
.srl-compare-page img[src*="n8n.png"] {
  --logo-y: 5px;
  --logo-scale: 0.86;
}


/* Klaviyo */
.srl-compare-page img[src*="klaviyo.png"] {
  --logo-y: 4px;
  --logo-scale: 0.88;
}

/* =========================================================
   PREMIUM COMPARE TABLE
   ========================================================= */

.srl-compare-page .srl-compare-table-wrap {
  position: relative;
  overflow: hidden !important;

  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  border-radius: 26px !important;

  background: #ffffff !important;

  box-shadow:
    0 24px 60px rgba(15, 23, 42, 0.10),
    0 8px 22px rgba(37, 99, 235, 0.05) !important;
}


/* Thanh màu phía trên bảng */
.srl-compare-page .srl-compare-table-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;

  height: 4px;

  background: linear-gradient(
    90deg,
    #2563eb,
    #7c3aed,
    #0ea5e9
  );

  z-index: 5;
}


/* Bảng chính */
.srl-compare-page .srl-compare-table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 !important;

  background: #ffffff !important;
}


/* Toàn bộ ô */
.srl-compare-page .srl-compare-table th,
.srl-compare-page .srl-compare-table td {
  padding: 20px 20px !important;

  border-right: 1px solid rgba(148, 163, 184, 0.16) !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18) !important;

  vertical-align: middle !important;
}


/* Bỏ viền cột cuối */
.srl-compare-page .srl-compare-table th:last-child,
.srl-compare-page .srl-compare-table td:last-child {
  border-right: 0 !important;
}


/* Bỏ viền hàng cuối */
.srl-compare-page .srl-compare-table tbody tr:last-child td {
  border-bottom: 0 !important;
}


/* Header sản phẩm */
.srl-compare-page .srl-compare-table thead th {
  padding-top: 24px !important;
  padding-bottom: 24px !important;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(37, 99, 235, 0.08),
      transparent 42%
    ),
    linear-gradient(
      180deg,
      #f8fbff 0%,
      #f1f5f9 100%
    ) !important;
}


/* Ô Criteria */
.srl-compare-page .srl-compare-table thead th:first-child {
  color: #64748b !important;

  font-size: 11px !important;
  font-weight: 900 !important;

  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
}


/* Logo + tên sản phẩm */
.srl-compare-page .srl-compare-product-head {
  display: flex !important;
  align-items: center !important;

  gap: 14px !important;
  min-height: 58px !important;
}


/* Khung logo */
.srl-compare-page .srl-compare-product-logo {
  flex: 0 0 50px !important;

  width: 50px !important;
  height: 50px !important;

  border: 1px solid rgba(148, 163, 184, 0.20) !important;
  border-radius: 16px !important;

  background: #ffffff !important;

  box-shadow:
    0 10px 20px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}


/* Tên sản phẩm */
.srl-compare-page .srl-compare-product-head strong {
  color: #0f172a !important;

  font-size: 16px !important;
  font-weight: 900 !important;

  line-height: 1.3 !important;
  letter-spacing: -0.015em !important;
}


/* Category nhỏ bên dưới */
.srl-compare-page .srl-compare-product-head span span {
  margin-top: 5px !important;

  color: #64748b !important;

  font-size: 10px !important;
  font-weight: 800 !important;

  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
}


/* Zebra row */
.srl-compare-page .srl-compare-table tbody tr:nth-child(even) td {
  background: #fbfdff !important;
}

.srl-compare-page .srl-compare-table tbody tr:nth-child(odd) td {
  background: #ffffff !important;
}


/* Hover cả hàng */
.srl-compare-page .srl-compare-table tbody tr td {
  transition:
    background-color 0.22s ease,
    box-shadow 0.22s ease !important;
}

.srl-compare-page .srl-compare-table tbody tr:hover td {
  background: #f4f8ff !important;
}


/* Cột tiêu chí */
.srl-compare-page .srl-compare-table td:first-child {
  background:
    linear-gradient(
      90deg,
      #fbfdff 0%,
      #f8fafc 100%
    ) !important;

  color: #0f172a !important;

  font-size: 13px !important;
  font-weight: 900 !important;
}


/* Icon tiêu chí */
.srl-compare-page .srl-compare-criteria-icon {
  display: inline-grid !important;
  place-items: center !important;

  width: 32px !important;
  height: 32px !important;

  border: 1px solid rgba(37, 99, 235, 0.10) !important;
  border-radius: 10px !important;

  color: #2563eb !important;

  background:
    linear-gradient(
      135deg,
      #eff6ff,
      #e0e7ff
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}


/* Nội dung Best For và Platform */
.srl-compare-page .srl-compare-table td {
  color: #475569 !important;

  font-size: 14px !important;
  line-height: 1.7 !important;
}


/* Rating */
.srl-compare-page .srl-rating-pill {
  min-height: 36px !important;
  padding: 0 12px !important;

  border: 1px solid rgba(34, 197, 94, 0.12) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}


/* Rating cao nhất */
.srl-compare-page .srl-rating-pill.is-best {
  color: #854d0e !important;

  border-color: rgba(245, 158, 11, 0.20) !important;

  background:
    linear-gradient(
      180deg,
      #fff7d6,
      #fef3c7
    ) !important;

  box-shadow:
    0 6px 14px rgba(245, 158, 11, 0.10) !important;
}


/* Pricing pill */
.srl-compare-page .srl-pricing-pill {
  min-height: 36px !important;
  padding: 0 13px !important;

  border: 1px solid rgba(37, 99, 235, 0.10) !important;

  background:
    linear-gradient(
      180deg,
      #e8f1ff,
      #dbeafe
    ) !important;
}


/* Free Access pill */
.srl-compare-page .srl-free-pill {
  min-height: 34px !important;
  padding: 0 12px !important;

  border: 1px solid transparent !important;
}


/* Nút Read Review */
.srl-compare-page .srl-compare-review-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 42px !important;
  padding: 0 15px !important;

  border: 1px solid rgba(37, 99, 235, 0.12) !important;
  border-radius: 13px !important;

  color: #2563eb !important;

  background:
    linear-gradient(
      180deg,
      #eff6ff,
      #e8f1ff
    ) !important;

  font-size: 13px !important;
  font-weight: 900 !important;

  box-shadow:
    0 8px 18px rgba(37, 99, 235, 0.08) !important;

  transition:
    transform 0.22s ease,
    color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease !important;
}


.srl-compare-page .srl-compare-review-link:hover {
  transform: translateY(-3px) !important;

  color: #ffffff !important;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #7c3aed
    ) !important;

  box-shadow:
    0 13px 25px rgba(37, 99, 235, 0.22) !important;
}


/* Mobile */
@media (max-width: 768px) {

  .srl-compare-page .srl-compare-table-wrap {
    overflow-x: auto !important;
    border-radius: 20px !important;
  }

  .srl-compare-page .srl-compare-table {
    min-width: 900px !important;
  }

  .srl-compare-page .srl-compare-table th,
  .srl-compare-page .srl-compare-table td {
    padding: 16px !important;
  }
}

/* =========================================================
   PREMIUM POPULAR COMPARISONS
   ========================================================= */

.srl-compare-page .srl-compare-section:has(.srl-compare-popular-grid) {
  position: relative;
  padding: 42px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.20);
  border-radius: 30px;
  background:
    radial-gradient(circle at 0% 0%, rgba(37, 99, 235, 0.10), transparent 32%),
    radial-gradient(circle at 100% 100%, rgba(124, 58, 237, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,250,252,.92));
  box-shadow:
    0 24px 60px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255,255,255,.95);
}

.srl-compare-page .srl-compare-section:has(.srl-compare-popular-grid)::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, #2563eb, #7c3aed, #0ea5e9);
}

.srl-compare-page .srl-compare-section:has(.srl-compare-popular-grid)
.srl-compare-section-head {
  max-width: 800px;
  margin-bottom: 30px;
}

.srl-compare-page .srl-compare-section:has(.srl-compare-popular-grid)
.srl-compare-section-head h2 {
  margin-top: 18px;
  font-size: clamp(34px, 4vw, 52px);
}

.srl-compare-page .srl-compare-popular-grid {
  gap: 20px !important;
}

.srl-compare-page .srl-compare-card {
  --card-accent: #2563eb;
  --card-rgb: 37, 99, 235;

  position: relative;
  isolation: isolate;
  display: flex !important;
  flex-direction: column;
  min-height: 245px !important;
  padding: 26px !important;
  overflow: hidden;

  border: 1px solid rgba(var(--card-rgb), 0.18) !important;
  border-radius: 24px !important;

  background:
    radial-gradient(circle at 100% 0%, rgba(var(--card-rgb), 0.13), transparent 38%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;

  box-shadow:
    0 16px 38px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255,255,255,.95) !important;

  transform: translateY(0);
  transition:
    transform .26s ease,
    border-color .26s ease,
    box-shadow .26s ease !important;
}

.srl-compare-page .srl-compare-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--card-accent),
    rgba(var(--card-rgb), .28)
  );
}

.srl-compare-page .srl-compare-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 150px;
  height: 150px;
  right: -65px;
  top: -65px;
  border-radius: 50%;
  border: 1px solid rgba(var(--card-rgb), .16);
  box-shadow:
    0 0 0 24px rgba(var(--card-rgb), .04),
    0 0 0 48px rgba(var(--card-rgb), .022);
  transition: transform .32s ease;
}

.srl-compare-page .srl-compare-card:hover {
  transform: translateY(-8px) !important;
  border-color: rgba(var(--card-rgb), .40) !important;
  box-shadow:
    0 25px 58px rgba(15, 23, 42, .12),
    0 10px 24px rgba(var(--card-rgb), .09) !important;
}

.srl-compare-page .srl-compare-card:hover::after {
  transform: scale(1.08);
}

.srl-compare-page .srl-compare-card-label {
  position: relative;
  z-index: 2;
  min-height: 32px !important;
  padding: 0 11px !important;

  color: var(--card-accent) !important;
  border: 1px solid rgba(var(--card-rgb), .14);
  background: rgba(var(--card-rgb), .08) !important;

  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .085em !important;
}

.srl-compare-page .srl-compare-card-label::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--card-accent);
  box-shadow: 0 0 0 4px rgba(var(--card-rgb), .10);
}

.srl-compare-page .srl-compare-card h3 {
  margin: 22px 0 12px !important;
  color: #0f172a !important;
  font-size: 22px !important;
  font-weight: 850 !important;
  line-height: 1.28 !important;
  letter-spacing: -.035em !important;
}

.srl-compare-page .srl-compare-card p {
  margin: 0 0 24px !important;
  color: #64748b !important;
  font-size: 14px !important;
  line-height: 1.72 !important;
}

.srl-compare-page .srl-compare-card a {
  display: inline-flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  width: fit-content;
  min-height: 42px;
  margin-top: auto;
  padding: 0 14px;

  color: #ffffff !important;
  border-radius: 13px;
  background: var(--card-accent);

  font-size: 12px !important;
  font-weight: 900 !important;

  box-shadow: 0 10px 20px rgba(var(--card-rgb), .20);
  transition:
    transform .22s ease,
    box-shadow .22s ease !important;
}

.srl-compare-page .srl-compare-card a:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 28px rgba(var(--card-rgb), .27);
}

.srl-compare-page .srl-compare-card:nth-child(1) {
  --card-accent: #2563eb;
  --card-rgb: 37, 99, 235;
}

.srl-compare-page .srl-compare-card:nth-child(2) {
  --card-accent: #7c3aed;
  --card-rgb: 124, 58, 237;
}

.srl-compare-page .srl-compare-card:nth-child(3) {
  --card-accent: #0ea5e9;
  --card-rgb: 14, 165, 233;
}

.srl-compare-page .srl-compare-card:nth-child(4) {
  --card-accent: #14b8a6;
  --card-rgb: 20, 184, 166;
}

.srl-compare-page .srl-compare-card:nth-child(5) {
  --card-accent: #f97316;
  --card-rgb: 249, 115, 22;
}

.srl-compare-page .srl-compare-card:nth-child(6) {
  --card-accent: #ec4899;
  --card-rgb: 236, 72, 153;
}

@media (max-width: 1024px) {
  .srl-compare-page .srl-compare-section:has(.srl-compare-popular-grid) {
    padding: 30px;
  }
}

@media (max-width: 760px) {
  .srl-compare-page .srl-compare-section:has(.srl-compare-popular-grid) {
    padding: 24px 18px;
    border-radius: 24px;
  }

  .srl-compare-page .srl-compare-card {
    min-height: 225px !important;
    padding: 23px !important;
    border-radius: 21px !important;
  }

  .srl-compare-page .srl-compare-card h3 {
    font-size: 21px !important;
  }

  .srl-compare-page .srl-compare-card a {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .srl-compare-page .srl-compare-card,
  .srl-compare-page .srl-compare-card::after,
  .srl-compare-page .srl-compare-card a {
    transition: none !important;
  }
}


/* =========================================================
   PREMIUM HOW TO COMPARE SECTION
   ========================================================= */

.srl-compare-page .srl-compare-section:has(.srl-compare-guide-grid) {
  position: relative;
  padding: 42px;
  overflow: hidden;

  border: 1px solid rgba(148, 163, 184, 0.20);
  border-radius: 30px;

  background:
    radial-gradient(circle at 0% 0%, rgba(37, 99, 235, 0.10), transparent 30%),
    radial-gradient(circle at 100% 100%, rgba(124, 58, 237, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,250,252,.92));

  box-shadow:
    0 24px 60px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255,255,255,.95);
}


/* Thanh gradient phía trên */
.srl-compare-page .srl-compare-section:has(.srl-compare-guide-grid)::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;

  height: 4px;

  background: linear-gradient(
    90deg,
    #2563eb,
    #7c3aed,
    #0ea5e9
  );
}


/* Header */
.srl-compare-page .srl-compare-section:has(.srl-compare-guide-grid)
.srl-compare-section-head {
  max-width: 820px;
  margin-bottom: 32px;
}

.srl-compare-page .srl-compare-section:has(.srl-compare-guide-grid)
.srl-compare-section-head h2 {
  margin-top: 18px;

  font-size: clamp(34px, 4vw, 52px);
}


/* Grid */
.srl-compare-page .srl-compare-guide-grid {
  position: relative;

  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

  gap: 20px !important;
}


/* Đường nối 3 bước */
.srl-compare-page .srl-compare-guide-grid::before {
  content: "";
  position: absolute;

  top: 31px;
  left: 15%;
  right: 15%;

  height: 2px;

  background:
    linear-gradient(
      90deg,
      rgba(37,99,235,.18),
      rgba(124,58,237,.32),
      rgba(14,165,233,.18)
    );

  z-index: 0;
}


/* Card */
.srl-compare-page .srl-compare-guide-card {
  --step-accent: #2563eb;
  --step-rgb: 37, 99, 235;

  position: relative;
  z-index: 1;
  isolation: isolate;

  min-height: 260px;
  padding: 28px !important;
  overflow: hidden;

  border: 1px solid rgba(var(--step-rgb), 0.18) !important;
  border-radius: 24px !important;

  background:
    radial-gradient(circle at 100% 0%, rgba(var(--step-rgb), 0.13), transparent 38%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;

  box-shadow:
    0 16px 38px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255,255,255,.95) !important;

  transform: translateY(0);

  transition:
    transform .26s ease,
    border-color .26s ease,
    box-shadow .26s ease !important;
}


/* Thanh màu trong card */
.srl-compare-page .srl-compare-guide-card::before {
  content: "";
  position: absolute;

  inset: 0 0 auto;

  height: 4px;

  background:
    linear-gradient(
      90deg,
      var(--step-accent),
      rgba(var(--step-rgb), .28)
    );
}


/* Vòng trang trí */
.srl-compare-page .srl-compare-guide-card::after {
  content: "";
  position: absolute;
  z-index: -1;

  width: 150px;
  height: 150px;

  right: -65px;
  top: -65px;

  border-radius: 50%;
  border: 1px solid rgba(var(--step-rgb), .16);

  box-shadow:
    0 0 0 24px rgba(var(--step-rgb), .04),
    0 0 0 48px rgba(var(--step-rgb), .022);

  transition: transform .32s ease;
}


.srl-compare-page .srl-compare-guide-card:hover {
  transform: translateY(-8px) !important;

  border-color: rgba(var(--step-rgb), .40) !important;

  box-shadow:
    0 25px 58px rgba(15, 23, 42, .12),
    0 10px 24px rgba(var(--step-rgb), .09) !important;
}

.srl-compare-page .srl-compare-guide-card:hover::after {
  transform: scale(1.08);
}


/* Số bước */
.srl-compare-page .srl-compare-guide-number {
  position: relative;
  z-index: 2;

  display: inline-grid !important;
  place-items: center !important;

  width: 54px !important;
  height: 54px !important;
  margin-bottom: 24px !important;

  border: 6px solid #ffffff !important;
  border-radius: 18px !important;

  color: #ffffff !important;

  background:
    linear-gradient(
      135deg,
      var(--step-accent),
      rgba(var(--step-rgb), .72)
    ) !important;

  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;

  box-shadow:
    0 13px 26px rgba(var(--step-rgb), .24),
    0 0 0 1px rgba(var(--step-rgb), .08) !important;
}


/* Tiêu đề */
.srl-compare-page .srl-compare-guide-card h3 {
  margin: 0 0 13px !important;

  color: #0f172a !important;

  font-size: 23px !important;
  font-weight: 850 !important;

  line-height: 1.28 !important;
  letter-spacing: -.035em !important;
}


/* Nội dung */
.srl-compare-page .srl-compare-guide-card p {
  margin: 0 !important;

  color: #64748b !important;

  font-size: 14px !important;
  line-height: 1.75 !important;
}


/* Dòng gợi ý nhỏ dưới cùng */
.srl-compare-page .srl-compare-guide-card p::after {
  display: block;

  margin-top: 22px;
  padding-top: 16px;

  border-top: 1px solid rgba(148, 163, 184, 0.18);

  color: var(--step-accent);

  font-size: 11px;
  font-weight: 900;

  letter-spacing: .075em;
  text-transform: uppercase;
}


.srl-compare-page .srl-compare-guide-card:nth-child(1) {
  --step-accent: #2563eb;
  --step-rgb: 37, 99, 235;
}

.srl-compare-page .srl-compare-guide-card:nth-child(1) p::after {
  content: "Start with your real need";
}


.srl-compare-page .srl-compare-guide-card:nth-child(2) {
  --step-accent: #7c3aed;
  --step-rgb: 124, 58, 237;
}

.srl-compare-page .srl-compare-guide-card:nth-child(2) p::after {
  content: "Focus on trade-offs";
}


.srl-compare-page .srl-compare-guide-card:nth-child(3) {
  --step-accent: #0ea5e9;
  --step-rgb: 14, 165, 233;
}

.srl-compare-page .srl-compare-guide-card:nth-child(3) p::after {
  content: "Verify with the full review";
}


/* Tablet */
@media (max-width: 1024px) {

  .srl-compare-page .srl-compare-section:has(.srl-compare-guide-grid) {
    padding: 30px;
  }

  .srl-compare-page .srl-compare-guide-grid {
    grid-template-columns: 1fr !important;
  }

  .srl-compare-page .srl-compare-guide-grid::before {
    display: none;
  }

  .srl-compare-page .srl-compare-guide-card {
    min-height: auto;
  }
}


/* Mobile */
@media (max-width: 760px) {

  .srl-compare-page .srl-compare-section:has(.srl-compare-guide-grid) {
    padding: 24px 18px;
    border-radius: 24px;
  }

  .srl-compare-page .srl-compare-guide-card {
    padding: 23px !important;
    border-radius: 21px !important;
  }

  .srl-compare-page .srl-compare-guide-number {
    width: 48px !important;
    height: 48px !important;

    border-radius: 15px !important;
  }

  .srl-compare-page .srl-compare-guide-card h3 {
    font-size: 21px !important;
  }
}


/* Tắt chuyển động khi hệ thống yêu cầu */
@media (prefers-reduced-motion: reduce) {

  .srl-compare-page .srl-compare-guide-card,
  .srl-compare-page .srl-compare-guide-card::after {
    transition: none !important;
  }
}

/* =========================================================
   PREMIUM FAQ + FINAL CTA
   ========================================================= */

/* FAQ section container */
.srl-compare-page .srl-compare-section:has(.srl-compare-faq) {
  position: relative;
  padding: 42px;
  overflow: hidden;

  border: 1px solid rgba(148, 163, 184, 0.20);
  border-radius: 30px;

  background:
    radial-gradient(circle at 0% 0%, rgba(37, 99, 235, 0.10), transparent 30%),
    radial-gradient(circle at 100% 100%, rgba(124, 58, 237, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,250,252,.92));

  box-shadow:
    0 24px 60px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255,255,255,.95);
}


/* Top gradient */
.srl-compare-page .srl-compare-section:has(.srl-compare-faq)::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;

  background:
    linear-gradient(
      90deg,
      #2563eb,
      #7c3aed,
      #0ea5e9
    );
}


/* FAQ heading */
.srl-compare-page .srl-compare-section:has(.srl-compare-faq)
.srl-compare-section-head {
  max-width: 820px;
  margin-bottom: 30px;
}

.srl-compare-page .srl-compare-section:has(.srl-compare-faq)
.srl-compare-section-head h2 {
  margin-top: 18px;
  font-size: clamp(34px, 4vw, 52px);
}


/* FAQ list */
.srl-compare-page .srl-compare-faq {
  gap: 14px !important;
}


/* FAQ item */
.srl-compare-page .srl-compare-faq-item {
  position: relative;
  overflow: hidden;

  border: 1px solid rgba(148, 163, 184, 0.20) !important;
  border-radius: 20px !important;

  background:
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;

  box-shadow:
    0 13px 30px rgba(15, 23, 42, 0.065),
    inset 0 1px 0 rgba(255,255,255,.95) !important;

  transition:
    transform .24s ease,
    border-color .24s ease,
    box-shadow .24s ease !important;
}


/* Colored line on the left */
.srl-compare-page .srl-compare-faq-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  bottom: 15px;

  width: 4px;
  border-radius: 0 999px 999px 0;

  background:
    linear-gradient(
      180deg,
      #2563eb,
      #7c3aed
    );

  opacity: .88;
}


.srl-compare-page .srl-compare-faq-item:hover {
  transform: translateY(-4px);

  border-color: rgba(37, 99, 235, 0.30) !important;

  box-shadow:
    0 20px 42px rgba(15, 23, 42, .10),
    0 8px 18px rgba(37, 99, 235, .06) !important;
}


/* Open item */
.srl-compare-page .srl-compare-faq-item.is-open {
  border-color: rgba(37, 99, 235, 0.38) !important;

  background:
    radial-gradient(circle at 100% 0%, rgba(37,99,235,.08), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;

  box-shadow:
    0 22px 48px rgba(15, 23, 42, .11),
    0 10px 22px rgba(37, 99, 235, .07) !important;
}


/* FAQ button */
.srl-compare-page .srl-compare-faq-item button {
  min-height: 76px;
  padding: 18px 22px 18px 26px !important;

  border: 0 !important;
  background: transparent !important;

  color: #0f172a !important;

  font-size: 16px !important;
  font-weight: 850 !important;
  line-height: 1.45 !important;
}


/* Plus button */
.srl-compare-page .srl-compare-faq-item button span:last-child {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;

  border: 1px solid rgba(37, 99, 235, 0.12) !important;
  border-radius: 12px !important;

  color: #2563eb !important;

  background:
    linear-gradient(
      135deg,
      #eff6ff,
      #e0e7ff
    ) !important;

  font-size: 18px !important;
  font-weight: 900 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 8px 17px rgba(37,99,235,.09) !important;

  transition:
    transform .22s ease,
    color .22s ease,
    background .22s ease !important;
}


.srl-compare-page .srl-compare-faq-item.is-open button span:last-child {
  transform: rotate(45deg) !important;

  color: #ffffff !important;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #7c3aed
    ) !important;
}


/* Answer */
.srl-compare-page .srl-compare-faq-answer {
  padding:
    0 78px 22px 26px !important;

  color: #64748b !important;

  font-size: 14px !important;
  line-height: 1.75 !important;
}


/* Divider when opened */
.srl-compare-page .srl-compare-faq-item.is-open
.srl-compare-faq-answer {
  position: relative;
}

.srl-compare-page .srl-compare-faq-item.is-open
.srl-compare-faq-answer::before {
  content: "";
  display: block;

  height: 1px;
  margin-bottom: 17px;

  background:
    linear-gradient(
      90deg,
      rgba(37,99,235,.20),
      rgba(148,163,184,.12),
      transparent
    );
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.srl-compare-page .srl-compare-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 28px !important;
  align-items: center !important;

  margin-top: 34px !important;
  padding: 42px !important;

  border: 1px solid rgba(96, 165, 250, 0.14) !important;
  border-radius: 28px !important;

  background:
    radial-gradient(circle at 100% 0%, rgba(37,99,235,.23), transparent 32%),
    radial-gradient(circle at 0% 100%, rgba(124,58,237,.17), transparent 34%),
    linear-gradient(135deg, #0f172a 0%, #172033 56%, #1e293b 100%) !important;

  box-shadow:
    0 26px 60px rgba(15, 23, 42, .22),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}


/* Decorative rings */
.srl-compare-page .srl-compare-cta::before {
  content: "";
  position: absolute;
  z-index: -1;

  width: 230px;
  height: 230px;
  right: -75px;
  top: -95px;

  border-radius: 50%;
  border: 1px solid rgba(147, 197, 253, 0.13);

  box-shadow:
    0 0 0 30px rgba(37,99,235,.045),
    0 0 0 62px rgba(124,58,237,.025);
}


.srl-compare-page .srl-compare-cta > div {
  position: relative;
  z-index: 2;
}


.srl-compare-page .srl-compare-cta h2 {
  margin-bottom: 12px !important;

  color: #ffffff !important;

  font-size: clamp(30px, 4vw, 46px) !important;
  font-weight: 850 !important;

  line-height: 1.08 !important;
  letter-spacing: -.045em !important;
}


.srl-compare-page .srl-compare-cta p {
  max-width: 690px;

  color: #cbd5e1 !important;

  font-size: 15px !important;
  line-height: 1.72 !important;
}


/* CTA button */
.srl-compare-page .srl-compare-cta .srl-compare-btn {
  position: relative;
  z-index: 2;

  min-height: 54px !important;
  padding: 0 22px !important;

  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 15px !important;

  color: #ffffff !important;

  background:
    linear-gradient(
      135deg,
      #2563eb 0%,
      #3159e8 48%,
      #7c3aed 100%
    ) !important;

  font-size: 13px !important;
  font-weight: 900 !important;

  box-shadow:
    0 16px 30px rgba(37, 99, 235, .30),
    inset 0 1px 0 rgba(255,255,255,.16) !important;

  white-space: nowrap;

  transition:
    transform .22s ease,
    box-shadow .22s ease !important;
}


.srl-compare-page .srl-compare-cta .srl-compare-btn:hover {
  transform: translateY(-4px) !important;

  box-shadow:
    0 23px 40px rgba(37, 99, 235, .37),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
}


/* Remove inherited compare icon on this final CTA */
.srl-compare-page .srl-compare-cta
.srl-compare-btn-primary::before {
  display: none !important;
  content: none !important;
}


/* Tablet */
@media (max-width: 900px) {

  .srl-compare-page .srl-compare-section:has(.srl-compare-faq) {
    padding: 30px;
  }

  .srl-compare-page .srl-compare-cta {
    grid-template-columns: 1fr !important;
  }

  .srl-compare-page .srl-compare-cta .srl-compare-btn {
    width: fit-content !important;
  }
}


/* Mobile */
@media (max-width: 760px) {

  .srl-compare-page .srl-compare-section:has(.srl-compare-faq) {
    padding: 24px 18px;
    border-radius: 24px;
  }

  .srl-compare-page .srl-compare-faq-item button {
    min-height: 70px;
    padding: 16px 16px 16px 20px !important;

    font-size: 15px !important;
  }

  .srl-compare-page .srl-compare-faq-answer {
    padding:
      0 20px 20px 20px !important;
  }

  .srl-compare-page .srl-compare-cta {
    padding: 30px 24px !important;
    border-radius: 24px !important;
  }

  .srl-compare-page .srl-compare-cta .srl-compare-btn {
    width: 100% !important;
    justify-content: center !important;
  }
}


/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

  .srl-compare-page .srl-compare-faq-item,
  .srl-compare-page .srl-compare-faq-item button span:last-child,
  .srl-compare-page .srl-compare-cta .srl-compare-btn {
    transition: none !important;
  }
}

/* =========================================================
   PREMIUM ALTERNATIVES HERO
   ========================================================= */

.srl-alternatives-page .srl-alt-hero {
  position: relative;
  gap: 28px !important;
  align-items: stretch !important;
}


/* LEFT HERO */
.srl-alternatives-page .srl-alt-hero-main {
  position: relative;
  isolation: isolate;
  min-height: 600px !important;
  padding: 56px !important;
  overflow: hidden;

  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  border-radius: 30px !important;

  background:
    radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.11), transparent 34%),
    radial-gradient(circle at 0% 100%, rgba(124, 58, 237, 0.06), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;

  box-shadow:
    0 24px 60px rgba(15, 23, 42, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}


/* Top accent */
.srl-alternatives-page .srl-alt-hero-main::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;

  background:
    linear-gradient(
      90deg,
      #2563eb,
      #7c3aed,
      #0ea5e9
    );
}


/* Decorative rings */
.srl-alternatives-page .srl-alt-hero-main::after {
  content: "";
  position: absolute;
  z-index: -1;

  width: 290px;
  height: 290px;

  right: -90px;
  top: -90px;

  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 50%;

  box-shadow:
    0 0 0 30px rgba(37, 99, 235, 0.045),
    0 0 0 62px rgba(124, 58, 237, 0.025);
}


/* Eyebrow */
.srl-alternatives-page .srl-alt-eyebrow {
  min-height: 34px !important;
  padding: 0 14px !important;

  border: 1px solid rgba(37, 99, 235, 0.12) !important;

  background:
    linear-gradient(
      180deg,
      #eff6ff,
      #e8f1ff
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 8px 18px rgba(37,99,235,.08) !important;
}


/* Main heading */
.srl-alternatives-page .srl-alt-hero-main h1 {
  max-width: 760px !important;
  margin: 28px 0 20px !important;

  color: #0f172a !important;

  font-size: clamp(48px, 5.2vw, 72px) !important;
  font-weight: 850 !important;

  line-height: 1.03 !important;
  letter-spacing: -0.058em !important;
}


/* Intro */
.srl-alternatives-page .srl-alt-hero-main > p {
  max-width: 720px !important;

  color: #52627a !important;

  font-size: 18px !important;
  line-height: 1.78 !important;
}


/* Actions wrapper */
.srl-alternatives-page .srl-alt-hero-actions {
  position: relative;
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px !important;

  margin-top: 30px !important;
  padding-top: 24px;

  border-top: 1px solid rgba(148, 163, 184, 0.18);
}


/* Base buttons */
.srl-alternatives-page .srl-alt-hero-actions .srl-alt-btn {
  position: relative;
  overflow: hidden;

  min-height: 52px !important;
  padding: 0 20px !important;

  border-radius: 15px !important;

  font-size: 13px !important;
  font-weight: 900 !important;

  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    background .22s ease !important;
}


/* Primary */
.srl-alternatives-page .srl-alt-hero-actions .srl-alt-btn-primary {
  border: 1px solid rgba(37, 99, 235, 0.20) !important;

  background:
    radial-gradient(circle at 100% 0%, rgba(255,255,255,.18), transparent 34%),
    linear-gradient(
      135deg,
      #2563eb 0%,
      #3b5ce9 48%,
      #7c3aed 100%
    ) !important;

  box-shadow:
    0 16px 30px rgba(37, 99, 235, 0.28),
    inset 0 1px 0 rgba(255,255,255,.16) !important;
}


.srl-alternatives-page .srl-alt-hero-actions .srl-alt-btn-primary::before {
  content: "⌕";
  display: inline-grid;
  place-items: center;

  width: 30px;
  height: 30px;
  margin-right: 10px;

  border-radius: 10px;

  color: #ffffff;
  background: rgba(255,255,255,.14);

  font-size: 15px;
}


.srl-alternatives-page .srl-alt-hero-actions .srl-alt-btn-primary::after {
  content: "";
  position: absolute;

  width: 110px;
  height: 150px;

  left: -150px;
  top: -45px;

  transform: rotate(18deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.22),
      transparent
    );

  transition: left .55s ease;
}


.srl-alternatives-page .srl-alt-hero-actions
.srl-alt-btn-primary:hover::after {
  left: calc(100% + 35px);
}


/* Secondary */
.srl-alternatives-page .srl-alt-hero-actions .srl-alt-btn-secondary {
  border: 1px solid rgba(148, 163, 184, 0.28) !important;

  color: #0f172a !important;

  background:
    radial-gradient(circle at 100% 0%, rgba(37,99,235,.06), transparent 36%),
    linear-gradient(180deg, #ffffff, #f8fafc) !important;

  box-shadow:
    0 10px 23px rgba(15,23,42,.07),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}


.srl-alternatives-page .srl-alt-hero-actions .srl-alt-btn-secondary::before {
  content: "⇄";
  display: inline-grid;
  place-items: center;

  width: 30px;
  height: 30px;
  margin-right: 10px;

  border-radius: 10px;

  color: #2563eb;
  background: rgba(37,99,235,.09);

  font-size: 15px;
}


.srl-alternatives-page .srl-alt-hero-actions .srl-alt-btn:hover {
  transform: translateY(-4px) !important;
}


.srl-alternatives-page .srl-alt-hero-actions .srl-alt-btn-primary:hover {
  box-shadow:
    0 22px 40px rgba(37,99,235,.34),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
}


.srl-alternatives-page .srl-alt-hero-actions .srl-alt-btn-secondary:hover {
  border-color: rgba(37,99,235,.32) !important;

  box-shadow:
    0 17px 31px rgba(15,23,42,.10) !important;
}


/* RIGHT HERO */
.srl-alternatives-page .srl-alt-hero-side {
  position: relative;
  isolation: isolate;

  min-height: 600px !important;
  padding: 36px !important;
  overflow: hidden;

  border: 1px solid rgba(96, 165, 250, 0.14) !important;
  border-radius: 30px !important;

  background:
    radial-gradient(circle at 100% 0%, rgba(37,99,235,.25), transparent 35%),
    radial-gradient(circle at 0% 100%, rgba(124,58,237,.15), transparent 36%),
    linear-gradient(
      155deg,
      #0f172a 0%,
      #172033 55%,
      #1e293b 100%
    ) !important;

  box-shadow:
    0 26px 60px rgba(15, 23, 42, 0.22),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}


/* Decorative circles */
.srl-alternatives-page .srl-alt-hero-side::before {
  content: "";
  position: absolute;
  z-index: -1;

  width: 240px;
  height: 240px;

  right: -80px;
  top: -90px;

  border: 1px solid rgba(147, 197, 253, 0.12);
  border-radius: 50%;

  box-shadow:
    0 0 0 30px rgba(37,99,235,.04),
    0 0 0 62px rgba(124,58,237,.022);
}


/* Small heading */
.srl-alternatives-page .srl-alt-hero-side > div:first-child > span,
.srl-alternatives-page .srl-alt-hero-side > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  color: #93c5fd !important;

  font-size: 11px !important;
  font-weight: 900 !important;

  letter-spacing: .10em !important;
  text-transform: uppercase !important;
}


.srl-alternatives-page .srl-alt-hero-side > div:first-child > span::before,
.srl-alternatives-page .srl-alt-hero-side > span::before {
  content: "";

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #60a5fa;

  box-shadow:
    0 0 0 5px rgba(96,165,250,.12);
}


/* Right heading */
.srl-alternatives-page .srl-alt-hero-side h2 {
  max-width: 460px;
  margin: 20px 0 16px !important;

  color: #ffffff !important;

  font-size: clamp(30px, 3vw, 42px) !important;
  font-weight: 850 !important;

  line-height: 1.12 !important;
  letter-spacing: -.04em !important;
}


/* Right intro */
.srl-alternatives-page .srl-alt-hero-side > div:first-child > p {
  max-width: 500px;

  color: #cbd5e1 !important;

  font-size: 15px !important;
  line-height: 1.75 !important;
}


/* Trust list */
.srl-alternatives-page .srl-alt-side-list {
  gap: 14px !important;
  margin-top: 30px !important;
}


/* Trust item */
.srl-alternatives-page .srl-alt-side-item {
  position: relative;
  overflow: hidden;

  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) auto !important;
  gap: 14px !important;
  align-items: center !important;

  min-height: 92px;
  padding: 16px !important;

  border: 1px solid rgba(148, 163, 184, 0.17) !important;
  border-radius: 18px !important;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.075),
      rgba(255,255,255,.035)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 12px 26px rgba(2,6,23,.13) !important;

  transition:
    transform .24s ease,
    border-color .24s ease,
    background .24s ease !important;
}


.srl-alternatives-page .srl-alt-side-item::before {
  content: "";
  position: absolute;

  left: 0;
  top: 14px;
  bottom: 14px;

  width: 3px;

  border-radius: 0 999px 999px 0;

  background:
    linear-gradient(
      180deg,
      #60a5fa,
      #8b5cf6
    );
}


.srl-alternatives-page .srl-alt-side-item::after {
  content: "→";

  display: grid;
  place-items: center;

  width: 30px;
  height: 30px;

  border-radius: 10px;

  color: #93c5fd;
  background: rgba(59,130,246,.11);

  font-size: 16px;

  transition: transform .24s ease;
}


.srl-alternatives-page .srl-alt-side-item:hover {
  transform: translateX(5px);

  border-color: rgba(96, 165, 250, 0.34) !important;

  background:
    linear-gradient(
      135deg,
      rgba(59,130,246,.11),
      rgba(139,92,246,.06)
    ) !important;
}


.srl-alternatives-page .srl-alt-side-item:hover::after {
  transform: translateX(3px);
}


/* Icon */
.srl-alternatives-page .srl-alt-side-icon {
  width: 46px !important;
  height: 46px !important;

  border: 1px solid rgba(147,197,253,.16) !important;
  border-radius: 14px !important;

  color: #bfdbfe !important;

  background:
    linear-gradient(
      135deg,
      rgba(37,99,235,.34),
      rgba(124,58,237,.24)
    ) !important;

  box-shadow:
    0 10px 20px rgba(37,99,235,.16),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}


/* Trust text */
.srl-alternatives-page .srl-alt-side-item strong {
  color: #ffffff !important;

  font-size: 14px !important;
  line-height: 1.35 !important;
}


.srl-alternatives-page .srl-alt-side-item small {
  margin-top: 4px !important;

  color: #aebbd0 !important;

  font-size: 12px !important;
  line-height: 1.55 !important;
}


/* Tablet */
@media (max-width: 1024px) {

  .srl-alternatives-page .srl-alt-hero-main,
  .srl-alternatives-page .srl-alt-hero-side {
    min-height: auto !important;
  }
}


/* Mobile */
@media (max-width: 760px) {

  .srl-alternatives-page .srl-alt-hero-main,
  .srl-alternatives-page .srl-alt-hero-side {
    padding: 28px !important;
    border-radius: 24px !important;
  }

  .srl-alternatives-page .srl-alt-hero-main h1 {
    font-size: 42px !important;
  }

  .srl-alternatives-page .srl-alt-hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .srl-alternatives-page .srl-alt-hero-actions .srl-alt-btn {
    width: 100% !important;
  }

  .srl-alternatives-page .srl-alt-side-item {
    grid-template-columns: 42px minmax(0, 1fr) !important;
  }

  .srl-alternatives-page .srl-alt-side-item::after {
    display: none;
  }

  .srl-alternatives-page .srl-alt-side-icon {
    width: 42px !important;
    height: 42px !important;
  }
}


/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

  .srl-alternatives-page .srl-alt-hero-actions .srl-alt-btn,
  .srl-alternatives-page .srl-alt-side-item {
    transition: none !important;
  }
}


/* =========================================================
   PREMIUM ALTERNATIVES DIRECTORY CONTROLS
   Search + Clear button + Category filters
   ========================================================= */

/* Main controls panel */
.srl-alternatives-page .srl-alt-controls {
  position: relative;
  overflow: hidden;

  padding: 34px !important;

  border: 1px solid rgba(148, 163, 184, 0.20) !important;
  border-radius: 28px !important;

  background:
    radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.10), transparent 34%),
    radial-gradient(circle at 0% 100%, rgba(124, 58, 237, 0.06), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;

  box-shadow:
    0 24px 58px rgba(15, 23, 42, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}


/* Top gradient */
.srl-alternatives-page .srl-alt-controls::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;

  height: 4px;

  background:
    linear-gradient(
      90deg,
      #2563eb,
      #7c3aed,
      #0ea5e9
    );
}


/* Header */
.srl-alternatives-page .srl-alt-controls-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.62fr) !important;
  gap: 28px !important;
  align-items: end !important;

  margin-bottom: 24px !important;
}


.srl-alternatives-page .srl-alt-controls-head h2 {
  margin: 16px 0 0 !important;

  color: #0f172a !important;

  font-size: clamp(30px, 3.4vw, 42px) !important;
  font-weight: 850 !important;

  line-height: 1.12 !important;
  letter-spacing: -0.042em !important;
}


.srl-alternatives-page .srl-alt-controls-head p {
  margin: 0 !important;

  color: #64748b !important;

  font-size: 14px !important;
  line-height: 1.72 !important;
  text-align: right !important;
}


/* Search row */
.srl-alternatives-page .srl-alt-search-row {
  position: relative;

  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;

  gap: 12px !important;
  align-items: stretch !important;
}


/* Search field */
.srl-alternatives-page .srl-alt-search {
  min-height: 58px !important;

  padding:
    0 18px 0 52px !important;

  border: 1px solid rgba(148, 163, 184, 0.30) !important;
  border-radius: 16px !important;

  color: #0f172a !important;

  background:
    #ffffff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E")
    no-repeat 18px center !important;

  font-size: 15px !important;
  font-weight: 700 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 10px 24px rgba(15,23,42,.055) !important;

  outline: none !important;

  transition:
    border-color .22s ease,
    box-shadow .22s ease,
    transform .22s ease !important;
}


.srl-alternatives-page .srl-alt-search::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
  font-weight: 600 !important;
}


.srl-alternatives-page .srl-alt-search:hover {
  border-color: rgba(37, 99, 235, 0.34) !important;
}


.srl-alternatives-page .srl-alt-search:focus {
  transform: translateY(-1px);

  border-color: rgba(37, 99, 235, 0.62) !important;

  box-shadow:
    0 0 0 4px rgba(37, 99, 235, 0.10),
    0 15px 28px rgba(37, 99, 235, 0.08) !important;
}


/* Clear button */
.srl-alternatives-page .srl-alt-clear {
  position: relative;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;

  min-width: 150px !important;
  min-height: 58px !important;

  padding: 0 18px !important;

  border: 1px solid rgba(148, 163, 184, 0.28) !important;
  border-radius: 16px !important;

  color: #0f172a !important;

  background:
    radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.07), transparent 36%),
    linear-gradient(180deg, #ffffff, #f8fafc) !important;

  font-size: 13px !important;
  font-weight: 900 !important;

  box-shadow:
    0 10px 23px rgba(15,23,42,.07),
    inset 0 1px 0 rgba(255,255,255,.96) !important;

  cursor: pointer !important;

  transition:
    transform .22s ease,
    color .22s ease,
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease !important;
}


/* Force visible text even if another theme style hides button text */
.srl-alternatives-page .srl-alt-clear {
  text-indent: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: visible !important;
}


.srl-alternatives-page .srl-alt-clear::before {
  content: "↻";

  display: grid;
  place-items: center;

  width: 30px;
  height: 30px;

  border-radius: 10px;

  color: #2563eb;
  background: rgba(37, 99, 235, 0.09);

  font-size: 16px;
  font-weight: 900;
}


.srl-alternatives-page .srl-alt-clear:hover {
  transform: translateY(-3px);

  color: #ffffff !important;
  border-color: #2563eb !important;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #7c3aed
    ) !important;

  box-shadow:
    0 16px 30px rgba(37,99,235,.22) !important;
}


.srl-alternatives-page .srl-alt-clear:hover::before {
  color: #ffffff;
  background: rgba(255,255,255,.15);
}


/* Filter row */
.srl-alternatives-page .srl-alt-filter-row {
  position: relative;

  display: flex !important;
  flex-wrap: wrap !important;

  gap: 10px !important;

  margin-top: 18px !important;
  padding-top: 18px !important;

  border-top: 1px solid rgba(148, 163, 184, 0.18);
}


/* Filter buttons */
.srl-alternatives-page .srl-alt-filter {
  position: relative;

  min-height: 42px !important;
  padding: 0 16px !important;

  border: 1px solid rgba(148, 163, 184, 0.25) !important;
  border-radius: 999px !important;

  color: #475569 !important;

  background:
    linear-gradient(
      180deg,
      #ffffff,
      #f8fafc
    ) !important;

  font-size: 12px !important;
  font-weight: 900 !important;

  box-shadow:
    0 8px 18px rgba(15, 23, 42, 0.05),
    inset 0 1px 0 rgba(255,255,255,.95) !important;

  cursor: pointer !important;

  transform: translateY(0);

  transition:
    transform .20s ease,
    color .20s ease,
    border-color .20s ease,
    background .20s ease,
    box-shadow .20s ease !important;
}


.srl-alternatives-page .srl-alt-filter::before {
  content: "";

  width: 7px;
  height: 7px;

  margin-right: 8px;

  display: inline-block;

  border-radius: 50%;

  background: #cbd5e1;

  transition:
    background .20s ease,
    box-shadow .20s ease !important;
}


.srl-alternatives-page .srl-alt-filter:hover {
  transform: translateY(-3px);

  color: #2563eb !important;
  border-color: rgba(37, 99, 235, 0.32) !important;

  background: #ffffff !important;

  box-shadow:
    0 13px 24px rgba(37, 99, 235, 0.10) !important;
}


.srl-alternatives-page .srl-alt-filter:hover::before {
  background: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.10);
}


/* Active filter */
.srl-alternatives-page .srl-alt-filter.is-active {
  transform: translateY(-2px);

  color: #ffffff !important;
  border-color: transparent !important;

  background:
    radial-gradient(circle at 100% 0%, rgba(255,255,255,.18), transparent 38%),
    linear-gradient(
      135deg,
      #2563eb 0%,
      #3b5ce9 50%,
      #7c3aed 100%
    ) !important;

  box-shadow:
    0 13px 25px rgba(37, 99, 235, 0.24),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
}


.srl-alternatives-page .srl-alt-filter.is-active::before {
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(255,255,255,.15);
}


/* Keyboard focus */
.srl-alternatives-page .srl-alt-search:focus-visible,
.srl-alternatives-page .srl-alt-clear:focus-visible,
.srl-alternatives-page .srl-alt-filter:focus-visible {
  outline: 3px solid rgba(59, 130, 246, 0.22) !important;
  outline-offset: 3px !important;
}


/* Tablet */
@media (max-width: 900px) {

  .srl-alternatives-page .srl-alt-controls-head {
    grid-template-columns: 1fr !important;
  }

  .srl-alternatives-page .srl-alt-controls-head p {
    max-width: 680px;
    text-align: left !important;
  }
}


/* Mobile */
@media (max-width: 760px) {

  .srl-alternatives-page .srl-alt-controls {
    padding: 26px 20px !important;
    border-radius: 24px !important;
  }

  .srl-alternatives-page .srl-alt-search-row {
    grid-template-columns: 1fr !important;
  }

  .srl-alternatives-page .srl-alt-clear {
    width: 100% !important;
    min-width: 0 !important;
  }

  .srl-alternatives-page .srl-alt-filter-row {
    gap: 8px !important;
  }

  .srl-alternatives-page .srl-alt-filter {
    flex: 1 1 auto;
    justify-content: center;
  }
}


/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

  .srl-alternatives-page .srl-alt-search,
  .srl-alternatives-page .srl-alt-clear,
  .srl-alternatives-page .srl-alt-filter {
    transition: none !important;
  }
}

/* =========================================================
   PREMIUM ALTERNATIVES SHORTLIST CARDS
   ========================================================= */

/* Section wrapper */
.srl-alternatives-page .srl-alt-section:has(.srl-alt-grid) {
  position: relative;
  overflow: hidden;
  padding: 42px !important;

  border: 1px solid rgba(148, 163, 184, 0.20) !important;
  border-radius: 30px !important;

  background:
    radial-gradient(circle at 0% 0%, rgba(37, 99, 235, 0.10), transparent 30%),
    radial-gradient(circle at 100% 100%, rgba(124, 58, 237, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.93)) !important;

  box-shadow:
    0 24px 60px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
}


/* Top gradient */
.srl-alternatives-page .srl-alt-section:has(.srl-alt-grid)::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;

  background:
    linear-gradient(
      90deg,
      #2563eb,
      #7c3aed,
      #0ea5e9
    );
}


/* Section heading */
.srl-alternatives-page .srl-alt-section:has(.srl-alt-grid)
.srl-alt-section-head {
  max-width: 820px !important;
  margin-bottom: 32px !important;
}


.srl-alternatives-page .srl-alt-section:has(.srl-alt-grid)
.srl-alt-section-head h2 {
  margin-top: 18px !important;

  color: #0f172a !important;

  font-size: clamp(36px, 4vw, 54px) !important;
  font-weight: 850 !important;

  line-height: 1.08 !important;
  letter-spacing: -0.048em !important;
}


.srl-alternatives-page .srl-alt-section:has(.srl-alt-grid)
.srl-alt-section-head p {
  max-width: 760px;

  color: #64748b !important;

  font-size: 15px !important;
  line-height: 1.72 !important;
}


/* Grid */
.srl-alternatives-page .srl-alt-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

  gap: 22px !important;
}


/* Card */
.srl-alternatives-page .srl-alt-card {
  position: relative;
  isolation: isolate;

  display: flex !important;
  flex-direction: column !important;

  min-height: 365px !important;
  padding: 27px !important;
  overflow: hidden;

  border: 1px solid rgba(var(--accent-rgb), 0.18) !important;
  border-radius: 25px !important;

  background:
    radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb), .13), transparent 38%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;

  box-shadow:
    0 17px 40px rgba(15, 23, 42, 0.075),
    inset 0 1px 0 rgba(255,255,255,.96) !important;

  transform: translateY(0);

  transition:
    transform .26s ease,
    border-color .26s ease,
    box-shadow .26s ease !important;
}


/* Top colored bar */
.srl-alternatives-page .srl-alt-card::before {
  content: "";
  position: absolute;

  inset: 0 0 auto;

  height: 4px;

  background:
    linear-gradient(
      90deg,
      var(--accent),
      rgba(var(--accent-rgb), .26)
    );
}


/* Decorative rings */
.srl-alternatives-page .srl-alt-card::after {
  content: "";
  position: absolute;
  z-index: -1;

  width: 155px;
  height: 155px;

  right: -66px;
  top: -66px;

  border-radius: 50%;
  border: 1px solid rgba(var(--accent-rgb), .15);

  box-shadow:
    0 0 0 25px rgba(var(--accent-rgb), .04),
    0 0 0 50px rgba(var(--accent-rgb), .022);

  transition: transform .32s ease;
}


.srl-alternatives-page .srl-alt-card:hover {
  transform: translateY(-8px) !important;

  border-color: rgba(var(--accent-rgb), .42) !important;

  box-shadow:
    0 26px 58px rgba(15, 23, 42, .12),
    0 11px 25px rgba(var(--accent-rgb), .09) !important;
}


.srl-alternatives-page .srl-alt-card:hover::after {
  transform: scale(1.08);
}


/* Category label */
.srl-alternatives-page .srl-alt-card-label {
  position: relative;
  z-index: 2;

  min-height: 33px !important;
  padding: 0 12px !important;

  border: 1px solid rgba(var(--accent-rgb), .15) !important;
  border-radius: 999px !important;

  color: var(--accent) !important;

  background:
    rgba(var(--accent-rgb), .08) !important;

  font-size: 10px !important;
  font-weight: 900 !important;

  letter-spacing: .085em !important;
  text-transform: uppercase !important;
}


/* Product title */
.srl-alternatives-page .srl-alt-card h3 {
  margin: 22px 0 12px !important;

  color: #0f172a !important;

  font-size: 24px !important;
  font-weight: 850 !important;

  line-height: 1.25 !important;
  letter-spacing: -.038em !important;
}


/* Description */
.srl-alternatives-page .srl-alt-card > p {
  margin: 0 0 22px !important;

  color: #64748b !important;

  font-size: 14px !important;
  line-height: 1.72 !important;
}


/* Alternative options */
.srl-alternatives-page .srl-alt-option-list {
  display: grid !important;

  gap: 10px !important;

  margin-top: auto !important;
  padding-top: 18px !important;

  border-top: 1px solid rgba(148, 163, 184, 0.18) !important;
}


/* Individual option */
.srl-alternatives-page .srl-alt-option {
  position: relative;
  overflow: hidden;

  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 36px !important;
  gap: 12px !important;
  align-items: center !important;

  min-height: 50px !important;
  padding: 0 8px 0 15px !important;

  border: 1px solid rgba(148, 163, 184, 0.20) !important;
  border-radius: 15px !important;

  color: #0f172a !important;

  background:
    linear-gradient(
      180deg,
      #ffffff,
      #f8fafc
    ) !important;

  font-size: 13px !important;
  font-weight: 850 !important;

  box-shadow:
    0 8px 18px rgba(15, 23, 42, 0.045),
    inset 0 1px 0 rgba(255,255,255,.96) !important;

  transition:
    transform .20s ease,
    color .20s ease,
    border-color .20s ease,
    background .20s ease,
    box-shadow .20s ease !important;
}


/* Arrow circle */
.srl-alternatives-page .srl-alt-option span:last-child {
  display: grid !important;
  place-items: center !important;

  width: 36px !important;
  height: 36px !important;

  border-radius: 11px !important;

  color: var(--accent) !important;

  background:
    rgba(var(--accent-rgb), .085) !important;

  font-size: 17px !important;
  font-weight: 900 !important;

  transition:
    transform .20s ease,
    color .20s ease,
    background .20s ease !important;
}


.srl-alternatives-page .srl-alt-option:hover {
  transform: translateX(5px) !important;

  color: #ffffff !important;
  border-color: var(--accent) !important;

  background:
    linear-gradient(
      135deg,
      var(--accent),
      rgba(var(--accent-rgb), .78)
    ) !important;

  box-shadow:
    0 13px 24px rgba(var(--accent-rgb), .18) !important;
}


.srl-alternatives-page .srl-alt-option:hover span:last-child {
  transform: translateX(2px);

  color: #ffffff !important;

  background:
    rgba(255,255,255,.15) !important;
}


/* Keep links readable if visited */
.srl-alternatives-page .srl-alt-option:visited {
  color: #0f172a !important;
}


.srl-alternatives-page .srl-alt-option:hover:visited {
  color: #ffffff !important;
}


/* Keyboard focus */
.srl-alternatives-page .srl-alt-option:focus-visible {
  outline: 3px solid rgba(var(--accent-rgb), .20) !important;
  outline-offset: 3px !important;
}


/* Empty state */
.srl-alternatives-page .srl-alt-empty {
  margin-top: 22px;
  padding: 32px !important;

  border: 1px dashed rgba(37, 99, 235, 0.30) !important;
  border-radius: 22px !important;

  color: #64748b !important;

  background:
    radial-gradient(circle at 50% 0%, rgba(37,99,235,.07), transparent 45%),
    #ffffff !important;

  font-size: 14px !important;
  font-weight: 700 !important;

  box-shadow:
    0 12px 26px rgba(15,23,42,.05) !important;
}


/* Tablet */
@media (max-width: 1024px) {

  .srl-alternatives-page .srl-alt-section:has(.srl-alt-grid) {
    padding: 30px !important;
  }

  .srl-alternatives-page .srl-alt-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .srl-alternatives-page .srl-alt-card {
    min-height: 345px !important;
  }
}


/* Mobile */
@media (max-width: 760px) {

  .srl-alternatives-page .srl-alt-section:has(.srl-alt-grid) {
    padding: 24px 18px !important;
    border-radius: 24px !important;
  }

  .srl-alternatives-page .srl-alt-grid {
    grid-template-columns: 1fr !important;
  }

  .srl-alternatives-page .srl-alt-card {
    min-height: auto !important;

    padding: 23px !important;
    border-radius: 21px !important;
  }

  .srl-alternatives-page .srl-alt-card h3 {
    font-size: 22px !important;
  }

  .srl-alternatives-page .srl-alt-option {
    min-height: 48px !important;
  }
}


/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

  .srl-alternatives-page .srl-alt-card,
  .srl-alternatives-page .srl-alt-card::after,
  .srl-alternatives-page .srl-alt-option,
  .srl-alternatives-page .srl-alt-option span:last-child {
    transition: none !important;
  }
}

/* =========================================================
   PREMIUM HOW TO CHOOSE + FINAL CTA
   Alternatives page
   ========================================================= */


/* =========================================================
   HOW TO CHOOSE SECTION
   ========================================================= */

.srl-alternatives-page .srl-alt-section:has(.srl-alt-guide-grid) {
  position: relative;
  overflow: hidden;

  padding: 42px !important;

  border: 1px solid rgba(148, 163, 184, 0.20) !important;
  border-radius: 30px !important;

  background:
    radial-gradient(circle at 0% 0%, rgba(37, 99, 235, 0.10), transparent 30%),
    radial-gradient(circle at 100% 100%, rgba(124, 58, 237, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.93)) !important;

  box-shadow:
    0 24px 60px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
}


/* Thanh màu phía trên */
.srl-alternatives-page .srl-alt-section:has(.srl-alt-guide-grid)::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;

  height: 4px;

  background:
    linear-gradient(
      90deg,
      #2563eb,
      #7c3aed,
      #0ea5e9
    );
}


/* Heading */
.srl-alternatives-page .srl-alt-section:has(.srl-alt-guide-grid)
.srl-alt-section-head {
  max-width: 820px !important;
  margin-bottom: 32px !important;
}


.srl-alternatives-page .srl-alt-section:has(.srl-alt-guide-grid)
.srl-alt-section-head h2 {
  margin-top: 18px !important;

  color: #0f172a !important;

  font-size: clamp(36px, 4vw, 54px) !important;
  font-weight: 850 !important;

  line-height: 1.08 !important;
  letter-spacing: -0.048em !important;
}


/* Grid */
.srl-alternatives-page .srl-alt-guide-grid {
  position: relative;

  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

  gap: 20px !important;
}


/* Đường nối 3 bước */
.srl-alternatives-page .srl-alt-guide-grid::before {
  content: "";
  position: absolute;

  top: 32px;
  left: 15%;
  right: 15%;

  height: 2px;

  background:
    linear-gradient(
      90deg,
      rgba(37,99,235,.18),
      rgba(124,58,237,.30),
      rgba(14,165,233,.18)
    );

  z-index: 0;
}


/* Card */
.srl-alternatives-page .srl-alt-guide-card {
  --step-accent: #2563eb;
  --step-rgb: 37, 99, 235;

  position: relative;
  z-index: 1;
  isolation: isolate;

  min-height: 270px !important;
  padding: 28px !important;
  overflow: hidden;

  border: 1px solid rgba(var(--step-rgb), 0.18) !important;
  border-radius: 24px !important;

  background:
    radial-gradient(circle at 100% 0%, rgba(var(--step-rgb), 0.13), transparent 38%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;

  box-shadow:
    0 16px 38px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255,255,255,.96) !important;

  transform: translateY(0);

  transition:
    transform .26s ease,
    border-color .26s ease,
    box-shadow .26s ease !important;
}


/* Thanh màu trong card */
.srl-alternatives-page .srl-alt-guide-card::before {
  content: "";
  position: absolute;

  inset: 0 0 auto;

  height: 4px;

  background:
    linear-gradient(
      90deg,
      var(--step-accent),
      rgba(var(--step-rgb), .28)
    );
}


/* Vòng trang trí */
.srl-alternatives-page .srl-alt-guide-card::after {
  content: "";
  position: absolute;
  z-index: -1;

  width: 150px;
  height: 150px;

  right: -65px;
  top: -65px;

  border-radius: 50%;
  border: 1px solid rgba(var(--step-rgb), .16);

  box-shadow:
    0 0 0 24px rgba(var(--step-rgb), .04),
    0 0 0 48px rgba(var(--step-rgb), .022);

  transition: transform .32s ease;
}


.srl-alternatives-page .srl-alt-guide-card:hover {
  transform: translateY(-8px) !important;

  border-color: rgba(var(--step-rgb), .40) !important;

  box-shadow:
    0 25px 58px rgba(15, 23, 42, .12),
    0 10px 24px rgba(var(--step-rgb), .09) !important;
}


.srl-alternatives-page .srl-alt-guide-card:hover::after {
  transform: scale(1.08);
}


/* Step number */
.srl-alternatives-page .srl-alt-guide-number {
  position: relative;
  z-index: 2;

  display: inline-grid !important;
  place-items: center !important;

  width: 54px !important;
  height: 54px !important;
  margin-bottom: 24px !important;

  border: 6px solid #ffffff !important;
  border-radius: 18px !important;

  color: #ffffff !important;

  background:
    linear-gradient(
      135deg,
      var(--step-accent),
      rgba(var(--step-rgb), .72)
    ) !important;

  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;

  box-shadow:
    0 13px 26px rgba(var(--step-rgb), .24),
    0 0 0 1px rgba(var(--step-rgb), .08) !important;
}


/* Card heading */
.srl-alternatives-page .srl-alt-guide-card h3 {
  margin: 0 0 13px !important;

  color: #0f172a !important;

  font-size: 23px !important;
  font-weight: 850 !important;

  line-height: 1.28 !important;
  letter-spacing: -.035em !important;
}


/* Card paragraph */
.srl-alternatives-page .srl-alt-guide-card p {
  margin: 0 !important;

  color: #64748b !important;

  font-size: 14px !important;
  line-height: 1.75 !important;
}


/* Dòng nhấn cuối card */
.srl-alternatives-page .srl-alt-guide-card p::after {
  display: block;

  margin-top: 22px;
  padding-top: 16px;

  border-top: 1px solid rgba(148, 163, 184, 0.18);

  color: var(--step-accent);

  font-size: 11px;
  font-weight: 900;

  letter-spacing: .075em;
  text-transform: uppercase;
}


/* Màu từng bước */
.srl-alternatives-page .srl-alt-guide-card:nth-child(1) {
  --step-accent: #2563eb;
  --step-rgb: 37, 99, 235;
}

.srl-alternatives-page .srl-alt-guide-card:nth-child(1) p::after {
  content: "Start with the real problem";
}


.srl-alternatives-page .srl-alt-guide-card:nth-child(2) {
  --step-accent: #7c3aed;
  --step-rgb: 124, 58, 237;
}

.srl-alternatives-page .srl-alt-guide-card:nth-child(2) p::after {
  content: "Compare the trade-offs";
}


.srl-alternatives-page .srl-alt-guide-card:nth-child(3) {
  --step-accent: #0ea5e9;
  --step-rgb: 14, 165, 233;
}

.srl-alternatives-page .srl-alt-guide-card:nth-child(3) p::after {
  content: "Test before switching";
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.srl-alternatives-page .srl-alt-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 28px !important;
  align-items: center !important;

  margin-top: 34px !important;
  padding: 44px !important;

  border: 1px solid rgba(96, 165, 250, 0.14) !important;
  border-radius: 28px !important;

  background:
    radial-gradient(circle at 100% 0%, rgba(37,99,235,.24), transparent 32%),
    radial-gradient(circle at 0% 100%, rgba(124,58,237,.18), transparent 34%),
    linear-gradient(135deg, #0f172a 0%, #172033 56%, #1e293b 100%) !important;

  box-shadow:
    0 26px 60px rgba(15, 23, 42, .22),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}


/* Vòng trang trí CTA */
.srl-alternatives-page .srl-alt-cta::before {
  content: "";
  position: absolute;
  z-index: -1;

  width: 230px;
  height: 230px;

  right: -75px;
  top: -95px;

  border-radius: 50%;
  border: 1px solid rgba(147, 197, 253, 0.13);

  box-shadow:
    0 0 0 30px rgba(37,99,235,.045),
    0 0 0 62px rgba(124,58,237,.025);
}


/* CTA content */
.srl-alternatives-page .srl-alt-cta > div {
  position: relative;
  z-index: 2;
}


.srl-alternatives-page .srl-alt-cta h2 {
  margin: 0 0 12px !important;

  color: #ffffff !important;

  font-size: clamp(30px, 4vw, 46px) !important;
  font-weight: 850 !important;

  line-height: 1.08 !important;
  letter-spacing: -.045em !important;
}


.srl-alternatives-page .srl-alt-cta p {
  max-width: 700px;

  margin: 0 !important;

  color: #cbd5e1 !important;

  font-size: 15px !important;
  line-height: 1.72 !important;
}


/* CTA button */
.srl-alternatives-page .srl-alt-cta .srl-alt-btn {
  position: relative;
  z-index: 2;
  overflow: hidden;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 56px !important;
  padding: 0 22px !important;

  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 15px !important;

  color: #ffffff !important;

  background:
    radial-gradient(circle at 100% 0%, rgba(255,255,255,.18), transparent 34%),
    linear-gradient(
      135deg,
      #2563eb 0%,
      #3159e8 48%,
      #7c3aed 100%
    ) !important;

  font-size: 13px !important;
  font-weight: 900 !important;

  white-space: nowrap;

  box-shadow:
    0 16px 30px rgba(37, 99, 235, .30),
    inset 0 1px 0 rgba(255,255,255,.16) !important;

  transition:
    transform .22s ease,
    box-shadow .22s ease !important;
}


.srl-alternatives-page .srl-alt-cta .srl-alt-btn::before {
  content: "⇄";

  display: grid;
  place-items: center;

  width: 30px;
  height: 30px;
  margin-right: 10px;

  border-radius: 10px;

  color: #ffffff;
  background: rgba(255,255,255,.14);

  font-size: 15px;
  font-weight: 900;
}


.srl-alternatives-page .srl-alt-cta .srl-alt-btn::after {
  content: "";
  position: absolute;

  width: 110px;
  height: 150px;

  left: -150px;
  top: -45px;

  transform: rotate(18deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.22),
      transparent
    );

  transition: left .55s ease;
}


.srl-alternatives-page .srl-alt-cta .srl-alt-btn:hover {
  transform: translateY(-4px) !important;

  box-shadow:
    0 23px 40px rgba(37, 99, 235, .37),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
}


.srl-alternatives-page .srl-alt-cta .srl-alt-btn:hover::after {
  left: calc(100% + 35px);
}


/* Tablet */
@media (max-width: 1024px) {

  .srl-alternatives-page .srl-alt-section:has(.srl-alt-guide-grid) {
    padding: 30px !important;
  }

  .srl-alternatives-page .srl-alt-guide-grid {
    grid-template-columns: 1fr !important;
  }

  .srl-alternatives-page .srl-alt-guide-grid::before {
    display: none;
  }

  .srl-alternatives-page .srl-alt-guide-card {
    min-height: auto !important;
  }

  .srl-alternatives-page .srl-alt-cta {
    grid-template-columns: 1fr !important;
  }

  .srl-alternatives-page .srl-alt-cta .srl-alt-btn {
    width: fit-content !important;
  }
}


/* Mobile */
@media (max-width: 760px) {

  .srl-alternatives-page .srl-alt-section:has(.srl-alt-guide-grid) {
    padding: 24px 18px !important;
    border-radius: 24px !important;
  }

  .srl-alternatives-page .srl-alt-guide-card {
    padding: 23px !important;
    border-radius: 21px !important;
  }

  .srl-alternatives-page .srl-alt-guide-number {
    width: 48px !important;
    height: 48px !important;

    border-radius: 15px !important;
  }

  .srl-alternatives-page .srl-alt-guide-card h3 {
    font-size: 21px !important;
  }

  .srl-alternatives-page .srl-alt-cta {
    padding: 30px 24px !important;
    border-radius: 24px !important;
  }

  .srl-alternatives-page .srl-alt-cta .srl-alt-btn {
    width: 100% !important;
  }
}


/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

  .srl-alternatives-page .srl-alt-guide-card,
  .srl-alternatives-page .srl-alt-guide-card::after,
  .srl-alternatives-page .srl-alt-cta .srl-alt-btn {
    transition: none !important;
  }
}

/* =========================================================
   PREMIUM TUTORIALS HERO
   ========================================================= */

.srl-tutorials-page .srl-tutorials-hero {
  position: relative;
  gap: 28px !important;
  align-items: stretch !important;
}

/* LEFT HERO */
.srl-tutorials-page .srl-tutorials-hero-main {
  position: relative;
  isolation: isolate;
  min-height: 610px !important;
  padding: 58px !important;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.11), transparent 34%),
    radial-gradient(circle at 0% 100%, rgba(124, 58, 237, 0.06), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
  box-shadow:
    0 24px 60px rgba(15, 23, 42, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

.srl-tutorials-page .srl-tutorials-hero-main::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, #2563eb, #7c3aed, #0ea5e9);
}

.srl-tutorials-page .srl-tutorials-hero-main::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 300px;
  height: 300px;
  right: -95px;
  top: -95px;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 50%;
  box-shadow:
    0 0 0 30px rgba(37, 99, 235, 0.045),
    0 0 0 62px rgba(124, 58, 237, 0.025);
}

.srl-tutorials-page .srl-tutorials-eyebrow {
  min-height: 35px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(37, 99, 235, 0.12) !important;
  background: linear-gradient(180deg, #eff6ff, #e8f1ff) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 8px 18px rgba(37, 99, 235, 0.08) !important;
}

.srl-tutorials-page .srl-tutorials-hero-main h1 {
  max-width: 780px !important;
  margin: 30px 0 22px !important;
  color: #0f172a !important;
  font-size: clamp(50px, 5.2vw, 74px) !important;
  font-weight: 850 !important;
  line-height: 1.03 !important;
  letter-spacing: -0.058em !important;
}

.srl-tutorials-page .srl-tutorials-hero-main > p {
  max-width: 730px !important;
  color: #52627a !important;
  font-size: 18px !important;
  line-height: 1.78 !important;
}

.srl-tutorials-page .srl-tutorials-hero-actions {
  position: relative;
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px !important;
  margin-top: 32px !important;
  padding-top: 25px;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.srl-tutorials-page .srl-tutorials-hero-actions .srl-tutorials-btn {
  position: relative;
  overflow: hidden;
  min-height: 54px !important;
  padding: 0 21px !important;
  border-radius: 15px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    background .22s ease !important;
}

.srl-tutorials-page .srl-tutorials-hero-actions .srl-tutorials-btn-primary {
  border: 1px solid rgba(37, 99, 235, 0.20) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.18), transparent 34%),
    linear-gradient(135deg, #2563eb 0%, #3b5ce9 48%, #7c3aed 100%) !important;
  box-shadow:
    0 16px 30px rgba(37, 99, 235, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

.srl-tutorials-page .srl-tutorials-hero-actions .srl-tutorials-btn-primary::before {
  content: "▶";
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-right: 10px;
  border-radius: 10px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  font-size: 12px;
}

.srl-tutorials-page .srl-tutorials-hero-actions .srl-tutorials-btn-primary::after {
  content: "";
  position: absolute;
  width: 110px;
  height: 150px;
  left: -150px;
  top: -45px;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transition: left .55s ease;
}

.srl-tutorials-page .srl-tutorials-hero-actions .srl-tutorials-btn-primary:hover::after {
  left: calc(100% + 35px);
}

.srl-tutorials-page .srl-tutorials-hero-actions .srl-tutorials-btn-secondary {
  border: 1px solid rgba(148, 163, 184, 0.28) !important;
  color: #0f172a !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.06), transparent 36%),
    linear-gradient(180deg, #ffffff, #f8fafc) !important;
  box-shadow:
    0 10px 23px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

.srl-tutorials-page .srl-tutorials-hero-actions .srl-tutorials-btn-secondary::before {
  content: "⇄";
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-right: 10px;
  border-radius: 10px;
  color: #2563eb;
  background: rgba(37, 99, 235, 0.09);
  font-size: 15px;
}

.srl-tutorials-page .srl-tutorials-hero-actions .srl-tutorials-btn:hover {
  transform: translateY(-4px) !important;
}

/* RIGHT HERO */
.srl-tutorials-page .srl-tutorials-hero-side {
  position: relative;
  isolation: isolate;
  min-height: 610px !important;
  padding: 38px !important;
  overflow: hidden;
  border: 1px solid rgba(96, 165, 250, 0.14) !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.25), transparent 35%),
    radial-gradient(circle at 0% 100%, rgba(124, 58, 237, 0.15), transparent 36%),
    linear-gradient(155deg, #0f172a 0%, #172033 55%, #1e293b 100%) !important;
  box-shadow:
    0 26px 60px rgba(15, 23, 42, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.srl-tutorials-page .srl-tutorials-hero-side::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 245px;
  height: 245px;
  right: -82px;
  top: -92px;
  border: 1px solid rgba(147, 197, 253, 0.12);
  border-radius: 50%;
  box-shadow:
    0 0 0 30px rgba(37, 99, 235, 0.04),
    0 0 0 62px rgba(124, 58, 237, 0.022);
}

.srl-tutorials-page .srl-tutorials-hero-side > div:first-child > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #93c5fd !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
}

.srl-tutorials-page .srl-tutorials-hero-side > div:first-child > span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #60a5fa;
  box-shadow: 0 0 0 5px rgba(96, 165, 250, 0.12);
}

.srl-tutorials-page .srl-tutorials-hero-side h2 {
  max-width: 470px;
  margin: 20px 0 16px !important;
  color: #ffffff !important;
  font-size: clamp(30px, 3vw, 42px) !important;
  font-weight: 850 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.04em !important;
}

.srl-tutorials-page .srl-tutorials-hero-side > div:first-child > p {
  max-width: 500px;
  color: #cbd5e1 !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
}

.srl-tutorials-page .srl-tutorials-side-list {
  gap: 14px !important;
  margin-top: 30px !important;
}

.srl-tutorials-page .srl-tutorials-side-item {
  position: relative;
  overflow: hidden;
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) auto !important;
  gap: 14px !important;
  align-items: center !important;
  min-height: 94px;
  padding: 16px !important;
  border: 1px solid rgba(148, 163, 184, 0.17) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 12px 26px rgba(2, 6, 23, 0.13) !important;
  transition:
    transform .24s ease,
    border-color .24s ease,
    background .24s ease !important;
}

.srl-tutorials-page .srl-tutorials-side-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, #60a5fa, #8b5cf6);
}

.srl-tutorials-page .srl-tutorials-side-item::after {
  content: "→";
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  color: #93c5fd;
  background: rgba(59, 130, 246, 0.11);
  font-size: 16px;
  transition: transform .24s ease;
}

.srl-tutorials-page .srl-tutorials-side-item:hover {
  transform: translateX(5px);
  border-color: rgba(96, 165, 250, 0.34) !important;
  background:
    linear-gradient(135deg, rgba(59, 130, 246, 0.11), rgba(139, 92, 246, 0.06)) !important;
}

.srl-tutorials-page .srl-tutorials-side-item:hover::after {
  transform: translateX(3px);
}

.srl-tutorials-page .srl-tutorials-side-icon {
  width: 48px !important;
  height: 48px !important;
  border: 1px solid rgba(147, 197, 253, 0.16) !important;
  border-radius: 14px !important;
  color: #bfdbfe !important;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.34), rgba(124, 58, 237, 0.24)) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  box-shadow:
    0 10px 20px rgba(37, 99, 235, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.srl-tutorials-page .srl-tutorials-side-item strong {
  color: #ffffff !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}

.srl-tutorials-page .srl-tutorials-side-item small {
  margin-top: 4px !important;
  color: #aebbd0 !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}

@media (max-width: 1024px) {
  .srl-tutorials-page .srl-tutorials-hero-main,
  .srl-tutorials-page .srl-tutorials-hero-side {
    min-height: auto !important;
  }
}

@media (max-width: 760px) {
  .srl-tutorials-page .srl-tutorials-hero-main,
  .srl-tutorials-page .srl-tutorials-hero-side {
    padding: 28px !important;
    border-radius: 24px !important;
  }

  .srl-tutorials-page .srl-tutorials-hero-main h1 {
    font-size: 42px !important;
  }

  .srl-tutorials-page .srl-tutorials-hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .srl-tutorials-page .srl-tutorials-hero-actions .srl-tutorials-btn {
    width: 100% !important;
  }

  .srl-tutorials-page .srl-tutorials-side-item {
    grid-template-columns: 44px minmax(0, 1fr) !important;
  }

  .srl-tutorials-page .srl-tutorials-side-item::after {
    display: none;
  }

  .srl-tutorials-page .srl-tutorials-side-icon {
    width: 44px !important;
    height: 44px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .srl-tutorials-page .srl-tutorials-hero-actions .srl-tutorials-btn,
  .srl-tutorials-page .srl-tutorials-side-item {
    transition: none !important;
  }
}

/* =========================================================
   PREMIUM TUTORIAL LIBRARY CONTROLS
   Search + Clear button + Category filters
   ========================================================= */

/* Main panel */
.srl-tutorials-page .srl-tutorials-controls {
  position: relative;
  overflow: hidden;

  padding: 34px !important;

  border: 1px solid rgba(148, 163, 184, 0.20) !important;
  border-radius: 28px !important;

  background:
    radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.10), transparent 34%),
    radial-gradient(circle at 0% 100%, rgba(124, 58, 237, 0.06), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;

  box-shadow:
    0 24px 58px rgba(15, 23, 42, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

/* Top gradient */
.srl-tutorials-page .srl-tutorials-controls::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;

  background:
    linear-gradient(
      90deg,
      #2563eb,
      #7c3aed,
      #0ea5e9
    );
}

/* Header */
.srl-tutorials-page .srl-tutorials-controls-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.62fr) !important;

  gap: 28px !important;
  align-items: end !important;

  margin-bottom: 24px !important;
}

.srl-tutorials-page .srl-tutorials-controls-head h2 {
  margin: 16px 0 0 !important;

  color: #0f172a !important;

  font-size: clamp(30px, 3.4vw, 42px) !important;
  font-weight: 850 !important;

  line-height: 1.12 !important;
  letter-spacing: -0.042em !important;
}

.srl-tutorials-page .srl-tutorials-controls-head p {
  margin: 0 !important;

  color: #64748b !important;

  font-size: 14px !important;
  line-height: 1.72 !important;
  text-align: right !important;
}

/* Search row */
.srl-tutorials-page .srl-tutorials-search-row {
  position: relative;

  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;

  gap: 12px !important;
  align-items: stretch !important;
}

/* Search input */
.srl-tutorials-page .srl-tutorials-search {
  min-height: 58px !important;

  padding: 0 18px 0 52px !important;

  border: 1px solid rgba(148, 163, 184, 0.30) !important;
  border-radius: 16px !important;

  color: #0f172a !important;

  background:
    #ffffff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E")
    no-repeat 18px center !important;

  font-size: 15px !important;
  font-weight: 700 !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 10px 24px rgba(15, 23, 42, 0.055) !important;

  outline: none !important;

  transition:
    border-color .22s ease,
    box-shadow .22s ease,
    transform .22s ease !important;
}

.srl-tutorials-page .srl-tutorials-search::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
  font-weight: 600 !important;
}

.srl-tutorials-page .srl-tutorials-search:hover {
  border-color: rgba(37, 99, 235, 0.34) !important;
}

.srl-tutorials-page .srl-tutorials-search:focus {
  transform: translateY(-1px);

  border-color: rgba(37, 99, 235, 0.62) !important;

  box-shadow:
    0 0 0 4px rgba(37, 99, 235, 0.10),
    0 15px 28px rgba(37, 99, 235, 0.08) !important;
}

/* Clear button */
.srl-tutorials-page .srl-tutorials-clear {
  position: relative;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;

  min-width: 154px !important;
  min-height: 58px !important;

  padding: 0 18px !important;

  border: 1px solid rgba(148, 163, 184, 0.28) !important;
  border-radius: 16px !important;

  color: #0f172a !important;

  background:
    radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.07), transparent 36%),
    linear-gradient(180deg, #ffffff, #f8fafc) !important;

  font-size: 13px !important;
  font-weight: 900 !important;

  box-shadow:
    0 10px 23px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;

  cursor: pointer !important;
  white-space: nowrap !important;

  transition:
    transform .22s ease,
    color .22s ease,
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease !important;
}

.srl-tutorials-page .srl-tutorials-clear::before {
  content: "↻";

  display: grid;
  place-items: center;

  width: 30px;
  height: 30px;

  border-radius: 10px;

  color: #2563eb;
  background: rgba(37, 99, 235, 0.09);

  font-size: 16px;
  font-weight: 900;
}

.srl-tutorials-page .srl-tutorials-clear:hover {
  transform: translateY(-3px);

  color: #ffffff !important;
  border-color: #2563eb !important;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #7c3aed
    ) !important;

  box-shadow:
    0 16px 30px rgba(37, 99, 235, 0.22) !important;
}

.srl-tutorials-page .srl-tutorials-clear:hover::before {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
}

/* Filter row */
.srl-tutorials-page .srl-tutorials-filter-row {
  position: relative;

  display: flex !important;
  flex-wrap: wrap !important;

  gap: 10px !important;

  margin-top: 18px !important;
  padding-top: 18px !important;

  border-top: 1px solid rgba(148, 163, 184, 0.18);
}

/* Filter buttons */
.srl-tutorials-page .srl-tutorials-filter {
  position: relative;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 42px !important;
  padding: 0 16px !important;

  border: 1px solid rgba(148, 163, 184, 0.25) !important;
  border-radius: 999px !important;

  color: #475569 !important;

  background:
    linear-gradient(
      180deg,
      #ffffff,
      #f8fafc
    ) !important;

  font-size: 12px !important;
  font-weight: 900 !important;

  box-shadow:
    0 8px 18px rgba(15, 23, 42, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;

  cursor: pointer !important;

  transform: translateY(0);

  transition:
    transform .20s ease,
    color .20s ease,
    border-color .20s ease,
    background .20s ease,
    box-shadow .20s ease !important;
}

.srl-tutorials-page .srl-tutorials-filter::before {
  content: "";

  width: 7px;
  height: 7px;

  margin-right: 8px;

  display: inline-block;

  border-radius: 50%;

  background: #cbd5e1;

  transition:
    background .20s ease,
    box-shadow .20s ease !important;
}

.srl-tutorials-page .srl-tutorials-filter:hover {
  transform: translateY(-3px);

  color: #2563eb !important;
  border-color: rgba(37, 99, 235, 0.32) !important;

  background: #ffffff !important;

  box-shadow:
    0 13px 24px rgba(37, 99, 235, 0.10) !important;
}

.srl-tutorials-page .srl-tutorials-filter:hover::before {
  background: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.10);
}

/* Active filter */
.srl-tutorials-page .srl-tutorials-filter.is-active {
  transform: translateY(-2px);

  color: #ffffff !important;
  border-color: transparent !important;

  background:
    radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.18), transparent 38%),
    linear-gradient(
      135deg,
      #2563eb 0%,
      #3b5ce9 50%,
      #7c3aed 100%
    ) !important;

  box-shadow:
    0 13px 25px rgba(37, 99, 235, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

.srl-tutorials-page .srl-tutorials-filter.is-active::before {
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.15);
}

/* Focus */
.srl-tutorials-page .srl-tutorials-search:focus-visible,
.srl-tutorials-page .srl-tutorials-clear:focus-visible,
.srl-tutorials-page .srl-tutorials-filter:focus-visible {
  outline: 3px solid rgba(59, 130, 246, 0.22) !important;
  outline-offset: 3px !important;
}

/* Tablet */
@media (max-width: 900px) {
  .srl-tutorials-page .srl-tutorials-controls-head {
    grid-template-columns: 1fr !important;
  }

  .srl-tutorials-page .srl-tutorials-controls-head p {
    max-width: 680px;
    text-align: left !important;
  }
}

/* Mobile */
@media (max-width: 760px) {
  .srl-tutorials-page .srl-tutorials-controls {
    padding: 26px 20px !important;
    border-radius: 24px !important;
  }

  .srl-tutorials-page .srl-tutorials-search-row {
    grid-template-columns: 1fr !important;
  }

  .srl-tutorials-page .srl-tutorials-clear {
    width: 100% !important;
    min-width: 0 !important;
  }

  .srl-tutorials-page .srl-tutorials-filter-row {
    gap: 8px !important;
  }

  .srl-tutorials-page .srl-tutorials-filter {
    flex: 1 1 auto;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .srl-tutorials-page .srl-tutorials-search,
  .srl-tutorials-page .srl-tutorials-clear,
  .srl-tutorials-page .srl-tutorials-filter {
    transition: none !important;
  }
}

/* =========================================================
   PREMIUM QUICK START TUTORIAL CARDS
   ========================================================= */

/* Section wrapper */
.srl-tutorials-page .srl-tutorials-section:has(.srl-tutorials-grid) {
  position: relative;
  overflow: hidden;

  padding: 42px !important;

  border: 1px solid rgba(148, 163, 184, 0.20) !important;
  border-radius: 30px !important;

  background:
    radial-gradient(circle at 0% 0%, rgba(37, 99, 235, 0.10), transparent 30%),
    radial-gradient(circle at 100% 100%, rgba(124, 58, 237, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.93)) !important;

  box-shadow:
    0 24px 60px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
}

/* Top gradient */
.srl-tutorials-page .srl-tutorials-section:has(.srl-tutorials-grid)::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;

  background:
    linear-gradient(
      90deg,
      #2563eb,
      #7c3aed,
      #0ea5e9
    );
}

/* Section heading */
.srl-tutorials-page .srl-tutorials-section:has(.srl-tutorials-grid)
.srl-tutorials-section-head {
  max-width: 820px !important;
  margin-bottom: 32px !important;
}

.srl-tutorials-page .srl-tutorials-section:has(.srl-tutorials-grid)
.srl-tutorials-section-head h2 {
  margin-top: 18px !important;

  color: #0f172a !important;

  font-size: clamp(36px, 4vw, 54px) !important;
  font-weight: 850 !important;

  line-height: 1.08 !important;
  letter-spacing: -0.048em !important;
}

.srl-tutorials-page .srl-tutorials-section:has(.srl-tutorials-grid)
.srl-tutorials-section-head p {
  max-width: 760px;

  color: #64748b !important;

  font-size: 15px !important;
  line-height: 1.72 !important;
}

/* Grid */
.srl-tutorials-page .srl-tutorials-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

  gap: 22px !important;
  align-items: stretch !important;
}

/* Card */
.srl-tutorials-page .srl-tutorial-card {
  position: relative;
  isolation: isolate;

  display: flex !important;
  flex-direction: column !important;

  min-height: 380px !important;
  padding: 27px !important;
  overflow: hidden;

  border: 1px solid rgba(var(--accent-rgb), 0.18) !important;
  border-radius: 25px !important;

  background:
    radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb), .13), transparent 38%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;

  box-shadow:
    0 17px 40px rgba(15, 23, 42, 0.075),
    inset 0 1px 0 rgba(255,255,255,.96) !important;

  transform: translateY(0);

  transition:
    transform .26s ease,
    border-color .26s ease,
    box-shadow .26s ease !important;
}

/* Colored top bar */
.srl-tutorials-page .srl-tutorial-card::before {
  content: "";
  position: absolute;

  inset: 0 0 auto;

  height: 4px;

  background:
    linear-gradient(
      90deg,
      var(--accent),
      rgba(var(--accent-rgb), .28)
    );
}

/* Decorative rings */
.srl-tutorials-page .srl-tutorial-card::after {
  content: "";
  position: absolute;
  z-index: -1;

  width: 155px;
  height: 155px;

  right: -66px;
  top: -66px;

  border-radius: 50%;
  border: 1px solid rgba(var(--accent-rgb), .15);

  box-shadow:
    0 0 0 25px rgba(var(--accent-rgb), .04),
    0 0 0 50px rgba(var(--accent-rgb), .022);

  transition: transform .32s ease;
}

.srl-tutorials-page .srl-tutorial-card:hover {
  transform: translateY(-8px) !important;

  border-color: rgba(var(--accent-rgb), .42) !important;

  box-shadow:
    0 26px 58px rgba(15, 23, 42, .12),
    0 11px 25px rgba(var(--accent-rgb), .09) !important;
}

.srl-tutorials-page .srl-tutorial-card:hover::after {
  transform: scale(1.08);
}

/* Open card */
.srl-tutorials-page .srl-tutorial-card.is-open {
  border-color: rgba(var(--accent-rgb), .45) !important;

  background:
    radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb), .15), transparent 38%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;

  box-shadow:
    0 28px 60px rgba(15, 23, 42, .13),
    0 12px 26px rgba(var(--accent-rgb), .10) !important;
}

/* Category label */
.srl-tutorials-page .srl-tutorial-label {
  position: relative;
  z-index: 2;

  min-height: 33px !important;
  padding: 0 12px !important;

  border: 1px solid rgba(var(--accent-rgb), .15) !important;
  border-radius: 999px !important;

  color: var(--accent) !important;

  background:
    rgba(var(--accent-rgb), .08) !important;

  font-size: 10px !important;
  font-weight: 900 !important;

  letter-spacing: .085em !important;
  text-transform: uppercase !important;
}

/* Tutorial title */
.srl-tutorials-page .srl-tutorial-card h3 {
  margin: 22px 0 12px !important;

  color: #0f172a !important;

  font-size: 24px !important;
  font-weight: 850 !important;

  line-height: 1.25 !important;
  letter-spacing: -.038em !important;
}

/* Description */
.srl-tutorials-page .srl-tutorial-card > p {
  margin: 0 0 22px !important;

  color: #64748b !important;

  font-size: 14px !important;
  line-height: 1.72 !important;
}

/* View Steps button */
.srl-tutorials-page .srl-tutorial-toggle {
  position: relative;
  overflow: hidden;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;

  width: 100% !important;
  min-height: 50px !important;

  margin-top: auto !important;
  padding: 0 16px !important;

  border: 1px solid rgba(var(--accent-rgb), .20) !important;
  border-radius: 15px !important;

  color: #ffffff !important;

  background:
    radial-gradient(circle at 100% 0%, rgba(255,255,255,.16), transparent 36%),
    linear-gradient(
      135deg,
      var(--accent),
      rgba(var(--accent-rgb), .78)
    ) !important;

  font-size: 13px !important;
  font-weight: 900 !important;

  box-shadow:
    0 12px 24px rgba(var(--accent-rgb), .20),
    inset 0 1px 0 rgba(255,255,255,.16) !important;

  cursor: pointer !important;

  transition:
    transform .22s ease,
    box-shadow .22s ease !important;
}

.srl-tutorials-page .srl-tutorial-toggle::before {
  content: "＋";

  display: grid;
  place-items: center;

  width: 28px;
  height: 28px;

  border-radius: 9px;

  color: #ffffff;
  background: rgba(255,255,255,.15);

  font-size: 15px;
  font-weight: 900;

  transition: transform .22s ease;
}

.srl-tutorials-page .srl-tutorial-card.is-open
.srl-tutorial-toggle::before {
  content: "−";
  transform: rotate(180deg);
}

.srl-tutorials-page .srl-tutorial-toggle:hover {
  transform: translateY(-3px);

  box-shadow:
    0 17px 31px rgba(var(--accent-rgb), .27),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
}

/* Steps panel */
.srl-tutorials-page .srl-tutorial-steps {
  margin-top: 17px !important;
  padding: 18px !important;

  border: 1px solid rgba(var(--accent-rgb), .15) !important;
  border-radius: 17px !important;

  background:
    radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb), .08), transparent 40%),
    linear-gradient(180deg, #ffffff, #f8fafc) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 10px 22px rgba(15,23,42,.05) !important;
}

/* Individual step */
.srl-tutorials-page .srl-tutorial-step {
  position: relative;

  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: start !important;

  margin-top: 0 !important;
  padding: 12px 0 !important;

  border-bottom: 1px solid rgba(148,163,184,.16);
}

.srl-tutorials-page .srl-tutorial-step:last-of-type {
  border-bottom: 0;
}

.srl-tutorials-page .srl-tutorial-step span:first-child {
  display: grid !important;
  place-items: center !important;

  width: 34px !important;
  height: 34px !important;

  border: 1px solid rgba(var(--accent-rgb), .14) !important;
  border-radius: 11px !important;

  color: var(--accent) !important;

  background:
    rgba(var(--accent-rgb), .09) !important;

  font-size: 12px !important;
  font-weight: 900 !important;
}

.srl-tutorials-page .srl-tutorial-step span:last-child {
  padding-top: 4px;

  color: #475569 !important;

  font-size: 13px !important;
  line-height: 1.62 !important;
}

/* Related review link */
.srl-tutorials-page .srl-tutorial-related {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  min-height: 44px !important;

  margin-top: 15px !important;
  padding: 0 14px !important;

  border: 1px solid rgba(var(--accent-rgb), .14) !important;
  border-radius: 13px !important;

  color: var(--accent) !important;

  background:
    rgba(var(--accent-rgb), .08) !important;

  font-size: 12px !important;
  font-weight: 900 !important;

  transition:
    transform .20s ease,
    color .20s ease,
    background .20s ease !important;
}

.srl-tutorials-page .srl-tutorial-related:hover {
  transform: translateY(-2px);

  color: #ffffff !important;

  background: var(--accent) !important;
}

/* Empty state */
.srl-tutorials-page .srl-tutorials-empty {
  margin-top: 22px;
  padding: 32px !important;

  border: 1px dashed rgba(37, 99, 235, 0.30) !important;
  border-radius: 22px !important;

  color: #64748b !important;

  background:
    radial-gradient(circle at 50% 0%, rgba(37,99,235,.07), transparent 45%),
    #ffffff !important;

  font-size: 14px !important;
  font-weight: 700 !important;

  box-shadow:
    0 12px 26px rgba(15,23,42,.05) !important;
}

/* Tablet */
@media (max-width: 1024px) {
  .srl-tutorials-page .srl-tutorials-section:has(.srl-tutorials-grid) {
    padding: 30px !important;
  }

  .srl-tutorials-page .srl-tutorials-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .srl-tutorials-page .srl-tutorial-card {
    min-height: 360px !important;
  }
}

/* Mobile */
@media (max-width: 760px) {
  .srl-tutorials-page .srl-tutorials-section:has(.srl-tutorials-grid) {
    padding: 24px 18px !important;
    border-radius: 24px !important;
  }

  .srl-tutorials-page .srl-tutorials-grid {
    grid-template-columns: 1fr !important;
  }

  .srl-tutorials-page .srl-tutorial-card {
    min-height: auto !important;

    padding: 23px !important;
    border-radius: 21px !important;
  }

  .srl-tutorials-page .srl-tutorial-card h3 {
    font-size: 22px !important;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .srl-tutorials-page .srl-tutorial-card,
  .srl-tutorials-page .srl-tutorial-card::after,
  .srl-tutorials-page .srl-tutorial-toggle,
  .srl-tutorials-page .srl-tutorial-related {
    transition: none !important;
  }
}

/* =========================================================
   PREMIUM LEARNING PATH + FINAL CTA
   Tutorials page
   ========================================================= */


/* =========================================================
   LEARNING PATH SECTION
   ========================================================= */

.srl-tutorials-page .srl-tutorials-section:has(.srl-tutorial-path-grid) {
  position: relative;
  overflow: hidden;

  padding: 42px !important;

  border: 1px solid rgba(148, 163, 184, 0.20) !important;
  border-radius: 30px !important;

  background:
    radial-gradient(circle at 0% 0%, rgba(37, 99, 235, 0.10), transparent 30%),
    radial-gradient(circle at 100% 100%, rgba(124, 58, 237, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.93)) !important;

  box-shadow:
    0 24px 60px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
}


/* Thanh gradient phía trên */
.srl-tutorials-page .srl-tutorials-section:has(.srl-tutorial-path-grid)::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;

  height: 4px;

  background:
    linear-gradient(
      90deg,
      #2563eb,
      #7c3aed,
      #0ea5e9
    );
}


/* Header */
.srl-tutorials-page .srl-tutorials-section:has(.srl-tutorial-path-grid)
.srl-tutorials-section-head {
  max-width: 860px !important;
  margin-bottom: 32px !important;
}


.srl-tutorials-page .srl-tutorials-section:has(.srl-tutorial-path-grid)
.srl-tutorials-section-head h2 {
  margin-top: 18px !important;

  color: #0f172a !important;

  font-size: clamp(36px, 4vw, 54px) !important;
  font-weight: 850 !important;

  line-height: 1.08 !important;
  letter-spacing: -0.048em !important;
}


/* Grid */
.srl-tutorials-page .srl-tutorial-path-grid {
  position: relative;

  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

  gap: 20px !important;
}


/* Đường nối 3 bước */
.srl-tutorials-page .srl-tutorial-path-grid::before {
  content: "";
  position: absolute;

  top: 32px;
  left: 15%;
  right: 15%;

  height: 2px;

  background:
    linear-gradient(
      90deg,
      rgba(37,99,235,.18),
      rgba(124,58,237,.30),
      rgba(14,165,233,.18)
    );

  z-index: 0;
}


/* Card */
.srl-tutorials-page .srl-tutorial-path-card {
  --path-accent: #2563eb;
  --path-rgb: 37, 99, 235;

  position: relative;
  z-index: 1;
  isolation: isolate;

  min-height: 270px !important;
  padding: 28px !important;
  overflow: hidden;

  border: 1px solid rgba(var(--path-rgb), 0.18) !important;
  border-radius: 24px !important;

  background:
    radial-gradient(circle at 100% 0%, rgba(var(--path-rgb), 0.13), transparent 38%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;

  box-shadow:
    0 16px 38px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255,255,255,.96) !important;

  transform: translateY(0);

  transition:
    transform .26s ease,
    border-color .26s ease,
    box-shadow .26s ease !important;
}


/* Thanh màu trong card */
.srl-tutorials-page .srl-tutorial-path-card::before {
  content: "";
  position: absolute;

  inset: 0 0 auto;

  height: 4px;

  background:
    linear-gradient(
      90deg,
      var(--path-accent),
      rgba(var(--path-rgb), .28)
    );
}


/* Vòng trang trí */
.srl-tutorials-page .srl-tutorial-path-card::after {
  content: "";
  position: absolute;
  z-index: -1;

  width: 150px;
  height: 150px;

  right: -65px;
  top: -65px;

  border-radius: 50%;
  border: 1px solid rgba(var(--path-rgb), .16);

  box-shadow:
    0 0 0 24px rgba(var(--path-rgb), .04),
    0 0 0 48px rgba(var(--path-rgb), .022);

  transition: transform .32s ease;
}


.srl-tutorials-page .srl-tutorial-path-card:hover {
  transform: translateY(-8px) !important;

  border-color: rgba(var(--path-rgb), .40) !important;

  box-shadow:
    0 25px 58px rgba(15, 23, 42, .12),
    0 10px 24px rgba(var(--path-rgb), .09) !important;
}


.srl-tutorials-page .srl-tutorial-path-card:hover::after {
  transform: scale(1.08);
}


/* Số bước */
.srl-tutorials-page .srl-tutorial-path-number {
  position: relative;
  z-index: 2;

  display: inline-grid !important;
  place-items: center !important;

  width: 54px !important;
  height: 54px !important;
  margin-bottom: 24px !important;

  border: 6px solid #ffffff !important;
  border-radius: 18px !important;

  color: #ffffff !important;

  background:
    linear-gradient(
      135deg,
      var(--path-accent),
      rgba(var(--path-rgb), .72)
    ) !important;

  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;

  box-shadow:
    0 13px 26px rgba(var(--path-rgb), .24),
    0 0 0 1px rgba(var(--path-rgb), .08) !important;
}


/* Tiêu đề card */
.srl-tutorials-page .srl-tutorial-path-card h3 {
  margin: 0 0 13px !important;

  color: #0f172a !important;

  font-size: 23px !important;
  font-weight: 850 !important;

  line-height: 1.28 !important;
  letter-spacing: -.035em !important;
}


/* Nội dung card */
.srl-tutorials-page .srl-tutorial-path-card p {
  margin: 0 !important;

  color: #64748b !important;

  font-size: 14px !important;
  line-height: 1.75 !important;
}


/* Dòng nhấn cuối card */
.srl-tutorials-page .srl-tutorial-path-card p::after {
  display: block;

  margin-top: 22px;
  padding-top: 16px;

  border-top: 1px solid rgba(148, 163, 184, 0.18);

  color: var(--path-accent);

  font-size: 11px;
  font-weight: 900;

  letter-spacing: .075em;
  text-transform: uppercase;
}


/* Màu riêng từng bước */
.srl-tutorials-page .srl-tutorial-path-card:nth-child(1) {
  --path-accent: #2563eb;
  --path-rgb: 37, 99, 235;
}

.srl-tutorials-page .srl-tutorial-path-card:nth-child(1) p::after {
  content: "Start with the desired outcome";
}


.srl-tutorials-page .srl-tutorial-path-card:nth-child(2) {
  --path-accent: #7c3aed;
  --path-rgb: 124, 58, 237;
}

.srl-tutorials-page .srl-tutorial-path-card:nth-child(2) p::after {
  content: "Use a realistic test workflow";
}


.srl-tutorials-page .srl-tutorial-path-card:nth-child(3) {
  --path-accent: #0ea5e9;
  --path-rgb: 14, 165, 233;
}

.srl-tutorials-page .srl-tutorial-path-card:nth-child(3) p::after {
  content: "Compare the real trade-offs";
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.srl-tutorials-page .srl-tutorials-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 28px !important;
  align-items: center !important;

  margin-top: 34px !important;
  padding: 44px !important;

  border: 1px solid rgba(96, 165, 250, 0.14) !important;
  border-radius: 28px !important;

  background:
    radial-gradient(circle at 100% 0%, rgba(37,99,235,.24), transparent 32%),
    radial-gradient(circle at 0% 100%, rgba(124,58,237,.18), transparent 34%),
    linear-gradient(135deg, #0f172a 0%, #172033 56%, #1e293b 100%) !important;

  box-shadow:
    0 26px 60px rgba(15, 23, 42, .22),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}


/* Vòng trang trí */
.srl-tutorials-page .srl-tutorials-cta::before {
  content: "";
  position: absolute;
  z-index: -1;

  width: 230px;
  height: 230px;

  right: -75px;
  top: -95px;

  border-radius: 50%;
  border: 1px solid rgba(147, 197, 253, 0.13);

  box-shadow:
    0 0 0 30px rgba(37,99,235,.045),
    0 0 0 62px rgba(124,58,237,.025);
}


/* CTA content */
.srl-tutorials-page .srl-tutorials-cta > div {
  position: relative;
  z-index: 2;
}


.srl-tutorials-page .srl-tutorials-cta h2 {
  margin: 0 0 12px !important;

  color: #ffffff !important;

  font-size: clamp(30px, 4vw, 46px) !important;
  font-weight: 850 !important;

  line-height: 1.08 !important;
  letter-spacing: -.045em !important;
}


.srl-tutorials-page .srl-tutorials-cta p {
  max-width: 700px;

  margin: 0 !important;

  color: #cbd5e1 !important;

  font-size: 15px !important;
  line-height: 1.72 !important;
}


/* Nút CTA */
.srl-tutorials-page .srl-tutorials-cta .srl-tutorials-btn {
  position: relative;
  z-index: 2;
  overflow: hidden;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 56px !important;
  padding: 0 22px !important;

  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 15px !important;

  color: #ffffff !important;

  background:
    radial-gradient(circle at 100% 0%, rgba(255,255,255,.18), transparent 34%),
    linear-gradient(
      135deg,
      #2563eb 0%,
      #3159e8 48%,
      #7c3aed 100%
    ) !important;

  font-size: 13px !important;
  font-weight: 900 !important;

  white-space: nowrap;

  box-shadow:
    0 16px 30px rgba(37, 99, 235, .30),
    inset 0 1px 0 rgba(255,255,255,.16) !important;

  transition:
    transform .22s ease,
    box-shadow .22s ease !important;
}


.srl-tutorials-page .srl-tutorials-cta .srl-tutorials-btn::before {
  content: "↗";

  display: grid;
  place-items: center;

  width: 30px;
  height: 30px;
  margin-right: 10px;

  border-radius: 10px;

  color: #ffffff;
  background: rgba(255,255,255,.14);

  font-size: 15px;
  font-weight: 900;
}


.srl-tutorials-page .srl-tutorials-cta .srl-tutorials-btn::after {
  content: "";
  position: absolute;

  width: 110px;
  height: 150px;

  left: -150px;
  top: -45px;

  transform: rotate(18deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.22),
      transparent
    );

  transition: left .55s ease;
}


.srl-tutorials-page .srl-tutorials-cta .srl-tutorials-btn:hover {
  transform: translateY(-4px) !important;

  box-shadow:
    0 23px 40px rgba(37, 99, 235, .37),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
}


.srl-tutorials-page .srl-tutorials-cta .srl-tutorials-btn:hover::after {
  left: calc(100% + 35px);
}


/* Tablet */
@media (max-width: 1024px) {

  .srl-tutorials-page .srl-tutorials-section:has(.srl-tutorial-path-grid) {
    padding: 30px !important;
  }

  .srl-tutorials-page .srl-tutorial-path-grid {
    grid-template-columns: 1fr !important;
  }

  .srl-tutorials-page .srl-tutorial-path-grid::before {
    display: none;
  }

  .srl-tutorials-page .srl-tutorial-path-card {
    min-height: auto !important;
  }

  .srl-tutorials-page .srl-tutorials-cta {
    grid-template-columns: 1fr !important;
  }

  .srl-tutorials-page .srl-tutorials-cta .srl-tutorials-btn {
    width: fit-content !important;
  }
}


/* Mobile */
@media (max-width: 760px) {

  .srl-tutorials-page .srl-tutorials-section:has(.srl-tutorial-path-grid) {
    padding: 24px 18px !important;
    border-radius: 24px !important;
  }

  .srl-tutorials-page .srl-tutorial-path-card {
    padding: 23px !important;
    border-radius: 21px !important;
  }

  .srl-tutorials-page .srl-tutorial-path-number {
    width: 48px !important;
    height: 48px !important;
    border-radius: 15px !important;
  }

  .srl-tutorials-page .srl-tutorial-path-card h3 {
    font-size: 21px !important;
  }

  .srl-tutorials-page .srl-tutorials-cta {
    padding: 30px 24px !important;
    border-radius: 24px !important;
  }

  .srl-tutorials-page .srl-tutorials-cta .srl-tutorials-btn {
    width: 100% !important;
  }
}


/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

  .srl-tutorials-page .srl-tutorial-path-card,
  .srl-tutorials-page .srl-tutorial-path-card::after,
  .srl-tutorials-page .srl-tutorials-cta .srl-tutorials-btn {
    transition: none !important;
  }
}

/* =========================================================
   PREMIUM BLOG HERO
   SmartReadingLab Blog
   ========================================================= */

.srl-blog-page .srl-blog-hero {
  position: relative;
  gap: 28px !important;
  align-items: stretch !important;
}


/* =========================================================
   LEFT HERO
   ========================================================= */

.srl-blog-page .srl-blog-hero-main {
  position: relative;
  isolation: isolate;

  min-height: 610px !important;
  padding: 58px !important;
  overflow: hidden;

  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  border-radius: 30px !important;

  background:
    radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.11), transparent 34%),
    radial-gradient(circle at 0% 100%, rgba(124, 58, 237, 0.06), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;

  box-shadow:
    0 24px 60px rgba(15, 23, 42, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}


/* Thanh gradient phía trên */
.srl-blog-page .srl-blog-hero-main::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;

  height: 4px;

  background:
    linear-gradient(
      90deg,
      #2563eb,
      #7c3aed,
      #0ea5e9
    );
}


/* Vòng trang trí */
.srl-blog-page .srl-blog-hero-main::after {
  content: "";
  position: absolute;
  z-index: -1;

  width: 300px;
  height: 300px;

  right: -95px;
  top: -95px;

  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 50%;

  box-shadow:
    0 0 0 30px rgba(37, 99, 235, 0.045),
    0 0 0 62px rgba(124, 58, 237, 0.025);
}


/* Eyebrow */
.srl-blog-page .srl-blog-eyebrow {
  min-height: 35px !important;
  padding: 0 14px !important;

  border: 1px solid rgba(37, 99, 235, 0.12) !important;

  background:
    linear-gradient(
      180deg,
      #eff6ff,
      #e8f1ff
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.90),
    0 8px 18px rgba(37, 99, 235, 0.08) !important;
}


/* Tiêu đề chính */
.srl-blog-page .srl-blog-hero-main h1 {
  max-width: 790px !important;
  margin: 30px 0 22px !important;

  color: #0f172a !important;

  font-size: clamp(50px, 5.2vw, 74px) !important;
  font-weight: 850 !important;

  line-height: 1.03 !important;
  letter-spacing: -0.058em !important;
}


/* Mô tả */
.srl-blog-page .srl-blog-hero-main > p {
  max-width: 730px !important;

  color: #52627a !important;

  font-size: 18px !important;
  line-height: 1.78 !important;
}


/* Khu vực nút */
.srl-blog-page .srl-blog-hero-actions {
  position: relative;

  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;

  margin-top: 32px !important;
  padding-top: 25px !important;

  border-top: 1px solid rgba(148, 163, 184, 0.18);
}


/* Nút chung */
.srl-blog-page .srl-blog-hero-actions .srl-blog-btn {
  position: relative;
  overflow: hidden;

  min-height: 54px !important;
  padding: 0 21px !important;

  border-radius: 15px !important;

  font-size: 13px !important;
  font-weight: 900 !important;

  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    background .22s ease !important;
}


/* Nút Explore Articles */
.srl-blog-page .srl-blog-hero-actions .srl-blog-btn-primary {
  border: 1px solid rgba(37, 99, 235, 0.20) !important;

  background:
    radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.18), transparent 34%),
    linear-gradient(
      135deg,
      #2563eb 0%,
      #3b5ce9 48%,
      #7c3aed 100%
    ) !important;

  box-shadow:
    0 16px 30px rgba(37, 99, 235, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}


.srl-blog-page .srl-blog-hero-actions .srl-blog-btn-primary::before {
  content: "✦";

  display: inline-grid;
  place-items: center;

  width: 30px;
  height: 30px;
  margin-right: 10px;

  border-radius: 10px;

  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);

  font-size: 13px;
}


.srl-blog-page .srl-blog-hero-actions .srl-blog-btn-primary::after {
  content: "";
  position: absolute;

  width: 110px;
  height: 150px;

  left: -150px;
  top: -45px;

  transform: rotate(18deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.22),
      transparent
    );

  transition: left .55s ease;
}


.srl-blog-page .srl-blog-hero-actions .srl-blog-btn-primary:hover::after {
  left: calc(100% + 35px);
}


/* Nút Browse Tutorials */
.srl-blog-page .srl-blog-hero-actions .srl-blog-btn-secondary {
  border: 1px solid rgba(148, 163, 184, 0.28) !important;

  color: #0f172a !important;

  background:
    radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.06), transparent 36%),
    linear-gradient(180deg, #ffffff, #f8fafc) !important;

  box-shadow:
    0 10px 23px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}


.srl-blog-page .srl-blog-hero-actions .srl-blog-btn-secondary::before {
  content: "▤";

  display: inline-grid;
  place-items: center;

  width: 30px;
  height: 30px;
  margin-right: 10px;

  border-radius: 10px;

  color: #2563eb;
  background: rgba(37, 99, 235, 0.09);

  font-size: 14px;
}


.srl-blog-page .srl-blog-hero-actions .srl-blog-btn:hover {
  transform: translateY(-4px) !important;
}


.srl-blog-page .srl-blog-hero-actions .srl-blog-btn-primary:hover {
  box-shadow:
    0 22px 40px rgba(37, 99, 235, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}


.srl-blog-page .srl-blog-hero-actions .srl-blog-btn-secondary:hover {
  border-color: rgba(37, 99, 235, 0.32) !important;

  box-shadow:
    0 17px 31px rgba(15, 23, 42, 0.10) !important;
}


/* =========================================================
   RIGHT HERO
   ========================================================= */

.srl-blog-page .srl-blog-hero-side {
  position: relative;
  isolation: isolate;

  min-height: 610px !important;
  padding: 38px !important;
  overflow: hidden;

  border: 1px solid rgba(96, 165, 250, 0.14) !important;
  border-radius: 30px !important;

  background:
    radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.25), transparent 35%),
    radial-gradient(circle at 0% 100%, rgba(124, 58, 237, 0.15), transparent 36%),
    linear-gradient(
      155deg,
      #0f172a 0%,
      #172033 55%,
      #1e293b 100%
    ) !important;

  box-shadow:
    0 26px 60px rgba(15, 23, 42, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}


/* Vòng trang trí */
.srl-blog-page .srl-blog-hero-side::before {
  content: "";
  position: absolute;
  z-index: -1;

  width: 245px;
  height: 245px;

  right: -82px;
  top: -92px;

  border: 1px solid rgba(147, 197, 253, 0.12);
  border-radius: 50%;

  box-shadow:
    0 0 0 30px rgba(37, 99, 235, 0.04),
    0 0 0 62px rgba(124, 58, 237, 0.022);
}


/* Label phải */
.srl-blog-page .srl-blog-hero-side > div:first-child > span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;

  color: #93c5fd !important;

  font-size: 11px !important;
  font-weight: 900 !important;

  letter-spacing: .10em !important;
  text-transform: uppercase !important;
}


.srl-blog-page .srl-blog-hero-side > div:first-child > span::before {
  content: "";

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #60a5fa;

  box-shadow:
    0 0 0 5px rgba(96, 165, 250, 0.12);
}


/* Tiêu đề phải */
.srl-blog-page .srl-blog-hero-side h2 {
  max-width: 470px;
  margin: 20px 0 16px !important;

  color: #ffffff !important;

  font-size: clamp(30px, 3vw, 42px) !important;
  font-weight: 850 !important;

  line-height: 1.12 !important;
  letter-spacing: -0.04em !important;
}


/* Nội dung phải */
.srl-blog-page .srl-blog-hero-side > div:first-child > p {
  max-width: 500px;

  color: #cbd5e1 !important;

  font-size: 15px !important;
  line-height: 1.75 !important;
}


/* Danh sách 3 mục */
.srl-blog-page .srl-blog-side-list {
  gap: 14px !important;
  margin-top: 30px !important;
}


/* Mỗi mục */
.srl-blog-page .srl-blog-side-item {
  position: relative;
  overflow: hidden;

  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) auto !important;
  gap: 14px !important;
  align-items: center !important;

  min-height: 94px;
  padding: 16px !important;

  border: 1px solid rgba(148, 163, 184, 0.17) !important;
  border-radius: 18px !important;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.075),
      rgba(255, 255, 255, 0.035)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 12px 26px rgba(2, 6, 23, 0.13) !important;

  transition:
    transform .24s ease,
    border-color .24s ease,
    background .24s ease !important;
}


/* Thanh màu trái */
.srl-blog-page .srl-blog-side-item::before {
  content: "";
  position: absolute;

  left: 0;
  top: 14px;
  bottom: 14px;

  width: 3px;

  border-radius: 0 999px 999px 0;

  background:
    linear-gradient(
      180deg,
      #60a5fa,
      #8b5cf6
    );
}


/* Mũi tên phải */
.srl-blog-page .srl-blog-side-item::after {
  content: "→";

  display: grid;
  place-items: center;

  width: 30px;
  height: 30px;

  border-radius: 10px;

  color: #93c5fd;
  background: rgba(59, 130, 246, 0.11);

  font-size: 16px;

  transition: transform .24s ease;
}


.srl-blog-page .srl-blog-side-item:hover {
  transform: translateX(5px);

  border-color: rgba(96, 165, 250, 0.34) !important;

  background:
    linear-gradient(
      135deg,
      rgba(59, 130, 246, 0.11),
      rgba(139, 92, 246, 0.06)
    ) !important;
}


.srl-blog-page .srl-blog-side-item:hover::after {
  transform: translateX(3px);
}


/* Số 01 / 02 / 03 */
.srl-blog-page .srl-blog-side-icon {
  width: 48px !important;
  height: 48px !important;

  border: 1px solid rgba(147, 197, 253, 0.16) !important;
  border-radius: 14px !important;

  color: #bfdbfe !important;

  background:
    linear-gradient(
      135deg,
      rgba(37, 99, 235, 0.34),
      rgba(124, 58, 237, 0.24)
    ) !important;

  font-size: 14px !important;
  font-weight: 900 !important;

  box-shadow:
    0 10px 20px rgba(37, 99, 235, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}


/* Nội dung item */
.srl-blog-page .srl-blog-side-item strong {
  color: #ffffff !important;

  font-size: 14px !important;
  line-height: 1.35 !important;
}


.srl-blog-page .srl-blog-side-item small {
  margin-top: 4px !important;

  color: #aebbd0 !important;

  font-size: 12px !important;
  line-height: 1.55 !important;
}


/* Tablet */
@media (max-width: 1024px) {

  .srl-blog-page .srl-blog-hero-main,
  .srl-blog-page .srl-blog-hero-side {
    min-height: auto !important;
  }
}


/* Mobile */
@media (max-width: 760px) {

  .srl-blog-page .srl-blog-hero-main,
  .srl-blog-page .srl-blog-hero-side {
    padding: 28px !important;
    border-radius: 24px !important;
  }

  .srl-blog-page .srl-blog-hero-main h1 {
    font-size: 42px !important;
  }

  .srl-blog-page .srl-blog-hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .srl-blog-page .srl-blog-hero-actions .srl-blog-btn {
    width: 100% !important;
  }

  .srl-blog-page .srl-blog-side-item {
    grid-template-columns: 44px minmax(0, 1fr) !important;
  }

  .srl-blog-page .srl-blog-side-item::after {
    display: none;
  }

  .srl-blog-page .srl-blog-side-icon {
    width: 44px !important;
    height: 44px !important;
  }
}


/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

  .srl-blog-page .srl-blog-hero-actions .srl-blog-btn,
  .srl-blog-page .srl-blog-side-item {
    transition: none !important;
  }
}

/* =========================================================
   BLOG – CONTENT LIBRARY / SEARCH CONTROLS
   ========================================================= */

.srl-blog-page .srl-blog-library,
.srl-blog-page .srl-blog-directory,
.srl-blog-page .srl-blog-controls {
  position: relative;
  overflow: hidden;

  margin-top: 28px !important;
  padding: 30px !important;

  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  border-radius: 28px !important;

  background:
    radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.08), transparent 34%),
    radial-gradient(circle at 0% 100%, rgba(124, 58, 237, 0.05), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;

  box-shadow:
    0 18px 45px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

.srl-blog-page .srl-blog-library::before,
.srl-blog-page .srl-blog-directory::before,
.srl-blog-page .srl-blog-controls::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, #2563eb, #7c3aed, #0ea5e9);
}

/* phần head */
.srl-blog-page .srl-blog-library-head,
.srl-blog-page .srl-blog-directory-head,
.srl-blog-page .srl-blog-controls-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) !important;
  gap: 22px !important;
  align-items: start !important;
  margin-bottom: 22px !important;
}

/* label nhỏ */
.srl-blog-page .srl-blog-library-head .srl-eyebrow,
.srl-blog-page .srl-blog-directory-head .srl-eyebrow,
.srl-blog-page .srl-blog-controls-head .srl-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;

  min-height: 34px !important;
  padding: 0 14px !important;

  border: 1px solid rgba(37, 99, 235, 0.10) !important;
  border-radius: 999px !important;

  color: #2563eb !important;
  background: linear-gradient(180deg, #eef4ff, #e7efff) !important;

  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.srl-blog-page .srl-blog-library-head .srl-eyebrow::before,
.srl-blog-page .srl-blog-directory-head .srl-eyebrow::before,
.srl-blog-page .srl-blog-controls-head .srl-eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3b82f6;
  box-shadow: 0 0 0 5px rgba(59, 130, 246, 0.10);
}

.srl-blog-page .srl-blog-library-head h2,
.srl-blog-page .srl-blog-directory-head h2,
.srl-blog-page .srl-blog-controls-head h2 {
  margin: 14px 0 0 !important;
  color: #0f172a !important;
  font-size: clamp(32px, 3vw, 50px) !important;
  font-weight: 850 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.04em !important;
}

.srl-blog-page .srl-blog-library-head p,
.srl-blog-page .srl-blog-directory-head p,
.srl-blog-page .srl-blog-controls-head p {
  margin: 40px 0 0 !important;
  color: #64748b !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  text-align: right !important;
}

/* search row */
.srl-blog-page .srl-blog-search-row,
.srl-blog-page .srl-blog-directory-search,
.srl-blog-page .srl-blog-controls-search {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 14px !important;
  align-items: center !important;
  margin-bottom: 16px !important;
}

/* input */
.srl-blog-page .srl-blog-search-row input,
.srl-blog-page .srl-blog-directory-search input,
.srl-blog-page .srl-blog-controls-search input,
.srl-blog-page .srl-blog-search-input {
  width: 100% !important;
  min-height: 58px !important;
  padding: 0 18px !important;

  border: 1px solid rgba(148, 163, 184, 0.24) !important;
  border-radius: 18px !important;

  color: #0f172a !important;
  background: #ffffff !important;

  font-size: 17px !important;
  box-shadow:
    inset 0 1px 2px rgba(15, 23, 42, 0.03),
    0 8px 18px rgba(15, 23, 42, 0.05) !important;

  transition:
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.22s ease !important;
}

.srl-blog-page .srl-blog-search-row input::placeholder,
.srl-blog-page .srl-blog-directory-search input::placeholder,
.srl-blog-page .srl-blog-controls-search input::placeholder,
.srl-blog-page .srl-blog-search-input::placeholder {
  color: #94a3b8 !important;
}

.srl-blog-page .srl-blog-search-row input:focus,
.srl-blog-page .srl-blog-directory-search input:focus,
.srl-blog-page .srl-blog-controls-search input:focus,
.srl-blog-page .srl-blog-search-input:focus {
  outline: none !important;
  border-color: #60a5fa !important;
  box-shadow:
    0 0 0 4px rgba(59, 130, 246, 0.10),
    0 14px 28px rgba(37, 99, 235, 0.10) !important;
}

/* nút clear */
.srl-blog-page .srl-blog-clear-btn,
.srl-blog-page .srl-blog-clear-search,
.srl-blog-page .srl-blog-search-row button,
.srl-blog-page .srl-blog-directory-search button,
.srl-blog-page .srl-blog-controls-search button {
  min-width: 150px !important;
  min-height: 58px !important;
  padding: 0 22px !important;

  border: 1px solid rgba(148, 163, 184, 0.25) !important;
  border-radius: 18px !important;

  color: #0f172a !important;
  background:
    linear-gradient(180deg, #ffffff, #f8fafc) !important;

  font-size: 15px !important;
  font-weight: 850 !important;

  box-shadow:
    0 10px 22px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;

  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease !important;
}

.srl-blog-page .srl-blog-clear-btn:hover,
.srl-blog-page .srl-blog-clear-search:hover,
.srl-blog-page .srl-blog-search-row button:hover,
.srl-blog-page .srl-blog-directory-search button:hover,
.srl-blog-page .srl-blog-controls-search button:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(37, 99, 235, 0.28) !important;
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.10) !important;
}

/* chips filter */
.srl-blog-page .srl-blog-filter-row,
.srl-blog-page .srl-blog-filters,
.srl-blog-page .srl-blog-filter-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-top: 8px !important;
}

.srl-blog-page .srl-blog-filter-row button,
.srl-blog-page .srl-blog-filters button,
.srl-blog-page .srl-blog-filter-chips button,
.srl-blog-page .srl-blog-filter-chip {
  position: relative;
  overflow: hidden;

  min-height: 42px !important;
  padding: 0 18px !important;

  border: 1px solid rgba(148, 163, 184, 0.20) !important;
  border-radius: 999px !important;

  color: #334155 !important;
  background:
    linear-gradient(180deg, #ffffff, #f8fafc) !important;

  font-size: 14px !important;
  font-weight: 800 !important;

  box-shadow:
    0 7px 16px rgba(15, 23, 42, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;

  transition:
    transform .22s ease,
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease,
    color .22s ease !important;
}

.srl-blog-page .srl-blog-filter-row button:hover,
.srl-blog-page .srl-blog-filters button:hover,
.srl-blog-page .srl-blog-filter-chips button:hover,
.srl-blog-page .srl-blog-filter-chip:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(59, 130, 246, 0.28) !important;
  color: #2563eb !important;
  box-shadow: 0 12px 22px rgba(37, 99, 235, 0.10) !important;
}

/* chip active */
.srl-blog-page .srl-blog-filter-row button.is-active,
.srl-blog-page .srl-blog-filters button.is-active,
.srl-blog-page .srl-blog-filter-chips button.is-active,
.srl-blog-page .srl-blog-filter-chip.is-active,
.srl-blog-page .srl-blog-filter-row button.active,
.srl-blog-page .srl-blog-filters button.active,
.srl-blog-page .srl-blog-filter-chips button.active,
.srl-blog-page .srl-blog-filter-chip.active {
  border-color: transparent !important;
  color: #ffffff !important;
  background:
    linear-gradient(135deg, #2563eb, #7c3aed) !important;
  box-shadow:
    0 14px 26px rgba(37, 99, 235, 0.24),
    inset 0 1px 0 rgba(255,255,255,0.15) !important;
}

/* responsive */
@media (max-width: 991px) {
  .srl-blog-page .srl-blog-library-head,
  .srl-blog-page .srl-blog-directory-head,
  .srl-blog-page .srl-blog-controls-head {
    grid-template-columns: 1fr !important;
  }

  .srl-blog-page .srl-blog-library-head p,
  .srl-blog-page .srl-blog-directory-head p,
  .srl-blog-page .srl-blog-controls-head p {
    margin-top: 0 !important;
    text-align: left !important;
  }
}

@media (max-width: 767px) {
  .srl-blog-page .srl-blog-library,
  .srl-blog-page .srl-blog-directory,
  .srl-blog-page .srl-blog-controls {
    padding: 22px !important;
    border-radius: 22px !important;
  }

  .srl-blog-page .srl-blog-search-row,
  .srl-blog-page .srl-blog-directory-search,
  .srl-blog-page .srl-blog-controls-search {
    grid-template-columns: 1fr !important;
  }

  .srl-blog-page .srl-blog-clear-btn,
  .srl-blog-page .srl-blog-clear-search,
  .srl-blog-page .srl-blog-search-row button,
  .srl-blog-page .srl-blog-directory-search button,
  .srl-blog-page .srl-blog-controls-search button {
    width: 100% !important;
  }

  .srl-blog-page .srl-blog-library-head h2,
  .srl-blog-page .srl-blog-directory-head h2,
  .srl-blog-page .srl-blog-controls-head h2 {
    font-size: 28px !important;
  }
}

/* =========================================================
   PREMIUM BLOG FEATURED INSIGHTS CARDS
   ========================================================= */

/* Section wrapper */
.srl-blog-page .srl-blog-section:has(.srl-blog-grid) {
  position: relative;
  overflow: hidden;

  padding: 42px !important;

  border: 1px solid rgba(148, 163, 184, 0.20) !important;
  border-radius: 30px !important;

  background:
    radial-gradient(circle at 0% 0%, rgba(37, 99, 235, 0.10), transparent 30%),
    radial-gradient(circle at 100% 100%, rgba(124, 58, 237, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.93)) !important;

  box-shadow:
    0 24px 60px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
}

/* Top gradient */
.srl-blog-page .srl-blog-section:has(.srl-blog-grid)::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;

  background:
    linear-gradient(
      90deg,
      #2563eb,
      #7c3aed,
      #0ea5e9
    );
}

/* Section heading */
.srl-blog-page .srl-blog-section:has(.srl-blog-grid)
.srl-blog-section-head {
  max-width: 820px !important;
  margin-bottom: 32px !important;
}

.srl-blog-page .srl-blog-section:has(.srl-blog-grid)
.srl-blog-section-head h2 {
  margin-top: 18px !important;

  color: #0f172a !important;

  font-size: clamp(36px, 4vw, 54px) !important;
  font-weight: 850 !important;

  line-height: 1.08 !important;
  letter-spacing: -0.048em !important;
}

.srl-blog-page .srl-blog-section:has(.srl-blog-grid)
.srl-blog-section-head p {
  max-width: 760px;

  color: #64748b !important;

  font-size: 15px !important;
  line-height: 1.72 !important;
}

/* Grid */
.srl-blog-page .srl-blog-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

  gap: 22px !important;
  align-items: stretch !important;
}

/* Card */
.srl-blog-page .srl-blog-card {
  position: relative;
  isolation: isolate;

  display: flex !important;
  flex-direction: column !important;

  min-height: 390px !important;
  padding: 27px !important;
  overflow: hidden;

  border: 1px solid rgba(var(--accent-rgb), 0.18) !important;
  border-radius: 25px !important;

  background:
    radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb), .13), transparent 38%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;

  box-shadow:
    0 17px 40px rgba(15, 23, 42, 0.075),
    inset 0 1px 0 rgba(255,255,255,.96) !important;

  transform: translateY(0);

  transition:
    transform .26s ease,
    border-color .26s ease,
    box-shadow .26s ease !important;
}

/* Top color bar */
.srl-blog-page .srl-blog-card::before {
  content: "";
  position: absolute;

  inset: 0 0 auto;

  height: 4px;

  background:
    linear-gradient(
      90deg,
      var(--accent),
      rgba(var(--accent-rgb), .28)
    );
}

/* Decorative rings */
.srl-blog-page .srl-blog-card::after {
  content: "";
  position: absolute;
  z-index: -1;

  width: 155px;
  height: 155px;

  right: -66px;
  top: -66px;

  border-radius: 50%;
  border: 1px solid rgba(var(--accent-rgb), .15);

  box-shadow:
    0 0 0 25px rgba(var(--accent-rgb), .04),
    0 0 0 50px rgba(var(--accent-rgb), .022);

  transition: transform .32s ease;
}

.srl-blog-page .srl-blog-card:hover {
  transform: translateY(-8px) !important;

  border-color: rgba(var(--accent-rgb), .42) !important;

  box-shadow:
    0 26px 58px rgba(15, 23, 42, .12),
    0 11px 25px rgba(var(--accent-rgb), .09) !important;
}

.srl-blog-page .srl-blog-card:hover::after {
  transform: scale(1.08);
}

/* Category badge */
.srl-blog-page .srl-blog-label {
  position: relative;
  z-index: 2;

  display: inline-flex !important;
  align-items: center !important;

  min-height: 33px !important;
  padding: 0 12px !important;

  border: 1px solid rgba(var(--accent-rgb), .15) !important;
  border-radius: 999px !important;

  color: var(--accent) !important;

  background:
    rgba(var(--accent-rgb), .08) !important;

  font-size: 10px !important;
  font-weight: 900 !important;

  letter-spacing: .085em !important;
  text-transform: uppercase !important;
}

.srl-blog-page .srl-blog-label::before {
  content: "";

  width: 7px;
  height: 7px;
  margin-right: 7px;

  border-radius: 50%;

  background: var(--accent);

  box-shadow:
    0 0 0 4px rgba(var(--accent-rgb), .10);
}

/* Meta row */
.srl-blog-page .srl-blog-meta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;

  margin-top: 20px !important;

  color: #64748b !important;

  font-size: 10px !important;
  font-weight: 900 !important;

  letter-spacing: .075em !important;
  text-transform: uppercase !important;
}

.srl-blog-page .srl-blog-meta::before {
  content: "●";

  color: var(--accent);

  font-size: 8px;
  line-height: 1;
}

/* Title */
.srl-blog-page .srl-blog-card h3 {
  margin: 14px 0 12px !important;

  color: #0f172a !important;

  font-size: 24px !important;
  font-weight: 850 !important;

  line-height: 1.25 !important;
  letter-spacing: -.038em !important;
}

/* Description */
.srl-blog-page .srl-blog-card > p {
  margin: 0 0 24px !important;

  color: #64748b !important;

  font-size: 14px !important;
  line-height: 1.72 !important;
}

/* CTA link */
.srl-blog-page .srl-blog-card-link {
  position: relative;
  overflow: hidden;

  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 38px !important;
  gap: 12px !important;
  align-items: center !important;

  min-height: 52px !important;
  margin-top: auto !important;
  padding: 0 8px 0 16px !important;

  border: 1px solid rgba(var(--accent-rgb), .16) !important;
  border-radius: 15px !important;

  color: var(--accent) !important;

  background:
    radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb), .10), transparent 42%),
    linear-gradient(180deg, #ffffff, #f8fafc) !important;

  font-size: 13px !important;
  font-weight: 900 !important;

  box-shadow:
    0 9px 20px rgba(15, 23, 42, .05),
    inset 0 1px 0 rgba(255,255,255,.96) !important;

  transition:
    transform .22s ease,
    color .22s ease,
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease !important;
}

/* Arrow square */
.srl-blog-page .srl-blog-card-link span:last-child {
  display: grid !important;
  place-items: center !important;

  width: 38px !important;
  height: 38px !important;

  border-radius: 12px !important;

  color: var(--accent) !important;

  background:
    rgba(var(--accent-rgb), .09) !important;

  font-size: 17px !important;
  font-weight: 900 !important;

  transition:
    transform .22s ease,
    color .22s ease,
    background .22s ease !important;
}

.srl-blog-page .srl-blog-card-link:hover {
  transform: translateY(-3px) !important;

  color: #ffffff !important;
  border-color: var(--accent) !important;

  background:
    linear-gradient(
      135deg,
      var(--accent),
      rgba(var(--accent-rgb), .78)
    ) !important;

  box-shadow:
    0 15px 28px rgba(var(--accent-rgb), .20) !important;
}

.srl-blog-page .srl-blog-card-link:hover span:last-child {
  transform: translateX(2px);

  color: #ffffff !important;

  background:
    rgba(255,255,255,.15) !important;
}

/* Keep visited links readable */
.srl-blog-page .srl-blog-card-link:visited {
  color: var(--accent) !important;
}

.srl-blog-page .srl-blog-card-link:hover:visited {
  color: #ffffff !important;
}

/* Empty state */
.srl-blog-page .srl-blog-empty {
  margin-top: 22px;
  padding: 32px !important;

  border: 1px dashed rgba(37, 99, 235, 0.30) !important;
  border-radius: 22px !important;

  color: #64748b !important;

  background:
    radial-gradient(circle at 50% 0%, rgba(37,99,235,.07), transparent 45%),
    #ffffff !important;

  font-size: 14px !important;
  font-weight: 700 !important;

  box-shadow:
    0 12px 26px rgba(15,23,42,.05) !important;
}

/* Tablet */
@media (max-width: 1024px) {
  .srl-blog-page .srl-blog-section:has(.srl-blog-grid) {
    padding: 30px !important;
  }

  .srl-blog-page .srl-blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .srl-blog-page .srl-blog-card {
    min-height: 370px !important;
  }
}

/* Mobile */
@media (max-width: 760px) {
  .srl-blog-page .srl-blog-section:has(.srl-blog-grid) {
    padding: 24px 18px !important;
    border-radius: 24px !important;
  }

  .srl-blog-page .srl-blog-grid {
    grid-template-columns: 1fr !important;
  }

  .srl-blog-page .srl-blog-card {
    min-height: auto !important;

    padding: 23px !important;
    border-radius: 21px !important;
  }

  .srl-blog-page .srl-blog-card h3 {
    font-size: 22px !important;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .srl-blog-page .srl-blog-card,
  .srl-blog-page .srl-blog-card::after,
  .srl-blog-page .srl-blog-card-link,
  .srl-blog-page .srl-blog-card-link span:last-child {
    transition: none !important;
  }
}

/* =========================================================
   PREMIUM BLOG RESEARCH PATH + FINAL CTA
   ========================================================= */


/* =========================================================
   RESEARCH PATH SECTION
   ========================================================= */

.srl-blog-page .srl-blog-section:has(.srl-blog-path-grid) {
  position: relative;
  overflow: hidden;

  padding: 42px !important;

  border: 1px solid rgba(148, 163, 184, 0.20) !important;
  border-radius: 30px !important;

  background:
    radial-gradient(circle at 0% 0%, rgba(37, 99, 235, 0.10), transparent 30%),
    radial-gradient(circle at 100% 100%, rgba(124, 58, 237, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.93)) !important;

  box-shadow:
    0 24px 60px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
}


/* Thanh gradient phía trên */
.srl-blog-page .srl-blog-section:has(.srl-blog-path-grid)::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;

  height: 4px;

  background:
    linear-gradient(
      90deg,
      #2563eb,
      #7c3aed,
      #0ea5e9
    );
}


/* Header */
.srl-blog-page .srl-blog-section:has(.srl-blog-path-grid)
.srl-blog-section-head {
  max-width: 900px !important;
  margin-bottom: 32px !important;
}


.srl-blog-page .srl-blog-section:has(.srl-blog-path-grid)
.srl-blog-section-head h2 {
  margin-top: 18px !important;

  color: #0f172a !important;

  font-size: clamp(36px, 4vw, 54px) !important;
  font-weight: 850 !important;

  line-height: 1.08 !important;
  letter-spacing: -0.048em !important;
}


/* Grid */
.srl-blog-page .srl-blog-path-grid {
  position: relative;

  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

  gap: 20px !important;
}


/* Đường nối 3 bước */
.srl-blog-page .srl-blog-path-grid::before {
  content: "";
  position: absolute;

  top: 32px;
  left: 15%;
  right: 15%;

  height: 2px;

  background:
    linear-gradient(
      90deg,
      rgba(37,99,235,.18),
      rgba(124,58,237,.30),
      rgba(14,165,233,.18)
    );

  z-index: 0;
}


/* Card */
.srl-blog-page .srl-blog-path-card {
  --path-accent: #2563eb;
  --path-rgb: 37, 99, 235;

  position: relative;
  z-index: 1;
  isolation: isolate;

  min-height: 270px !important;
  padding: 28px !important;
  overflow: hidden;

  border: 1px solid rgba(var(--path-rgb), 0.18) !important;
  border-radius: 24px !important;

  background:
    radial-gradient(circle at 100% 0%, rgba(var(--path-rgb), 0.13), transparent 38%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;

  box-shadow:
    0 16px 38px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255,255,255,.96) !important;

  transform: translateY(0);

  transition:
    transform .26s ease,
    border-color .26s ease,
    box-shadow .26s ease !important;
}


/* Thanh màu trong card */
.srl-blog-page .srl-blog-path-card::before {
  content: "";
  position: absolute;

  inset: 0 0 auto;

  height: 4px;

  background:
    linear-gradient(
      90deg,
      var(--path-accent),
      rgba(var(--path-rgb), .28)
    );
}


/* Vòng trang trí */
.srl-blog-page .srl-blog-path-card::after {
  content: "";
  position: absolute;
  z-index: -1;

  width: 150px;
  height: 150px;

  right: -65px;
  top: -65px;

  border-radius: 50%;
  border: 1px solid rgba(var(--path-rgb), .16);

  box-shadow:
    0 0 0 24px rgba(var(--path-rgb), .04),
    0 0 0 48px rgba(var(--path-rgb), .022);

  transition: transform .32s ease;
}


.srl-blog-page .srl-blog-path-card:hover {
  transform: translateY(-8px) !important;

  border-color: rgba(var(--path-rgb), .40) !important;

  box-shadow:
    0 25px 58px rgba(15, 23, 42, .12),
    0 10px 24px rgba(var(--path-rgb), .09) !important;
}


.srl-blog-page .srl-blog-path-card:hover::after {
  transform: scale(1.08);
}


/* Số bước */
.srl-blog-page .srl-blog-path-number {
  position: relative;
  z-index: 2;

  display: inline-grid !important;
  place-items: center !important;

  width: 54px !important;
  height: 54px !important;
  margin-bottom: 24px !important;

  border: 6px solid #ffffff !important;
  border-radius: 18px !important;

  color: #ffffff !important;

  background:
    linear-gradient(
      135deg,
      var(--path-accent),
      rgba(var(--path-rgb), .72)
    ) !important;

  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;

  box-shadow:
    0 13px 26px rgba(var(--path-rgb), .24),
    0 0 0 1px rgba(var(--path-rgb), .08) !important;
}


/* Tiêu đề card */
.srl-blog-page .srl-blog-path-card h3 {
  margin: 0 0 13px !important;

  color: #0f172a !important;

  font-size: 23px !important;
  font-weight: 850 !important;

  line-height: 1.28 !important;
  letter-spacing: -.035em !important;
}


/* Nội dung card */
.srl-blog-page .srl-blog-path-card p {
  margin: 0 !important;

  color: #64748b !important;

  font-size: 14px !important;
  line-height: 1.75 !important;
}


/* Dòng nhấn cuối card */
.srl-blog-page .srl-blog-path-card p::after {
  display: block;

  margin-top: 22px;
  padding-top: 16px;

  border-top: 1px solid rgba(148, 163, 184, 0.18);

  color: var(--path-accent);

  font-size: 11px;
  font-weight: 900;

  letter-spacing: .075em;
  text-transform: uppercase;
}


/* Màu riêng từng bước */
.srl-blog-page .srl-blog-path-card:nth-child(1) {
  --path-accent: #2563eb;
  --path-rgb: 37, 99, 235;
}

.srl-blog-page .srl-blog-path-card:nth-child(1) p::after {
  content: "Understand the product first";
}


.srl-blog-page .srl-blog-path-card:nth-child(2) {
  --path-accent: #7c3aed;
  --path-rgb: 124, 58, 237;
}

.srl-blog-page .srl-blog-path-card:nth-child(2) p::after {
  content: "Compare the closest options";
}


.srl-blog-page .srl-blog-path-card:nth-child(3) {
  --path-accent: #0ea5e9;
  --path-rgb: 14, 165, 233;
}

.srl-blog-page .srl-blog-path-card:nth-child(3) p::after {
  content: "Validate with a real workflow";
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.srl-blog-page .srl-blog-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 28px !important;
  align-items: center !important;

  margin-top: 34px !important;
  padding: 44px !important;

  border: 1px solid rgba(96, 165, 250, 0.14) !important;
  border-radius: 28px !important;

  background:
    radial-gradient(circle at 100% 0%, rgba(37,99,235,.24), transparent 32%),
    radial-gradient(circle at 0% 100%, rgba(124,58,237,.18), transparent 34%),
    linear-gradient(135deg, #0f172a 0%, #172033 56%, #1e293b 100%) !important;

  box-shadow:
    0 26px 60px rgba(15, 23, 42, .22),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}


/* Vòng trang trí CTA */
.srl-blog-page .srl-blog-cta::before {
  content: "";
  position: absolute;
  z-index: -1;

  width: 230px;
  height: 230px;

  right: -75px;
  top: -95px;

  border-radius: 50%;
  border: 1px solid rgba(147, 197, 253, 0.13);

  box-shadow:
    0 0 0 30px rgba(37,99,235,.045),
    0 0 0 62px rgba(124,58,237,.025);
}


/* Nội dung CTA */
.srl-blog-page .srl-blog-cta > div {
  position: relative;
  z-index: 2;
}


.srl-blog-page .srl-blog-cta h2 {
  margin: 0 0 12px !important;

  color: #ffffff !important;

  font-size: clamp(30px, 4vw, 46px) !important;
  font-weight: 850 !important;

  line-height: 1.08 !important;
  letter-spacing: -.045em !important;
}


.srl-blog-page .srl-blog-cta p {
  max-width: 700px;

  margin: 0 !important;

  color: #cbd5e1 !important;

  font-size: 15px !important;
  line-height: 1.72 !important;
}


/* Nút CTA */
.srl-blog-page .srl-blog-cta .srl-blog-btn {
  position: relative;
  z-index: 2;
  overflow: hidden;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 56px !important;
  padding: 0 22px !important;

  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 15px !important;

  color: #ffffff !important;

  background:
    radial-gradient(circle at 100% 0%, rgba(255,255,255,.18), transparent 34%),
    linear-gradient(
      135deg,
      #2563eb 0%,
      #3159e8 48%,
      #7c3aed 100%
    ) !important;

  font-size: 13px !important;
  font-weight: 900 !important;

  white-space: nowrap;

  box-shadow:
    0 16px 30px rgba(37, 99, 235, .30),
    inset 0 1px 0 rgba(255,255,255,.16) !important;

  transition:
    transform .22s ease,
    box-shadow .22s ease !important;
}


.srl-blog-page .srl-blog-cta .srl-blog-btn::before {
  content: "▤";

  display: grid;
  place-items: center;

  width: 30px;
  height: 30px;
  margin-right: 10px;

  border-radius: 10px;

  color: #ffffff;
  background: rgba(255,255,255,.14);

  font-size: 14px;
  font-weight: 900;
}


.srl-blog-page .srl-blog-cta .srl-blog-btn::after {
  content: "";
  position: absolute;

  width: 110px;
  height: 150px;

  left: -150px;
  top: -45px;

  transform: rotate(18deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.22),
      transparent
    );

  transition: left .55s ease;
}


.srl-blog-page .srl-blog-cta .srl-blog-btn:hover {
  transform: translateY(-4px) !important;

  box-shadow:
    0 23px 40px rgba(37, 99, 235, .37),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
}


.srl-blog-page .srl-blog-cta .srl-blog-btn:hover::after {
  left: calc(100% + 35px);
}


/* Tablet */
@media (max-width: 1024px) {

  .srl-blog-page .srl-blog-section:has(.srl-blog-path-grid) {
    padding: 30px !important;
  }

  .srl-blog-page .srl-blog-path-grid {
    grid-template-columns: 1fr !important;
  }

  .srl-blog-page .srl-blog-path-grid::before {
    display: none;
  }

  .srl-blog-page .srl-blog-path-card {
    min-height: auto !important;
  }

  .srl-blog-page .srl-blog-cta {
    grid-template-columns: 1fr !important;
  }

  .srl-blog-page .srl-blog-cta .srl-blog-btn {
    width: fit-content !important;
  }
}


/* Mobile */
@media (max-width: 760px) {

  .srl-blog-page .srl-blog-section:has(.srl-blog-path-grid) {
    padding: 24px 18px !important;
    border-radius: 24px !important;
  }

  .srl-blog-page .srl-blog-path-card {
    padding: 23px !important;
    border-radius: 21px !important;
  }

  .srl-blog-page .srl-blog-path-number {
    width: 48px !important;
    height: 48px !important;
    border-radius: 15px !important;
  }

  .srl-blog-page .srl-blog-path-card h3 {
    font-size: 21px !important;
  }

  .srl-blog-page .srl-blog-cta {
    padding: 30px 24px !important;
    border-radius: 24px !important;
  }

  .srl-blog-page .srl-blog-cta .srl-blog-btn {
    width: 100% !important;
  }
}


/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

  .srl-blog-page .srl-blog-path-card,
  .srl-blog-page .srl-blog-path-card::after,
  .srl-blog-page .srl-blog-cta .srl-blog-btn {
    transition: none !important;
  }
}

/* =========================================================
   SMARTREADINGLAB AI — PREMIUM HOME SECTION
========================================================= */

.srl-home-ai{
  position:relative;
  overflow:hidden;
  padding:84px 22px 92px;
  background:
      radial-gradient(
          circle at 15% 25%,
          rgba(80,150,255,.28),
          transparent 32%
      ),
      radial-gradient(
          circle at 85% 75%,
          rgba(55,210,210,.18),
          transparent 30%
      ),
      linear-gradient(
          135deg,
          #081a31 0%,
          #102f55 48%,
          #164f72 100%
      );
}


/* Decorative glow */

.srl-home-ai::before{
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  left:-250px;
  top:-240px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:
      0 0 0 70px rgba(255,255,255,.025),
      0 0 0 140px rgba(255,255,255,.018);
  pointer-events:none;
}

.srl-home-ai::after{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  right:-220px;
  bottom:-230px;
  border-radius:50%;
  background:rgba(60,170,255,.10);
  filter:blur(20px);
  pointer-events:none;
}


/* =========================
 HOME AI HEADING
========================= */

.srl-home-ai-heading{
  position:relative;
  z-index:2;
  max-width:820px;
  margin:0 auto 34px;
  text-align:center;
}

.srl-home-ai-kicker{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  margin-bottom:18px;
  border:1px solid rgba(255,255,255,.20);
  border-radius:999px;
  background:rgba(255,255,255,.10);
  color:#d8ecff;
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}

.srl-home-ai-heading h2{
  margin:0 0 14px;
  color:#ffffff;
  font-size:44px;
  line-height:1.12;
  letter-spacing:-.035em;
  font-weight:850;
}

.srl-home-ai-heading p{
  max-width:650px;
  margin:0 auto;
  color:rgba(234,243,255,.78);
  font-size:17px;
  line-height:1.7;
}


/* =========================
 SHORTCODE WRAPPER
========================= */

.srl-home-ai .srl-ai-finder{
  position:relative;
  z-index:2;
  max-width:980px;
  margin:0 auto;
  padding:0 !important;
  background:transparent !important;
}


/* Full finder hero hidden on Home */

.srl-home-ai .srl-ai-finder-hero{
  display:none !important;
}


/* =========================
 INPUT CARD
========================= */

.srl-home-ai .srl-ai-input-card{
  max-width:920px;
  margin:0 auto;
  padding:30px !important;

  border:1px solid rgba(255,255,255,.72) !important;
  border-radius:26px !important;

  background:
      linear-gradient(
          180deg,
          rgba(255,255,255,.98),
          rgba(246,250,255,.96)
      ) !important;

  box-shadow:
      0 30px 80px rgba(0,0,0,.25),
      0 8px 30px rgba(20,80,150,.16),
      inset 0 1px 0 #ffffff;
}


/* Label */

.srl-home-ai .srl-ai-input-card label{
  display:block;
  margin-bottom:12px;
  color:#0c1e35;
  font-size:20px;
  font-weight:850;
  letter-spacing:-.02em;
}


/* =========================
 TEXTAREA
========================= */

.srl-home-ai #srl-ai-public-input{
  width:100%;
  min-height:150px;
  box-sizing:border-box;

  padding:18px 20px !important;

  border:1.5px solid #cbdaf0 !important;
  border-radius:17px !important;

  background:#ffffff !important;
  color:#172033;

  font-size:16px;
  line-height:1.6;

  box-shadow:
      inset 0 2px 5px rgba(15,35,70,.035);

  transition:
      border-color .2s ease,
      box-shadow .2s ease;
}

.srl-home-ai #srl-ai-public-input:focus{
  outline:none !important;

  border-color:#3d7fd1 !important;

  box-shadow:
      0 0 0 5px rgba(61,127,209,.13),
      inset 0 2px 5px rgba(15,35,70,.025) !important;
}


/* =========================
 EXAMPLE CHIPS
========================= */

.srl-home-ai .srl-ai-examples{
  margin-top:13px;
}

.srl-home-ai .srl-ai-example{
  padding:7px 12px !important;

  border:1px solid #d7e2f1 !important;
  border-radius:999px !important;

  background:#f7faff !important;
  color:#355d8e !important;

  font-size:12px !important;
  font-weight:700 !important;

  transition:.18s ease;
}

.srl-home-ai .srl-ai-example:hover{
  transform:translateY(-1px);
  border-color:#91b6e1 !important;
  background:#eef6ff !important;
}


/* =========================
 MAIN CTA
========================= */

.srl-home-ai #srl-ai-public-submit{
  width:100%;
  min-height:56px;

  margin-top:18px;

  border:0 !important;
  border-radius:15px !important;

  background:
      linear-gradient(
          135deg,
          #286bb8 0%,
          #3989db 100%
      ) !important;

  color:#ffffff !important;

  font-size:16px !important;
  font-weight:850 !important;

  box-shadow:
      0 14px 30px rgba(39,108,184,.28);

  transition:
      transform .18s ease,
      box-shadow .18s ease,
      filter .18s ease;
}

.srl-home-ai #srl-ai-public-submit:hover{
  transform:translateY(-2px);

  box-shadow:
      0 19px 38px rgba(39,108,184,.34);

  filter:brightness(1.04);
}


/* =========================
 TRUST NOTE
========================= */

.srl-home-ai .srl-ai-input-card > p:last-child{
  margin-top:15px;
  color:#8490a3 !important;
  font-size:12px;
}


/* =========================
 RESULTS
========================= */

.srl-home-ai .srl-ai-results{
  max-width:1000px;
  margin:28px auto 0;
}


/* =========================
 MOBILE
========================= */

@media(max-width:700px){

  .srl-home-ai{
      padding:58px 14px 66px;
  }

  .srl-home-ai-heading{
      margin-bottom:24px;
  }

  .srl-home-ai-heading h2{
      font-size:31px;
  }

  .srl-home-ai-heading p{
      font-size:15px;
  }

  .srl-home-ai .srl-ai-input-card{
      padding:20px !important;
      border-radius:20px !important;
  }

  .srl-home-ai #srl-ai-public-input{
      min-height:135px;
  }
}

/* =========================================================
   HOME AI BEAUTY UPGRADE
========================================================= */

.srl-home-ai{
  position:relative;
  padding:72px 20px 84px;
  background:
      radial-gradient(circle at top center, rgba(84,121,255,.10), transparent 34%),
      linear-gradient(180deg, #f7fbff 0%, #ffffff 48%, #f5f8ff 100%);
  overflow:hidden;
}

.srl-home-ai::before,
.srl-home-ai::after{
  content:"";
  position:absolute;
  border-radius:999px;
  pointer-events:none;
  filter:blur(60px);
  opacity:.45;
}

.srl-home-ai::before{
  width:280px;
  height:280px;
  left:-80px;
  top:70px;
  background:rgba(84,121,255,.16);
}

.srl-home-ai::after{
  width:240px;
  height:240px;
  right:-60px;
  bottom:20px;
  background:rgba(76,196,255,.14);
}

.srl-home-ai .srl-wrap,
.srl-home-ai .srl-home-ai-shell{
  position:relative;
  z-index:2;
}

.srl-home-ai .srl-home-ai-shell{
  max-width:980px;
  margin:0 auto;
  padding:18px;
  border:1px solid rgba(197,212,241,.75);
  border-radius:32px;
  background:linear-gradient(180deg, rgba(255,255,255,.88) 0%, rgba(247,250,255,.96) 100%);
  box-shadow:0 28px 80px rgba(31,55,108,.08);
  backdrop-filter:blur(10px);
}

/* Bỏ viền/thẻ gốc của shortcode để dùng shell ngoài */
.srl-home-ai .srl-ai-finder{
  max-width:none !important;
  padding:0 !important;
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* Hero / title */
.srl-home-ai .srl-ai-finder-hero{
  text-align:center;
  max-width:720px;
  margin:0 auto 24px;
}

.srl-home-ai .srl-ai-finder-hero h1,
.srl-home-ai .srl-ai-finder-hero h2{
  margin:0 0 12px;
  font-size:clamp(30px, 4vw, 52px);
  line-height:1.08;
  letter-spacing:-.03em;
  color:#0f172a;
}

.srl-home-ai .srl-ai-finder-hero p{
  max-width:620px;
  margin:0 auto;
  font-size:17px;
  line-height:1.75;
  color:#60708d;
}

/* Card nhập liệu */
.srl-home-ai .srl-ai-input-card{
  margin-top:24px;
  padding:28px;
  border:1px solid #d8e5fb;
  border-radius:26px;
  background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow:0 16px 44px rgba(31,55,108,.08);
}

.srl-home-ai .srl-ai-input-card h3,
.srl-home-ai .srl-ai-input-card label{
  color:#0f172a;
  font-size:24px;
  font-weight:800;
  letter-spacing:-.02em;
}

/* Textarea */
.srl-home-ai textarea,
.srl-home-ai #srl-ai-public-input{
  min-height:150px;
  padding:18px !important;
  border-radius:18px !important;
  border:1.5px solid #cfdbf4 !important;
  background:#fcfdff !important;
  box-shadow:inset 0 1px 2px rgba(15,23,42,.03);
  font-size:16px;
  line-height:1.65;
}

.srl-home-ai textarea:focus,
.srl-home-ai #srl-ai-public-input:focus{
  outline:none;
  border-color:#4a78d3 !important;
  box-shadow:0 0 0 5px rgba(74,120,211,.12) !important;
}

/* Chips ví dụ */
.srl-home-ai .srl-ai-intent-chip,
.srl-home-ai .srl-ai-example-chip,
.srl-home-ai .srl-ai-input-card button[type="button"]{
  border:1px solid #d7e2f7 !important;
  border-radius:999px !important;
  background:#ffffff !important;
  color:#406199 !important;
  font-weight:700 !important;
  box-shadow:0 6px 18px rgba(39,83,152,.06);
}

/* Nút CTA */
.srl-home-ai #srl-ai-analyze-button{
  min-height:56px;
  border:none !important;
  border-radius:18px !important;
  background:linear-gradient(135deg, #3f77c7 0%, #2563eb 100%) !important;
  color:#ffffff !important;
  font-size:18px !important;
  font-weight:800 !important;
  letter-spacing:.01em;
  box-shadow:0 18px 36px rgba(37,99,235,.28);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.srl-home-ai #srl-ai-analyze-button:hover{
  transform:translateY(-1px);
  box-shadow:0 22px 40px rgba(37,99,235,.32);
  filter:brightness(1.02);
}

/* Chữ phụ */
.srl-home-ai small,
.srl-home-ai .srl-ai-note,
.srl-home-ai .srl-ai-helper-text{
  color:#7b89a3 !important;
}

/* Mobile */
@media (max-width: 900px){
  .srl-home-ai{
      padding:56px 16px 64px;
  }

  .srl-home-ai .srl-home-ai-shell{
      padding:14px;
      border-radius:24px;
  }

  .srl-home-ai .srl-ai-finder-hero h1,
  .srl-home-ai .srl-ai-finder-hero h2{
      font-size:34px;
  }

  .srl-home-ai .srl-ai-input-card{
      padding:20px;
      border-radius:22px;
  }
}

/* =========================================================
   SRL HOME AI — FINAL VISUAL OVERRIDE
   Match SmartReadingLab pastel background
========================================================= */

.srl-home-ai{
  position:relative !important;
  overflow:hidden !important;

  padding:78px 20px 86px !important;

  background:
      radial-gradient(
          circle at 14% 25%,
          rgba(92,126,255,.12) 0%,
          rgba(92,126,255,0) 34%
      ),
      radial-gradient(
          circle at 88% 70%,
          rgba(85,203,222,.11) 0%,
          rgba(85,203,222,0) 32%
      ),
      linear-gradient(
          180deg,
          #f4f8ff 0%,
          #fbfcff 46%,
          #f2f8fb 100%
      ) !important;

  border-top:1px solid rgba(193,211,236,.48);
  border-bottom:1px solid rgba(193,211,236,.40);
}


/* soft background decoration */

.srl-home-ai::before{
  content:"" !important;
  position:absolute !important;
  width:420px !important;
  height:420px !important;
  left:-180px !important;
  top:-170px !important;
  border-radius:50% !important;

  background:
      radial-gradient(
          circle,
          rgba(106,116,255,.10),
          rgba(106,116,255,0) 68%
      ) !important;

  border:0 !important;
  box-shadow:none !important;
  filter:none !important;
  pointer-events:none !important;
}


.srl-home-ai::after{
  content:"" !important;
  position:absolute !important;
  width:420px !important;
  height:420px !important;
  right:-180px !important;
  bottom:-190px !important;
  border-radius:50% !important;

  background:
      radial-gradient(
          circle,
          rgba(63,191,213,.10),
          rgba(63,191,213,0) 68%
      ) !important;

  filter:none !important;
  pointer-events:none !important;
}


/* =========================
 HEADING
========================= */

.srl-home-ai-heading{
  position:relative;
  z-index:3;

  max-width:760px;
  margin:0 auto 30px !important;
  text-align:center;
}


.srl-home-ai-kicker{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;

  padding:7px 13px !important;

  border:1px solid #cdddf3 !important;
  border-radius:999px !important;

  background:rgba(255,255,255,.78) !important;

  color:#326baa !important;

  font-size:12px !important;
  font-weight:800 !important;

  box-shadow:
      0 6px 18px rgba(54,92,145,.07) !important;
}


.srl-home-ai-heading h2{
  margin:17px 0 10px !important;

  color:#101828 !important;

  font-size:40px !important;
  line-height:1.13 !important;
  letter-spacing:-.035em !important;
  font-weight:850 !important;
}


.srl-home-ai-heading p{
  max-width:650px;
  margin:0 auto !important;

  color:#62708a !important;

  font-size:16px !important;
  line-height:1.7 !important;
}


/* =========================
 FINDER WRAPPER
========================= */

.srl-home-ai .srl-ai-finder{
  position:relative;
  z-index:3;

  max-width:900px !important;
  margin:0 auto !important;

  padding:0 !important;

  background:transparent !important;
}


/* hide full-page AI hero on homepage */

.srl-home-ai .srl-ai-finder-hero{
  display:none !important;
}


/* =========================
 MAIN FORM CARD
========================= */

.srl-home-ai .srl-ai-input-card{
  max-width:850px !important;
  margin:0 auto !important;

  padding:30px !important;

  border:1px solid rgba(190,208,233,.80) !important;
  border-radius:26px !important;

  background:
      linear-gradient(
          180deg,
          rgba(255,255,255,.94) 0%,
          rgba(250,252,255,.92) 100%
      ) !important;

  box-shadow:
      0 22px 60px rgba(50,72,115,.10),
      0 5px 18px rgba(50,72,115,.045),
      inset 0 1px 0 rgba(255,255,255,1) !important;

  backdrop-filter:blur(10px);
}


/* form title */

.srl-home-ai .srl-ai-input-card label{
  color:#162033 !important;
  font-size:19px !important;
  font-weight:850 !important;
}


/* textarea */

.srl-home-ai #srl-ai-public-input{
  border:1.5px solid #cbd9ed !important;
  border-radius:17px !important;

  background:#ffffff !important;

  color:#1e293b !important;

  box-shadow:
      inset 0 2px 5px rgba(31,50,80,.025) !important;
}


.srl-home-ai #srl-ai-public-input:focus{
  outline:none !important;

  border-color:#568bd0 !important;

  box-shadow:
      0 0 0 5px rgba(86,139,208,.11) !important;
}


/* =========================
 EXAMPLE CHIPS
========================= */

.srl-home-ai .srl-ai-example{
  border:1px solid #d4e0f0 !important;
  background:#ffffff !important;
  color:#456895 !important;

  box-shadow:
      0 4px 12px rgba(47,72,110,.045) !important;
}


.srl-home-ai .srl-ai-example:hover{
  background:#edf5ff !important;
  border-color:#a9c5e7 !important;
}


/* =========================
 PRIMARY BUTTON
========================= */

.srl-home-ai #srl-ai-public-submit{
  min-height:54px !important;

  margin-top:17px !important;

  border:0 !important;
  border-radius:15px !important;

  background:
      linear-gradient(
          135deg,
          #326faf 0%,
          #4e8bd4 100%
      ) !important;

  color:#ffffff !important;

  font-size:15px !important;
  font-weight:850 !important;

  box-shadow:
      0 13px 28px rgba(48,111,176,.22) !important;
}


.srl-home-ai #srl-ai-public-submit:hover{
  transform:translateY(-1px);

  box-shadow:
      0 17px 34px rgba(48,111,176,.27) !important;
}


/* =========================
 MOBILE
========================= */

@media(max-width:700px){

  .srl-home-ai{
      padding:52px 14px 58px !important;
  }

  .srl-home-ai-heading{
      margin-bottom:22px !important;
  }

  .srl-home-ai-heading h2{
      font-size:30px !important;
  }

  .srl-home-ai-heading p{
      font-size:15px !important;
  }

  .srl-home-ai .srl-ai-input-card{
      padding:20px !important;
      border-radius:20px !important;
  }
}

.srl-home-ai{
  border-top:none !important;
  border-bottom:none !important;
}

/* =========================================================
   SRL HOMEPAGE — SEAMLESS SECTION BACKGROUND
========================================================= */

/*
 * Hero + AI Finder + Categories dùng chung một nền.
 * Gradient chạy NGANG nên khi section nối tiếp theo chiều dọc
 * sẽ không xuất hiện đường phân cách.
 */

 .srl-directory-hero,
 .srl-home-ai,
 .srl-popular-categories {
     background:
         linear-gradient(
             90deg,
             #eef4ff 0%,
             #f7f9ff 38%,
             #f8fbff 58%,
             #eef9fa 100%
         ) !important;
 
     border-top:none !important;
     border-bottom:none !important;
 
     box-shadow:none !important;
 }
 
 
 /* Xóa mọi pseudo background cũ gây khác màu */
 
 .srl-home-ai::before,
 .srl-home-ai::after {
     display:none !important;
 }
 
 
 /*
  * Che luôn hairline 1px có thể xuất hiện
  * do browser render giữa các section.
  */
 
 .srl-home-ai {
     margin-top:-1px !important;
     margin-bottom:-1px !important;
 
     border:none !important;
 }
 
 
 /* Categories nối liền với AI */
 
 .srl-popular-categories {
     margin-top:0 !important;
     border:none !important;
 }
 
 
 /* Hero nối liền với AI */
 
 .srl-directory-hero {
     margin-bottom:0 !important;
     border:none !important;
 }

 /* =========================================================
   SRL HOME BACKGROUND MASTER FIX
   ========================================================= */

/* NỀN DUY NHẤT CHO TOÀN HOME */
body.home{
  background:
      radial-gradient(
          900px 620px at 8% 10%,
          rgba(59,130,246,.10),
          transparent 64%
      ),
      radial-gradient(
          900px 650px at 92% 12%,
          rgba(45,212,191,.085),
          transparent 64%
      ),
      radial-gradient(
          1000px 720px at 48% 76%,
          rgba(168,85,247,.055),
          transparent 68%
      ),
      linear-gradient(
          180deg,
          #edf4fb 0%,
          #eef5fb 46%,
          #edf5f8 100%
      ) !important;
}


/* WORDPRESS WRAPPER KHÔNG ĐƯỢC CÓ NỀN RIÊNG */
body.home #page,
body.home #content,
body.home .site-content,
body.home .site-content > .ast-container,
body.home #primary,
body.home .content-area,
body.home .site-main,
body.home .srl-directory-page{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}


/* TẤT CẢ SECTION HOME DÙNG CHUNG NỀN BODY */
body.home .srl-directory-hero,
body.home .srl-home-ai,
body.home .srl-popular-categories,
body.home .srl-directory-body,
body.home .srl-featured-reviews,
body.home .srl-showcase,
body.home .srl-section,
body.home .srl-section-soft{
  background:transparent !important;
  background-color:transparent !important;

  border-top:0 !important;
  border-right:0 !important;
  border-bottom:0 !important;
  border-left:0 !important;

  outline:0 !important;
}


/* TẮT GLOW BỊ CẮT NGANG Ở MÉP SECTION */
body.home .srl-directory-hero::before,
body.home .srl-directory-hero::after,
body.home .srl-home-ai::before,
body.home .srl-home-ai::after,
body.home .srl-popular-categories::before,
body.home .srl-popular-categories::after{
  content:none !important;
  display:none !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
}


/* KHÔNG DÙNG -1PX NỮA */
body.home .srl-directory-hero,
body.home .srl-home-ai,
body.home .srl-popular-categories{
  margin-top:0 !important;
  margin-bottom:0 !important;
}


/* AI CARD VẪN NỔI TRÊN NỀN */
body.home .srl-home-ai .srl-ai-input-card{
  background:rgba(255,255,255,.90) !important;

  border:
      1px solid rgba(180,201,230,.72) !important;

  box-shadow:
      0 22px 60px rgba(43,69,110,.10),
      0 5px 18px rgba(43,69,110,.04),
      inset 0 1px 0 rgba(255,255,255,.96) !important;

  backdrop-filter:blur(12px) !important;
  -webkit-backdrop-filter:blur(12px) !important;
}


/* CHỮ AI */
body.home .srl-home-ai-heading h2{
  color:#101828 !important;
}

body.home .srl-home-ai-heading p{
  color:#62708a !important;
}

body.home .srl-home-ai-kicker{
  background:rgba(255,255,255,.76) !important;
  color:#326baa !important;
  border-color:rgba(82,133,195,.20) !important;
}

.srl-ai-public-error {
  margin-top: 20px;
  padding: 22px;
  border: 1px solid #f1c7c7;
  border-radius: 16px;
  background: #fff7f7;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.srl-ai-error-icon {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fee2e2;
  color: #b42318;
  font-weight: 800;
  font-size: 18px;
}

.srl-ai-error-content {
  flex: 1;
}

.srl-ai-error-content strong {
  display: block;
  margin-bottom: 6px;
  color: #7a271a;
  font-size: 16px;
}

.srl-ai-error-content p {
  margin: 0;
  color: #667085;
  line-height: 1.6;
}

.srl-ai-error-retry {
  margin-top: 14px;
  padding: 9px 16px;
  border: 1px solid #d0d5dd;
  border-radius: 9px;
  background: #fff;
  color: #344054;
  font-weight: 700;
  cursor: pointer;
}

.srl-ai-error-retry:hover {
  background: #f9fafb;
}

/* =========================
   SRL AI - MOBILE FIX
========================= */
@media (max-width: 768px) {

  /* vùng kết quả */
  #srl-ai-public-results,
  .srl-ai-results {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* card kết quả */
  .srl-ai-result-card,
  .srl-ai-product-card,
  .srl-ai-results .srl-ai-card,
  .srl-ai-results > div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* tất cả phần tử con không được ép tràn */
  .srl-ai-result-card *,
  .srl-ai-product-card *,
  #srl-ai-public-results * {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    box-sizing: border-box !important;
  }

  /* header card: rank / tên / score xuống dọc */
  .srl-ai-result-card-header,
  .srl-ai-product-card-header,
  .srl-ai-card-header,
  .srl-ai-result-top,
  .srl-ai-product-top {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  /* score không được đứng ép bên phải */
  .srl-ai-score,
  .srl-ai-match-score,
  .match-score,
  .srl-score {
    align-self: flex-start !important;
    text-align: left !important;
    width: auto !important;
    min-width: 0 !important;
  }

  /* 2 box Best For / Things to Consider xếp dọc */
  .srl-ai-pros-cons,
  .srl-ai-best-for-wrap,
  .srl-ai-bestfit-grid,
  .srl-ai-two-col,
  .srl-ai-result-columns {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* nút CTA xếp dọc trên mobile */
  .srl-ai-actions,
  .srl-ai-card-actions,
  .srl-ai-cta-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .srl-ai-actions a,
  .srl-ai-actions button,
  .srl-ai-card-actions a,
  .srl-ai-card-actions button,
  .srl-ai-cta-group a,
  .srl-ai-cta-group button {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* phần text/card padding nhỏ lại */
  .srl-ai-result-card,
  .srl-ai-product-card {
    padding: 16px !important;
  }

  /* title nhỏ lại cho mobile */
  .srl-ai-result-card h2,
  .srl-ai-result-card h3,
  .srl-ai-product-card h2,
  .srl-ai-product-card h3 {
    font-size: 28px !important;
    line-height: 1.15 !important;
  }
}