/*
Theme Name: Ky Nguyen
Description: This is a child theme for Flatseo Theme
Author: TienCOP
Template: flatsome
Version: 1.0.0
*/
/*************** ADD CUSTOM CSS HERE. ***************/
/* ==========================================================================
DESIGN SYSTEM - BRAND COLOR TOKENS & UTILITIES
========================================================================== */
:root {
/* Brand Primary (Navy Blue) */
--primary-color: #2c3c7a;
--primary-color-dark: #1d2951;
--primary-color-light: #eff6ff;
/* Brand Secondary (Crimson Red) */
--secondary-color: #b61f3d;
--secondary-color-dark: #9c1530;
--secondary-color-light: #fff1f2;
--secondary-color-border: #fed7dd;
/* Neutral & Typography Tokens */
--color-dark: #172b4d;
--color-text: #334155;
--color-muted: #64748b;
--color-light-muted: #94a3b8;
--color-border: #e2e8f0;
--color-border-light: #f1f5f9;
--color-bg-light: #f8fafc;
--color-white: #ffffff;
/* Semantic Status */
--color-success: #10b981;
--color-warning: #f59e0b;
--color-danger: #ef4444;
}
/* Global Brand Utility Classes */
.text-primary, .kn-text-primary, .kn-text-blue { color: var(--primary-color) !important; }
.text-secondary, .kn-text-secondary, .kn-text-red { color: var(--secondary-color) !important; }
.bg-primary, .kn-bg-primary { background-color: var(--primary-color) !important; color: var(--color-white) !important; }
.bg-secondary, .kn-bg-secondary { background-color: var(--secondary-color) !important; color: var(--color-white) !important; }
.border-primary { border-color: var(--primary-color) !important; }
.border-secondary { border-color: var(--secondary-color) !important; }
/* Hover effects for Course Cards */
.kn-course-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.kn-course-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.08);
}
.kn-learn-more-link:hover {
color: #b61f3d;
}
/* Custom Tabs Styling for class .khoahoc */
.khoahoc ul.nav {
border: none !important;
margin-bottom: 30px !important;
}
.khoahoc ul.nav>li {
margin: 5px 8px !important;
}
.khoahoc ul.nav>li>a {
display: inline-block !important;
background: #ffffff !important;
color: #2c3c7a !important;
font-weight: 700 !important;
font-size: 14px !important;
padding: 10px 25px !important;
border-radius: 10px;
border: 1px solid #edf2f7 !important;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
text-transform: none !important;
}
.khoahoc ul.nav>li>a:hover {
color: #b61f3d !important;
border-color: #b61f3d !important;
}
/* Active tab style */
.khoahoc ul.nav>li.active>a,
.khoahoc ul.nav>li.current>a {
background: #2e3267 !important;
/* Deep navy blue background */
color: #ffffff !important;
border-color: #2e3267 !important;
box-shadow: 0 4px 12px rgba(46, 50, 103, 0.25);
}
/* Custom Vertical Tabs Styling for class .lichthi */
.lichthi.tabbed-content {
align-items: flex-start;
}
.lichthi ul.nav {
border: none !important;
display: flex !important;
flex-direction: column;
padding: 0 !important;
margin: 0 !important;
}
.lichthi ul.nav>li,
.lichthi ul.nav>li+li {
margin: 0 0 12px 0 !important;
padding: 0 !important;
list-style: none !important;
border: none !important;
}
.lichthi ul.nav>li:last-child {
margin-bottom: 0 !important;
}
.lichthi ul.nav>li>a {
display: flex !important;
align-items: center;
background: #ffffff !important;
color: #2c3c7a !important;
font-weight: 700 !important;
font-size: 15px !important;
padding: 16px 20px !important;
border-radius: 8px;
border: 1px solid #edf2f7 !important;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
transition: all 0.3s ease;
text-transform: none !important;
text-align: left !important;
}
/* Tab icon settings using mask image to inherit currentColor */
.lichthi ul.nav>li>a::before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
margin-right: 12px;
vertical-align: middle;
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
flex-shrink: 0;
}
.lichthi ul.nav>li:nth-child(1)>a::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
.lichthi ul.nav>li:nth-child(2)>a::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
.lichthi ul.nav>li:nth-child(3)>a::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
.lichthi ul.nav>li:nth-child(4)>a::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
.lichthi ul.nav>li>a:hover {
color: #b61f3d !important;
border-color: #b61f3d !important;
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.05);
}
/* Active vertical tab style matching old colors (Crimson Red) */
.lichthi ul.nav>li.active>a,
.lichthi ul.nav>li.current>a {
background: #b61f3d !important;
color: #ffffff !important;
border-color: #b61f3d !important;
box-shadow: 0 6px 15px rgba(182, 31, 61, 0.25);
}
/* Align tab panels as a premium white card wrapper */
.lichthi .tab-panels {
border: 1px solid #eaedf1 !important;
background: #ffffff !important;
border-radius: 12px;
padding: 0 !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}
/* Synchronized Load More Buttons */
.kn-course-load-more-btn,
.kn-exam-load-more-btn,
.kn-teacher-load-more-btn {
background: transparent;
border: 1px solid #b61f3d;
color: #b61f3d;
padding: 10px 32px;
font-size: 14px;
font-weight: 700;
border-radius: 99px;
text-transform: none;
transition: all 0.3s ease;
display: inline-block;
line-height: 1.5;
min-height: auto;
margin: 0;
box-shadow: none;
text-decoration: none;
cursor: pointer;
}
.kn-course-load-more-btn:hover,
.kn-exam-load-more-btn:hover,
.kn-teacher-load-more-btn:hover {
background: #b61f3d;
color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(176, 30, 56, 0.2);
}
/* Loading state for load more buttons */
.kn-course-load-more-btn.loading,
.kn-exam-load-more-btn.loading,
.kn-teacher-load-more-btn.loading {
background: #f1f5f9;
border-color: #cbd5e1;
color: #94a3b8;
cursor: not-allowed;
pointer-events: none;
transform: none;
box-shadow: none;
}
/* Smooth fade-in animation for load more items */
@keyframes knLoadMoreFadeIn {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.kn-load-more-animate {
animation: knLoadMoreFadeIn 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
}
/* Widen spacing between vertical tabs and content panel */
@media (min-width: 768px) {
.tabbed-content.lichthi>ul.nav {
margin-right: 40px !important;
}
}
/* Mobile responsive optimization for vertical tabs (Converts to horizontal scroll bar) */
@media (max-width: 767px) {
.tabbed-content.lichthi {
display: block !important;
}
.tabbed-content.lichthi>ul.nav {
display: flex !important;
flex-direction: row;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin-right: 0 !important;
margin-bottom: 20px !important;
padding: 5px 0 10px 0 !important;
border-bottom: 1px solid #edf2f7 !important;
scrollbar-width: none;
/* Hide scrollbar Firefox */
}
.tabbed-content.lichthi>ul.nav::-webkit-scrollbar {
display: none !important;
/* Hide scrollbar Chrome/Safari */
}
.tabbed-content.lichthi>ul.nav>li {
width: auto !important;
flex-shrink: 0;
margin-right: 10px !important;
margin-bottom: 0 !important;
}
.tabbed-content.lichthi>ul.nav>li>a {
padding: 10px 18px !important;
font-size: 13px !important;
white-space: nowrap !important;
}
}
/* Teacher Grid Layout Header */
.kn-teacher-row-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 40px;
}
.kn-teacher-header-left {
max-width: 80%;
text-align: left;
}
.kn-teacher-header-left h2 {
color: #2c3c7a !important;
font-weight: 700;
font-size: 28px !important;
margin-bottom: 8px;
}
.kn-teacher-header-left p {
color: #666 !important;
margin: 0;
font-size: 15px !important;
line-height: 1.6;
}
.kn-teacher-see-all {
color: #b61f3d;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
font-size: 15px;
}
.kn-teacher-see-all:hover {
text-decoration: underline;
}
/* Teacher Card Design */
.kn-teacher-card {
background: #ffffff;
border: 1px solid #edf2f7;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
transition: transform 0.3s ease, box-shadow 0.3s ease;
height: 100%;
display: flex;
flex-direction: column;
text-align: left;
}
.kn-teacher-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
}
.kn-teacher-img-wrapper {
width: 100%;
aspect-ratio: 1.1 / 1;
overflow: hidden;
background-color: #f7fafc;
}
.kn-teacher-img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
}
.kn-teacher-info {
padding: 24px 20px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.kn-teacher-info h3 {
color: #2c3c7a;
font-weight: 700;
font-size: 18px;
margin: 0 0 12px 0;
}
.kn-teacher-badges {
display: flex;
gap: 8px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.kn-teacher-badge {
font-size: 11px;
font-weight: 700;
padding: 4px 10px;
border-radius: 4px;
text-transform: uppercase;
display: inline-block;
line-height: 1.2;
}
.kn-teacher-badge.badge-blue {
background: #eff6ff;
color: #2563eb;
}
.kn-teacher-badge.badge-gray {
background: #f1f5f9;
color: #64748b;
}
.kn-teacher-badge.badge-red {
background: #fef2f2;
color: #b61f3d;
}
.kn-teacher-details p {
font-size: 13px;
line-height: 1.6;
margin: 0 0 8px 0;
color: #64748b;
}
.kn-teacher-details p strong {
color: #1e293b;
font-weight: 700;
}
.kn-teacher-details p:last-child {
margin-bottom: 0;
}
@media (max-width: 767px) {
.kn-teacher-row-header {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.kn-teacher-header-left {
max-width: 100%;
}
.kn-teacher-see-all {
align-self: flex-start;
}
}
/* Student Testimonials Premium Layout */
.kn-testimonials-container {
padding: 20px 0;
}
.kn-testimonials-heading {
text-align: center;
margin-bottom: 30px;
}
.kn-testimonials-heading h2 {
color: #2c3c7a;
font-weight: 700;
font-size: 32px;
margin-bottom: 12px;
}
.kn-testimonials-heading p {
color: #4a5568;
font-size: 16px;
max-width: 750px;
margin: 0 auto 24px auto;
line-height: 1.6;
}
/* Rating Badges */
.kn-testimonials-ratings {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 45px;
flex-wrap: wrap;
}
.kn-rating-box {
background: #ffffff;
border-radius: 12px;
padding: 12px 24px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
align-items: center;
min-width: 170px;
border: 1px solid #edf2f7;
position: relative;
}
.kn-rating-top {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin-bottom: 6px;
gap: 15px;
}
.kn-rating-score {
font-size: 16px;
font-weight: 700;
color: #1e293b;
}
.kn-rating-logo {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.kn-rating-logo img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.kn-rating-stars {
font-size: 14px;
margin-bottom: 4px;
letter-spacing: 2px;
}
.kn-rating-stars.stars-google {
color: #f1c40f;
}
.kn-rating-stars.stars-facebook {
color: #3b5998;
}
.kn-rating-label {
font-size: 11px;
color: #64748b;
font-weight: 600;
text-transform: none;
}
/* Student Cards Grid */
.kn-student-card-wrapper {
height: 100%;
background: #2c3c7a;
/* Deep navy card background matching theme main dark blue */
border-radius: 20px;
padding: 24px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
display: flex;
flex-direction: column;
justify-content: space-between;
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.05);
}
.kn-student-card-wrapper:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
/* Poster Image */
.kn-student-poster-img {
width: 100%;
aspect-ratio: 1.1 / 1;
border-radius: 12px;
overflow: hidden;
margin-bottom: 20px;
background: #2c3c7a;
}
.kn-student-poster-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Testimonial Quote */
.kn-student-quote {
color: #f8fafc;
font-size: 14px;
line-height: 1.65;
font-style: italic;
margin-bottom: 24px;
flex-grow: 1;
text-align: left;
opacity: 0.95;
position: relative;
}
/* Testimonial More Link: xuống dòng, underline màu đỏ */
.kn-testimonials-container .kn-testimonial-more-link,
.kn-testimonials-container .kn-testimonial-more-link:link,
.kn-testimonials-container .kn-testimonial-more-link:visited {
display: block !important;
width: fit-content !important;
font-style: normal !important;
font-weight: 600 !important;
font-size: 14px !important;
margin-top: 8px !important;
margin-left: 0 !important;
padding: 0 !important;
background: none !important;
border: none !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
transition: color 0.2s ease, opacity 0.2s ease !important;
white-space: nowrap !important;
line-height: 1.5 !important;
}
.kn-student-card-wrapper .kn-testimonial-more-link,
.kn-student-card-wrapper .kn-testimonial-more-link:link,
.kn-student-card-wrapper .kn-testimonial-more-link:visited {
color: #ff4d4f !important;
}
.kn-student-card-wrapper .kn-testimonial-more-link:hover,
.kn-student-card-wrapper .kn-testimonial-more-link:focus {
color: #ff7875 !important;
opacity: 0.9 !important;
text-decoration: underline !important;
}
.kn-gold-testimonial-card .kn-testimonial-more-link,
.kn-gold-testimonial-card .kn-testimonial-more-link:link,
.kn-gold-testimonial-card .kn-testimonial-more-link:visited {
color: #b61f3d !important;
}
.kn-gold-testimonial-card .kn-testimonial-more-link:hover,
.kn-gold-testimonial-card .kn-testimonial-more-link:focus {
color: #e41a37 !important;
opacity: 0.9 !important;
text-decoration: underline !important;
}
/* Profile Section */
.kn-student-profile {
display: flex;
align-items: center;
gap: 12px;
text-align: left;
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 16px;
}
.kn-student-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
overflow: hidden;
border: 2px solid #ffffff;
flex-shrink: 0;
}
.kn-student-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.kn-student-profile-info {
display: flex;
flex-direction: column;
gap: 4px;
}
.kn-student-name {
color: #ffffff;
font-weight: 700;
font-size: 15px;
margin: 0;
line-height: 1.2;
}
.kn-student-score-badge {
background-color: #00bed2;
/* Sky blue / Teal badge */
color: #ffffff;
font-size: 11px;
font-weight: 700;
padding: 4px 10px;
border-radius: 4px;
display: inline-block;
width: fit-content;
text-transform: none;
line-height: 1.2;
}
/* Custom styling and force display on hover for Testimonials Slider Nav */
.kn-testimonials-container .ux-slider .flickity-prev-next-button {
background-color: rgba(23, 43, 77, 0.9) !important;
/* Theme dark blue background */
color: #ffffff !important;
border: none !important;
width: 40px !important;
height: 40px !important;
border-radius: 50%;
transition: all 0.3s ease;
opacity: 0;
visibility: hidden !important;
}
.kn-testimonials-container .ux-slider:hover .flickity-prev-next-button {
opacity: 1;
visibility: visible !important;
}
.kn-testimonials-container .ux-slider .flickity-prev-next-button:hover {
background-color: #b61f3d !important;
/* Theme crimson red on hover */
color: #ffffff !important;
}
.kn-testimonials-container .ux-slider .flickity-prev-next-button svg {
width: 16px !important;
height: 16px !important;
fill: currentColor !important;
}
/* Ensure the arrows are not clipped by overflow */
.kn-testimonials-container .ux-slider {
padding: 0 15px;
}
/* Featured Box Ratings styling */
.kn-rating-featured-box {
margin: 0 auto;
max-width: 280px;
}
.kn-rating-featured-box .icon-box-img {
margin-right: 15px;
margin-bottom: 0;
}
.kn-rating-featured-box .kn-rating-score {
font-size: 18px;
font-weight: 700;
color: #1e293b;
display: block;
margin-bottom: 4px;
line-height: 1;
}
.kn-rating-featured-box .kn-rating-stars {
font-size: 13px;
margin-bottom: 4px;
letter-spacing: 1px;
}
.kn-rating-featured-box .kn-rating-label {
font-size: 11px;
color: #64748b;
font-weight: 600;
text-transform: none;
margin: 0;
}
/* Why Choose Section Styling */
.kn-why-choose-media-wrapper {
position: relative;
}
.kn-why-choose-media-wrapper .kn-why-choose-badge {
position: absolute;
top: -15px;
right: -15px;
background: #ffffff;
border-radius: 12px;
padding: 10px 18px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
display: flex;
align-items: center;
z-index: 10;
border: 1px solid #f1f5f9;
}
.kn-why-choose-media-wrapper .kn-why-choose-badge .kn-badge-dot {
width: 24px;
height: 24px;
background: #fde8eb;
border-radius: 50%;
margin-right: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
flex-shrink: 0;
}
.kn-why-choose-media-wrapper .kn-why-choose-badge .kn-badge-dot::after {
content: '';
width: 8px;
height: 8px;
background: #b61f3d;
border-radius: 50%;
display: block;
}
.kn-why-choose-media-wrapper .kn-why-choose-badge .kn-badge-content {
display: flex;
flex-direction: column;
line-height: 1.2;
gap: 2px;
}
.kn-why-choose-media-wrapper .kn-why-choose-badge .kn-badge-title {
display: block;
font-size: 13px;
font-weight: 700;
color: #2c3c7a;
margin: 0;
}
.kn-why-choose-media-wrapper .kn-why-choose-badge .kn-badge-subtitle {
display: block;
font-size: 9px;
font-weight: 700;
color: #94a3b8;
letter-spacing: 0.5px;
margin: 0;
}
.kn-why-choose-featured-box {
margin-bottom: 24px;
}
.kn-why-choose-featured-box .icon-box-img {
margin-right: 18px;
margin-bottom: 0;
}
.kn-why-choose-featured-box h3 {
color: #2c3c7a;
font-size: 18px;
font-weight: 700;
margin-bottom: 6px;
text-transform: none;
}
.kn-why-choose-featured-box p {
color: #64748b;
font-size: 14px;
line-height: 1.6;
margin: 0;
}
/* Promo Section & Countdown Styling */
.kn-promo-title {
font-size: 42px;
font-weight: 900;
color: #ffffff;
line-height: 1.2;
margin-bottom: 20px;
}
.kn-promo-title .kn-text-teal {
color: #00bed2;
text-shadow: 0 0 10px rgba(0, 190, 208, 0.4);
}
.kn-promo-desc {
font-size: 15px;
opacity: 0.9;
line-height: 1.6;
margin-bottom: 30px;
}
.kn-countdown-label {
font-size: 11px;
font-weight: 700;
color: #94a3b8;
letter-spacing: 1px;
margin-bottom: 12px;
text-transform: uppercase;
}
/* WPForms Card Styling */
.kn-lead-form-card {
background: #ffffff;
border-radius: 16px;
padding: 35px 30px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
border: 1px solid #f1f5f9;
}
.kn-lead-form-card .wpforms-title {
color: #2c3c7a;
font-size: 24px;
font-weight: 700;
margin-bottom: 8px;
text-align: left;
text-transform: none;
}
.kn-lead-form-card .wpforms-description {
color: #64748b;
font-size: 14px;
margin-bottom: 25px;
line-height: 1.5;
text-align: left;
}
.kn-lead-form-card .wpforms-field-label {
font-size: 11px;
font-weight: 700;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
display: block;
}
.kn-lead-form-card input[type="text"],
.kn-lead-form-card input[type="email"],
.kn-lead-form-card select {
background: #ffffff !important;
border: 1px solid #e2e8f0;
border-radius: 8px;
height: 48px;
padding: 10px 16px;
font-size: 14px !important;
color: #2c3c7a !important;
box-shadow: none;
transition: border-color 0.2s;
width: 100%;
}
.kn-lead-form-card input[type="text"]:focus,
.kn-lead-form-card input[type="email"]:focus,
.kn-lead-form-card select:focus {
border-color: #00bed2 !important;
}
.kn-lead-form-card select {
cursor: pointer;
}
/* Fieldset & Legend Reset for WPForms Radio */
.kn-lead-form-card .wpforms-field-radio fieldset,
#wpforms-363-field_5-container fieldset {
border: none !important;
padding: 0 !important;
margin: 0 !important;
min-width: 0 !important;
width: 100% !important;
}
.kn-lead-form-card .wpforms-field-radio legend.wpforms-field-label,
#wpforms-363-field_5-container legend.wpforms-field-label {
display: block !important;
width: 100% !important;
float: none !important;
padding: 0 !important;
margin: 0 0 10px 0 !important;
border-bottom: none !important;
font-size: 11px !important;
font-weight: 700 !important;
color: #64748b !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
line-height: 1.4 !important;
}
.kn-lead-form-card .wpforms-field-radio ul,
#wpforms-363-field_5-container ul {
display: flex !important;
flex-wrap: wrap !important;
gap: 12px;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
width: 100% !important;
}
.kn-lead-form-card .wpforms-field-radio li,
#wpforms-363-field_5-container ul li {
flex: 1 1 calc(33.333% - 12px) !important;
min-width: 130px !important;
border: 1px solid #e2e8f0 !important;
border-radius: 8px;
padding: 10px 14px !important;
display: flex !important;
align-items: center;
cursor: pointer;
transition: background 0.2s, border-color 0.2s;
margin: 0 !important;
box-sizing: border-box !important;
min-height: 44px !important;
height: auto !important;
}
.kn-lead-form-card .wpforms-field-radio li:hover,
#wpforms-363-field_5-container ul li:hover {
border-color: #b61f3d !important;
background: #fdf2f4 !important;
}
.kn-lead-form-card .wpforms-field-radio li:has(input[type="radio"]:checked),
#wpforms-363-field_5-container ul li:has(input[type="radio"]:checked) {
border-color: #b61f3d !important;
background: rgba(182, 31, 61, 0.04) !important;
}
.kn-lead-form-card .wpforms-field-radio li input[type="radio"],
#wpforms-363-field_5-container ul li input[type="radio"] {
appearance: none !important;
-webkit-appearance: none !important;
width: 18px !important;
height: 18px !important;
border: 2px solid #cbd5e1 !important;
border-radius: 50%;
margin: 0 12px 0 0 !important;
padding: 0 !important;
outline: none !important;
background-color: #ffffff !important;
transition: all 0.2s ease;
cursor: pointer;
flex-shrink: 0;
display: inline-block !important;
box-shadow: none;
}
.kn-lead-form-card .wpforms-field-radio li input[type="radio"]:checked,
#wpforms-363-field_5-container ul li input[type="radio"]:checked {
border-color: #b61f3d !important;
background-color: #b61f3d !important;
box-shadow: inset 0 0 0 3.5px #ffffff !important;
}
.kn-lead-form-card .wpforms-field-radio li label,
#wpforms-363-field_5-container ul li label {
font-size: 13px !important;
font-weight: 600 !important;
color: #475569 !important;
cursor: pointer;
margin: 0 !important;
padding: 0 !important;
display: inline-block !important;
text-transform: none !important;
line-height: 1.35 !important;
white-space: normal !important;
word-break: normal !important;
}
.kn-lead-form-card .kn-form-title {
color: #2c3c7a;
font-size: 24px;
font-weight: 700;
margin-bottom: 8px;
text-align: left;
text-transform: none;
line-height: 1.2;
}
.kn-lead-form-card .kn-form-desc {
color: #64748b;
font-size: 14px;
margin-bottom: 25px;
line-height: 1.5;
text-align: left;
}
.kn-lead-form-card .wpforms-submit-container {
margin-top: 20px;
padding: 0;
}
.kn-lead-form-card button.wpforms-submit {
width: 100% !important;
background: #b61f3d !important;
color: #ffffff !important;
font-size: 16px !important;
font-weight: 700 !important;
border: none !important;
border-radius: 8px;
padding: 14px 20px !important;
cursor: pointer;
box-shadow: 0 4px 15px rgba(176, 30, 56, 0.3);
transition: background 0.2s, transform 0.1s;
}
.kn-lead-form-card button.wpforms-submit:hover {
background: #94182f !important;
}
.kn-lead-form-card button.wpforms-submit:active {
transform: scale(0.98);
}
.kn-form-privacy-note {
text-align: center;
color: #94a3b8;
font-size: 11px;
font-weight: 600;
margin-top: 15px;
margin-bottom: 0;
}
/* Responsive Mobile Stacking for Lead Forms & WPForms Field Radio (<= 768px) */
@media (max-width: 768px) {
.kn-lead-form-card {
padding: 24px 18px !important;
}
.kn-lead-form-card .wpforms-field-radio ul,
.kn-reg-col-right .wpforms-field-radio ul,
.kn-wpforms-wrapper .wpforms-field-radio ul,
.kn-cta-form-card .wpforms-field-radio ul,
#wpforms-363-field_5-container ul,
div.wpforms-container .wpforms-field-radio.wpforms-list-2-columns ul,
div.wpforms-container .wpforms-field-radio ul {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
width: 100% !important;
}
.kn-lead-form-card .wpforms-field-radio li,
.kn-reg-col-right .wpforms-field-radio ul li,
.kn-wpforms-wrapper .wpforms-field-radio li,
.kn-cta-form-card .wpforms-field-radio ul li,
#wpforms-363-field_5-container ul li,
div.wpforms-container .wpforms-field-radio.wpforms-list-2-columns ul li,
div.wpforms-container .wpforms-field-radio ul li {
width: 100% !important;
max-width: 100% !important;
flex: 1 1 100% !important;
min-height: 48px !important;
height: auto !important;
padding: 12px 16px !important;
box-sizing: border-box !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
}
.kn-lead-form-card .wpforms-field-radio li label,
.kn-reg-col-right .wpforms-field-radio ul li label,
.kn-wpforms-wrapper .wpforms-field-radio li label,
.kn-cta-form-card .wpforms-field-radio ul li label,
#wpforms-363-field_5-container ul li label,
div.wpforms-container .wpforms-field-radio ul li label {
font-size: 13.5px !important;
line-height: 1.4 !important;
white-space: normal !important;
word-break: normal !important;
}
.kn-lead-form-card .wpforms-field-radio li input[type="radio"],
.kn-reg-col-right .wpforms-field-radio ul li input[type="radio"],
#wpforms-363-field_5-container ul li input[type="radio"] {
margin: 0 12px 0 0 !important;
flex-shrink: 0 !important;
}
}
/* Premium Blog Posts Grid & Card Styling */
.kn-blog-posts-container {
padding: 20px 0;
}
.kn-blog-card {
display: flex;
flex-direction: column;
height: 100%;
background: transparent;
transition: transform 0.3s ease;
text-align: left;
margin-bottom: 20px;
}
.kn-blog-card:hover {
transform: translateY(-5px);
}
.kn-blog-card-img-wrapper {
position: relative;
width: 100%;
aspect-ratio: 1.6 / 1;
border-radius: 16px;
overflow: hidden;
margin-bottom: 16px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
}
.kn-blog-card-img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.kn-blog-card:hover .kn-blog-card-img-wrapper img {
transform: scale(1.06);
}
/* Badge colors matching mockup */
.kn-blog-badge {
position: absolute;
top: 12px;
left: 12px;
font-size: 11px;
font-weight: 700;
padding: 5px 12px;
border-radius: 6px;
color: #ffffff;
text-transform: none;
letter-spacing: 0.5px;
z-index: 2;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.kn-blog-badge.badge-ielts-tips {
background: #2c3c7a;
/* Navy */
}
.kn-blog-badge.badge-moi-nhat {
background: #b61f3d;
/* Crimson Red */
}
.kn-blog-badge.badge-cau-chuyen {
background: #2563eb;
/* Royal Blue */
}
.kn-blog-badge.badge-vocabulary {
background: #22c55e;
/* Green */
}
/* Info Section */
.kn-blog-card-info {
display: flex;
flex-direction: column;
flex-grow: 1;
padding: 0 4px;
}
.kn-blog-title {
margin: 0 0 10px 0;
font-size: 16px;
font-weight: 700;
line-height: 1.45;
}
.kn-blog-title a {
color: #2c3c7a !important;
text-decoration: none;
transition: color 0.2s ease;
}
.kn-blog-title a:hover {
color: #b61f3d !important;
}
.kn-blog-excerpt {
font-size: 13.5px;
line-height: 1.6;
color: #64748b;
margin: 0 0 16px 0;
flex-grow: 1;
}
/* Card Footer */
.kn-blog-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid #edf2f7;
padding-top: 14px;
margin-top: auto;
}
.kn-blog-date {
font-size: 13px;
color: #94a3b8;
font-weight: 600;
}
.kn-blog-read-more {
font-size: 13px;
color: #2c3c7a;
font-weight: 700;
text-decoration: none;
transition: color 0.2s ease;
}
.kn-blog-read-more:hover {
color: #b61f3d;
}
/* Load More Button for Blog */
.kn-blog-load-more-btn {
background: #b61f3d;
/* Solid red button like mock */
border: 1px solid #b61f3d;
color: #ffffff;
padding: 12px 36px;
font-size: 14px;
font-weight: 700;
border-radius: 6px;
/* Slightly rounded box-like corner to match mock */
text-transform: none;
transition: all 0.3s ease;
display: inline-block;
line-height: 1.5;
min-height: auto;
margin: 0;
box-shadow: 0 4px 15px rgba(176, 30, 56, 0.2);
text-decoration: none;
cursor: pointer;
}
.kn-blog-load-more-btn:hover {
background: #94182f;
border-color: #94182f;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(176, 30, 56, 0.35);
}
.kn-blog-load-more-btn.loading {
background: #f1f5f9;
border-color: #cbd5e1;
color: #94a3b8;
cursor: not-allowed;
pointer-events: none;
transform: none;
box-shadow: none;
}
/* Custom Premium FAQ Accordion */
.kn-faq-accordion {
max-width: 900px;
margin: 0 auto;
}
.kn-faq-accordion .accordion-item {
background: #ffffff;
border-radius: 8px;
margin-bottom: 15px;
border: 1px solid #edf2f7;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
overflow: hidden;
transition: all 0.3s ease;
}
.kn-faq-accordion .accordion-item:hover {
border-color: #cbd5e1;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
}
.kn-faq-accordion .accordion-title {
position: relative;
padding: 20px 55px 20px 24px;
font-size: 15px;
font-weight: 600;
color: #2c3c7a;
border: none;
background: #ffffff;
transition: all 0.2s ease;
text-transform: none;
}
/* Di chuyển nút mũi tên toggle sang bên phải */
.kn-faq-accordion .accordion-title .toggle {
left: auto;
right: 24px;
margin: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.kn-faq-accordion .accordion-title:hover {
color: #b61f3d;
}
.kn-faq-accordion .accordion-title.active {
background: #f8fafc;
color: #b61f3d;
}
.kn-faq-accordion .accordion-inner {
padding: 22px 24px;
font-size: 14px;
line-height: 1.7;
color: #4a5568;
background: #ffffff;
border-top: 1px solid #edf2f7;
}
/* Connecting Timeline for Roadmap */
@media (min-width: 768px) {
.kn-roadmap-row {
position: relative;
}
.kn-roadmap-row::before {
content: '';
position: absolute;
top: 38px;
left: 8%;
right: 8%;
height: 2px;
background: #cbd5e1;
z-index: 1;
}
}
.kn-roadmap-card {
background: #ffffff;
border-radius: 12px;
padding: 24px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
border: 1px solid #edf2f7;
transition: transform 0.3s ease;
position: relative;
z-index: 2;
height: 100%;
}
.kn-roadmap-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}
.kn-roadmap-card .kn-step-number {
width: 36px;
height: 36px;
border-radius: 50%;
margin: 0 auto 16px auto;
line-height: 28px;
font-weight: bold;
font-size: 15px;
border: 4px solid #ffffff;
box-shadow: 0 0 0 1px #cbd5e1;
z-index: 3;
position: relative;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
}
.kn-roadmap-card .kn-step-number.step-blue {
background: #2c3c7a;
}
.kn-roadmap-card .kn-step-number.step-red {
background: #b61f3d;
}
.kn-roadmap-card .kn-step-number.step-green {
background: #2ecc71;
}
/* Why Choose Circular badges */
.kn-bullet-circle {
background: #b61f3d;
color: #ffffff;
border-radius: 50%;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 14px;
flex-shrink: 0;
font-weight: 700;
font-size: 13px;
box-shadow: 0 4px 10px rgba(176, 30, 56, 0.15);
}
/* Why Choose Side-by-side shifted images */
.kn-shifted-img-left {
border-radius: 12px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
}
.kn-shifted-img-right {
border-radius: 12px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
margin-top: 30px;
}
/* Hall of Fame Testimonial Card */
.kn-hall-of-fame-card {
background: #ffffff;
border-radius: 16px;
padding: 35px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
color: #1e293b;
max-width: 950px;
margin: 0 auto;
border: 1px solid #edf2f7;
}
/* Schedule Table Mockup Styling */
.kn-schedule-table {
background: #ffffff;
border-collapse: separate;
border-spacing: 0;
border-radius: 16px;
/* Premium rounded corners */
overflow: hidden;
border: 1px solid #edf2f7;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
}
.kn-schedule-table thead th {
background: #fdfbfb;
/* Soft light gray/white background row */
color: #8c7d77;
/* Grayish brown color for header text */
font-weight: 700;
text-transform: none;
/* No uppercase */
font-size: 14px;
letter-spacing: 0px;
padding: 20px 24px;
border: none;
border-bottom: 1px solid #f1f5f9;
}
.kn-schedule-table tbody td {
padding: 20px 24px;
border-bottom: 1px solid #f8fafc;
vertical-align: middle;
color: #334155;
font-size: 14.5px;
background: #ffffff;
}
.kn-schedule-table tbody tr:last-child td {
border-bottom: none;
}
.kn-schedule-table tbody tr {
transition: background 0.2s ease;
}
.kn-schedule-table tbody tr:hover td {
background-color: #fafbfc;
}
.kn-table-btn-register {
background-color: #b61f3d;
border-color: #b61f3d;
color: #ffffff;
font-weight: 700;
font-size: 13.5px;
padding: 10px 24px;
border-radius: 6px;
text-transform: none;
transition: all 0.3s ease;
display: inline-block;
line-height: 1.5;
min-height: auto;
margin: 0;
box-shadow: none;
text-decoration: none;
text-align: center;
}
.kn-table-btn-register:hover {
background-color: #900c22;
border-color: #900c22;
color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(176, 30, 56, 0.25);
}
/* Premium Lead Form Card */
.kn-lead-form {
background: #ffffff;
border-radius: 16px;
padding: 35px 30px;
box-shadow: 0 15px 45px rgba(0, 0, 0, 0.07);
border: 1px solid #edf2f7;
}
.kn-lead-form h3,
.kn-lead-form .kn-lead-form-title {
font-size: 22px;
font-weight: 700;
color: #2c3c7a;
margin-bottom: 6px;
}
.kn-lead-form p.kn-form-subtitle {
font-size: 13.5px;
color: #64748b;
margin-bottom: 24px;
}
.kn-lead-form label {
font-size: 11px;
font-weight: 700;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.5px;
display: block;
margin-bottom: 6px;
}
.kn-lead-form input[type="text"],
.kn-lead-form input[type="email"],
.kn-lead-form select {
background: #ffffff !important;
border: 1px solid #e2e8f0;
border-radius: 8px;
height: 46px;
padding: 10px 16px;
font-size: 14px !important;
color: #2c3c7a !important;
box-shadow: none;
width: 100%;
margin-bottom: 16px;
transition: border-color 0.2s;
}
.kn-lead-form input[type="text"]:focus,
.kn-lead-form input[type="email"]:focus,
.kn-lead-form select:focus {
border-color: #00bed2 !important;
}
.kn-lead-form select {
cursor: pointer;
}
.kn-lead-form .button.kn-btn-primary {
background: #b61f3d !important;
border-color: #b61f3d !important;
color: #ffffff !important;
font-weight: 700;
font-size: 15px !important;
padding: 14px 20px;
border-radius: 8px;
width: 100%;
text-transform: uppercase !important;
box-shadow: 0 4px 15px rgba(176, 30, 56, 0.2);
transition: all 0.3s ease;
}
.kn-lead-form .button.kn-btn-primary:hover {
background: #94182f !important;
border-color: #94182f !important;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(176, 30, 56, 0.3);
}
/* Rounded Stats Bar at Banner */
.kn-stats-bar-row {
background-color: #00bed2;
border-radius: 15px;
padding: 20px 15px;
margin-top: 30px;
margin-bottom: 10px;
box-shadow: 0 10px 30px rgba(0, 190, 208, 0.1);
}
/* Card details table & star list */
.kn-card-table-row {
display: flex;
justify-content: space-between;
font-size: 13px;
margin-bottom: 8px;
color: #4a5568;
}
.kn-card-table-row span {
color: #64748b;
}
.kn-card-table-row strong {
color: #1e293b;
font-weight: 700;
}
.kn-card-star-list {
list-style: none;
padding: 0;
margin: 15px 0;
border-top: 1px solid #edf2f7;
border-bottom: 1px solid #edf2f7;
padding-top: 15px;
padding-bottom: 15px;
}
.kn-card-star-list li {
font-size: 13px !important;
color: #4a5568 !important;
margin-bottom: 10px;
position: relative !important;
padding-left: 20px !important;
margin-left: 0;
/* Overwrite Flatsome theme list margin */
}
.kn-card-star-list li:last-child {
margin-bottom: 0;
}
.kn-card-star-list li::before {
content: '☆' !important;
position: absolute !important;
left: 0 !important;
color: #b61f3d !important;
font-size: 15px !important;
top: -2px !important;
font-family: sans-serif !important;
}
.kn-card-footer-info {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-top: auto;
margin-bottom: 16px;
width: 100%;
box-sizing: border-box;
}
.kn-card-footer-info p {
display: none !important;
}
.kn-card-footer-info .kn-label {
font-size: 11px !important;
color: #94a3b8 !important;
display: block !important;
margin-bottom: 2px;
}
.kn-card-footer-info .kn-price {
font-size: 20px !important;
color: #b61f3d !important;
font-weight: 700;
margin: 0;
}
.kn-card-footer-info .text-right {
text-align: right;
}
.kn-card-footer-info .kn-date {
font-size: 13px !important;
color: #1e293b !important;
font-weight: 700;
display: block !important;
}
/* Custom CSS for Flatsome Timeline on Service Page */
.timeline-horizontal {
counter-reset: timeline-counter;
}
@media (min-width: 768px) {
.timeline-horizontal {
overflow: visible !important;
flex-wrap: nowrap;
justify-content: space-between;
padding-left: 0 !important;
padding-right: 0 !important;
}
.timeline-horizontal .timeline-item {
flex: 1 1 22% !important;
}
}
.timeline-horizontal::before {
background: linear-gradient(to right, #2c3c7a 0%, #b61f3d 50%, #cbd5e1 100%) !important;
height: 3px !important;
top: 60px !important;
}
.timeline-horizontal .timeline-item::before {
counter-increment: timeline-counter;
content: counter(timeline-counter) !important;
display: flex !important;
align-items: center;
justify-content: center;
color: #ffffff !important;
font-weight: bold !important;
font-size: 14px !important;
text-shadow: none !important;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
width: 36px !important;
height: 36px !important;
top: -38px !important;
border: 4px solid #ffffff !important;
border-radius: 50%;
z-index: 5;
}
.timeline-horizontal .timeline-item:nth-child(4)::before {
color: #475569 !important;
}
.kn-timeline-card {
background: #ffffff;
border-radius: 10px;
padding: 24px 20px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
margin-top: 20px;
text-align: left;
height: 100%;
transition: transform 0.3s ease;
}
.kn-timeline-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}
.kn-timeline-card h3 {
font-size: 20px;
font-weight: 700;
margin-top: 0;
margin-bottom: 6px;
color: #2c3c7a;
}
.kn-timeline-card .kn-timeline-sub {
font-size: 13.5px;
font-weight: 700;
display: block;
margin-bottom: 15px;
}
.kn-timeline-card ul {
list-style: none !important;
padding: 0;
margin: 0;
line-height: 1.65;
}
.kn-timeline-card ul li {
font-size: 13px !important;
color: #4a5568 !important;
margin-bottom: 8px;
position: relative !important;
padding-left: 15px !important;
}
.kn-timeline-card ul li::before {
content: '•' !important;
position: absolute !important;
left: 0 !important;
color: #94a3b8 !important;
font-weight: bold;
}
.kn-timeline-blue {
border: 2px solid #2c3c7a;
}
.kn-timeline-blue .kn-timeline-sub {
color: #2c3c7a;
}
.kn-timeline-red {
border: 2px solid #b61f3d;
}
.kn-timeline-red .kn-timeline-sub {
color: #b61f3d;
}
.kn-timeline-grey {
border: 2px solid #cbd5e1;
}
.kn-timeline-grey h3 {
color: #94a3b8;
}
.kn-timeline-grey .kn-timeline-sub {
color: #94a3b8;
}
.kn-timeline-grey ul li {
color: #94a3b8 !important;
}
/* Custom CSS for Featured Box Cards (Advisory Section) */
.kn-advisory-card {
background: #ffffff;
border: 1px solid #edf2f7;
border-radius: 12px;
padding: 35px 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
transition: transform 0.3s ease, box-shadow 0.3s ease;
height: 100%;
}
.kn-advisory-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
}
/* Custom CSS for Why Choose Us Section */
.kn-why-icon-box {
background: #fdf2f2;
border-radius: 8px;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.kn-shifted-img-left {
margin-top: 0px;
}
.kn-shifted-img-right {
margin-top: 30px;
}
/* Custom CSS for Gold Testimonial Slider Card */
.kn-gold-testimonials {
position: relative;
}
.kn-testimonials-container.kn-gold-testimonials .ux-slider .flickity-prev-next-button {
position: absolute !important;
top: -65px !important;
/* Position it at the top right, vertically aligned with section title! */
width: 36px !important;
height: 36px !important;
border-radius: 50%;
background: #b61f3d !important;
/* Red background */
color: #ffffff !important;
border: none !important;
box-shadow: none;
display: flex !important;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
opacity: 1;
visibility: visible !important;
}
.kn-testimonials-container.kn-gold-testimonials .ux-slider .flickity-prev-next-button:hover {
background: #900c22 !important;
}
/* Left button */
.kn-testimonials-container.kn-gold-testimonials .ux-slider .flickity-prev-next-button.previous {
right: 50px !important;
left: auto !important;
}
/* Right button */
.kn-testimonials-container.kn-gold-testimonials .ux-slider .flickity-prev-next-button.next {
right: 0px !important;
left: auto !important;
}
/* Change the SVG icon inside buttons to white and smaller */
.kn-testimonials-container.kn-gold-testimonials .ux-slider .flickity-prev-next-button svg {
width: 14px !important;
height: 14px !important;
fill: #ffffff !important;
}
.kn-gold-testimonial-card {
background: #ffffff;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
padding: 0;
margin: 15px 0;
border: none;
-webkit-mask-image: -webkit-radial-gradient(white, black);
}
.kn-gold-card-img {
width: 100%;
max-width: 400px;
aspect-ratio: 1 / 1;
height: auto;
padding: 0;
overflow: hidden;
border-radius: 24px 0 0 24px;
}
.kn-gold-card-img img {
width: 100%;
height: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
object-position: center;
display: block;
border-radius: 24px 0 0 24px;
}
.kn-gold-card-content {
padding: 35px 40px;
text-align: left;
}
@media (max-width: 768px) {
.kn-gold-testimonial-card {
padding: 0;
border-radius: 20px;
}
.kn-gold-card-img {
width: 100%;
max-width: 100%;
height: auto;
aspect-ratio: 1 / 1;
padding: 0;
border-radius: 20px 20px 0 0;
}
.kn-gold-card-img img {
border-radius: 20px 20px 0 0;
}
.kn-gold-card-content {
padding: 24px 20px;
}
.kn-testimonials-container.kn-gold-testimonials .ux-slider .flickity-prev-next-button {
top: -55px !important;
}
}
.kn-gold-stars {
color: #b61f3d;
/* Red stars */
font-size: 20px;
margin-bottom: 12px;
line-height: 1;
}
.kn-gold-quote-title {
color: #2c3c7a;
font-weight: 700;
font-size: 22px;
line-height: 1.45;
margin-top: 0;
margin-bottom: 14px;
}
.kn-gold-quote-body {
font-size: 15px;
color: #4a5568;
line-height: 1.65;
font-style: italic;
margin-bottom: 24px;
}
.kn-gold-divider {
border: 0;
border-top: 1px dashed #e2e8f0;
margin-bottom: 15px;
opacity: 1;
}
.kn-gold-student-name {
color: #2c3c7a;
font-weight: 700;
font-size: 19px;
margin-top: 0;
margin-bottom: 6px;
}
.kn-gold-student-school {
font-size: 14px;
color: #b61f3d;
/* Red color for school / score info to match mockup */
font-weight: 600;
margin: 0;
}
/* Custom CSS for Advisory Banner */
.kn-advisory-banner {
background: #00bed2;
border-radius: 16px;
padding: 25px 35px;
box-shadow: 0 10px 25px rgba(0, 190, 208, 0.15);
text-align: left;
width: 100%;
margin-left: 0;
margin-right: 0;
}
.kn-advisory-banner>.col:first-child>.col-inner {
display: flex;
align-items: center;
gap: 20px;
}
.kn-advisory-banner-title {
color: #ffffff;
margin: 0 0 4px 0;
font-weight: 700;
font-size: 20px;
line-height: 1.3;
}
.kn-advisory-banner-desc {
color: #ffffff;
margin: 0;
opacity: 0.95;
font-size: 14.5px;
line-height: 1.4;
}
.kn-advisory-banner-btn {
background: #2c3c7a;
color: #ffffff;
font-weight: 700;
border: none;
border-radius: 8px;
padding: 12px 28px;
margin: 0;
text-transform: none;
font-size: 14.5px;
transition: all 0.3s ease;
display: inline-block;
line-height: 1.5;
min-height: auto;
box-shadow: none;
text-decoration: none;
}
.kn-advisory-banner-btn:hover {
background: #101e36;
color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(23, 43, 77, 0.25);
}
@media (max-width: 768px) {
.kn-advisory-banner {
padding: 24px 20px;
}
.kn-advisory-banner>.col:first-child>.col-inner {
align-items: flex-start;
flex-direction: column;
gap: 15px;
}
.kn-advisory-banner-btn {
width: 100%;
text-align: center;
}
}
/* WPForms UX & Layout Fixes */
.wpforms-container {
width: 100% !important;
margin: 0 auto !important;
}
.wpforms-field-choices {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.wpforms-field-choice {
display: flex !important;
align-items: center;
margin-bottom: 12px !important;
position: relative !important;
}
.wpforms-field-choice input[type="radio"],
.wpforms-field-choice input[type="checkbox"] {
margin: 0 10px 0 0 !important;
padding: 0 !important;
flex-shrink: 0;
cursor: pointer;
width: 18px !important;
height: 18px !important;
position: relative !important;
top: 0 !important;
}
.wpforms-field-choice label {
display: inline-block !important;
margin: 0 !important;
padding: 0 !important;
font-size: 14px !important;
font-weight: 600 !important;
color: #475569 !important;
cursor: pointer;
line-height: 1.4 !important;
}
.wpforms-submit-container button.wpforms-submit {
background-color: #b61f3d !important;
border-color: #b61f3d !important;
color: #ffffff !important;
font-weight: 700 !important;
border-radius: 8px;
padding: 12px 28px !important;
font-size: 15px !important;
transition: all 0.3s ease;
cursor: pointer;
text-transform: none !important;
}
.wpforms-submit-container button.wpforms-submit:hover {
background-color: #92182e !important;
border-color: #92182e !important;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(176, 30, 56, 0.3);
}
/* Course Detail Page Custom Styles */
.kn-badge-pill {
background: #b61f3d;
color: #ffffff;
font-size: 11px;
font-weight: 700;
padding: 6px 16px;
border-radius: 99px;
display: inline-block;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 15px;
}
.kn-course-detail-title {
color: #b61f3d;
font-size: 34px;
font-weight: 700;
line-height: 1.3;
margin-bottom: 20px;
text-transform: none;
margin-top: 0;
}
.kn-course-detail-desc-lead {
font-size: 15.5px;
color: #475569;
line-height: 1.7;
margin-bottom: 15px;
}
.kn-course-detail-desc {
font-size: 15px;
color: #64748b;
line-height: 1.65;
margin-bottom: 25px;
}
.kn-detail-rating-wrapper {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 30px;
}
.kn-detail-avatar-group {
display: flex;
align-items: center;
}
.kn-detail-avatar-group img {
width: 32px;
height: 32px;
border-radius: 50%;
border: 2px solid #ffffff;
object-fit: cover;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.kn-detail-rating-text {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
font-size: 14.5px;
line-height: 1.3;
}
.kn-detail-rating-stars {
color: #b61f3d;
font-weight: 700;
}
.kn-detail-rating-count {
color: #64748b;
}
.kn-detail-grid-card {
background: #f8f9fa;
border-radius: 12px;
padding: 16px 20px;
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 12px;
border: 1px solid #edf2f7;
}
.kn-detail-grid-card .icon,
.kn-detail-grid-icon {
background: #ffffff;
border-radius: 8px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
flex-shrink: 0;
}
.kn-detail-grid-card .icon-box-img {
margin: 0;
}
.kn-detail-grid-card .icon-box-text {
padding: 0;
display: flex;
flex-direction: column;
}
.kn-detail-grid-info {
display: flex;
flex-direction: column;
}
.kn-detail-grid-label {
font-size: 12px;
color: #8c7d77;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 2px;
}
.kn-detail-grid-val {
font-size: 15px;
color: #2c3c7a;
font-weight: 700;
}
.kn-detail-sidebar-col>.col-inner {
background: #ffffff;
border-radius: 16px;
border: 1px solid #edf2f7;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
padding: 24px;
max-width: 360px;
margin-left: auto;
}
@media (max-width: 768px) {
.kn-detail-sidebar-col>.col-inner {
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
}
.kn-detail-video-wrapper {
position: relative;
cursor: pointer;
border-radius: 10px;
overflow: hidden;
margin-bottom: 20px;
}
.kn-detail-video-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #b61f3d;
width: 54px;
height: 54px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 20px rgba(176, 30, 56, 0.4);
transition: all 0.3s ease;
}
.kn-detail-video-wrapper:hover .kn-detail-video-play {
transform: translate(-50%, -50%) scale(1.1);
background: #92182e;
}
.kn-detail-video-play svg {
margin-left: 2px;
}
.kn-detail-sidebar-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
margin-bottom: 12px;
}
.kn-detail-sidebar-title {
font-size: 20px;
font-weight: 700;
color: #2c3c7a;
margin: 0;
}
.kn-detail-sidebar-badge {
background: #fee2e2;
color: #dc2626;
font-size: 11px;
font-weight: 700;
padding: 4px 10px;
border-radius: 6px;
white-space: nowrap;
}
.kn-detail-sidebar-price-row {
display: flex;
flex-direction: column;
margin-bottom: 20px;
}
.kn-detail-sidebar-price-old {
font-size: 13.5px;
color: #94a3b8;
text-decoration: line-through;
margin-bottom: 2px;
}
.kn-detail-sidebar-price-new {
font-size: 26px;
font-weight: 700;
color: #b61f3d;
line-height: 1.2;
}
.kn-detail-flash-sale-box {
background: #f8f9fa;
border: 1px solid #edf2f7;
border-radius: 10px;
padding: 14px 18px;
margin-bottom: 24px;
text-align: left;
}
.kn-detail-flash-sale-title {
color: #b61f3d;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0 0 6px 0;
display: flex;
align-items: center;
gap: 4px;
}
.kn-detail-flash-sale-timer {
color: #2c3c7a;
font-size: 18px;
font-weight: 700;
margin: 0;
}
.kn-detail-sidebar-checklist {
list-style: none;
margin: 0 0 24px 0;
padding: 0;
}
.kn-detail-sidebar-checklist li {
display: flex !important;
align-items: center;
gap: 10px;
margin-bottom: 12px;
font-size: 14px !important;
color: #475569 !important;
font-weight: 500;
line-height: 1.4;
}
.kn-detail-sidebar-checklist li svg {
flex-shrink: 0;
}
.kn-sidebar-btn-red {
background-color: #b61f3d;
border-color: #b61f3d;
color: #ffffff;
font-weight: 700;
text-transform: none;
border-radius: 8px;
transition: all 0.3s ease;
margin-bottom: 10px;
min-height: auto;
padding: 12px 20px;
line-height: 1.5;
}
.kn-sidebar-btn-red:hover {
background-color: #92182e;
border-color: #92182e;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(176, 30, 56, 0.3);
}
.kn-sidebar-btn-blue {
background-color: #2c3c7a;
border-color: #2c3c7a;
color: #ffffff;
font-weight: 700;
text-transform: none;
border-radius: 8px;
transition: all 0.3s ease;
min-height: auto;
padding: 12px 20px;
line-height: 1.5;
}
.kn-sidebar-btn-blue:hover {
background-color: #101e36;
border-color: #101e36;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(23, 43, 77, 0.3);
}
.kn-detail-sidebar-footer {
text-align: center;
font-size: 12px;
color: #94a3b8;
font-style: italic;
margin-top: 15px;
margin-bottom: 0;
}
/* Target Audience Custom Section */
.kn-target-title {
color: #b61f3d;
font-size: 28px;
font-weight: 700;
text-align: center;
margin-bottom: 12px;
text-transform: none;
margin-top: 0;
}
.kn-target-divider {
width: 60px;
height: 3px;
background: #b61f3d;
margin: 0 auto 25px auto;
}
.kn-target-subtitle {
color: #64748b;
font-size: 15.5px;
line-height: 1.75;
text-align: center;
max-width: 800px;
margin: 0 auto 40px auto;
}
.kn-target-card {
background: #ffffff;
border-radius: 12px;
padding: 30px 20px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
border: 1px solid #edf2f7;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
margin-bottom: 25px;
}
.kn-target-card-icon {
width: 44px;
height: 44px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.kn-target-card-text {
font-size: 14.5px;
color: #334155;
line-height: 1.65;
font-weight: 600;
margin-bottom: 0 !important;
}
/* Card variants shadow and icon color */
.kn-target-card.card-navy {
box-shadow: -6px 6px 0px #2c3c7a;
}
.kn-target-card.card-navy .kn-target-card-icon {
background: #2c3c7a;
}
.kn-target-card.card-red {
box-shadow: -6px 6px 0px #b61f3d;
}
.kn-target-card.card-red .kn-target-card-icon {
background: #b61f3d;
}
.kn-target-card.card-cyan {
box-shadow: -6px 6px 0px #00bed2;
}
.kn-target-card.card-cyan .kn-target-card-icon {
background: #00bed2;
}
/* Hover effects */
.kn-target-card:hover {
transform: translate(-3px, 3px);
}
.kn-target-card.card-navy:hover {
box-shadow: -3px 3px 0px #2c3c7a;
}
.kn-target-card.card-red:hover {
box-shadow: -3px 3px 0px #b61f3d;
}
.kn-target-card.card-cyan:hover {
box-shadow: -3px 3px 0px #00bed2;
}
/* Mobile optimization for Target Cards */
@media (max-width: 768px) {
.kn-target-card {
padding: 10px 16px;
min-height: auto;
gap: 12px;
margin-bottom: 16px;
}
}
/* Course Inclusion Cards Section (Using native col & featured_box) */
.kn-include-col {
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.kn-include-col:hover {
transform: translateY(-5px);
border-color: rgba(176, 30, 56, 0.15);
}
.kn-include-col .featured-box {
text-align: left;
margin: 0;
}
.kn-include-col .featured-box-title {
font-size: 17px;
font-weight: 700;
color: #2c3c7a;
margin-bottom: 8px;
text-transform: none;
}
.kn-include-col .kn-include-card-desc {
font-size: 13.5px;
color: #64748b;
line-height: 1.55;
margin: 0;
}
/* Curriculum Detail Accordion & Stats Styles */
.kn-curriculum-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 8px;
flex-wrap: wrap;
gap: 15px;
}
.kn-curriculum-title {
color: #b61f3d;
font-size: 28px;
font-weight: 700;
margin: 0;
text-transform: none;
}
.kn-curriculum-stats {
display: flex;
align-items: center;
gap: 12px;
font-size: 14.5px;
color: #64748b;
font-weight: 400;
margin-left: auto;
}
.kn-curriculum-stats .divider {
color: #cbd5e1;
font-weight: 400;
}
@media (max-width: 768px) {
.kn-curriculum-header {
flex-direction: column;
align-items: flex-start;
}
}
.kn-curriculum-accordion {
border: none;
box-shadow: none;
}
.kn-curriculum-accordion .accordion-item {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 12px;
margin-bottom: 16px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.015);
transition: all 0.3s ease;
}
.kn-curriculum-accordion .accordion-item.active {
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03);
border-color: #cbd5e1;
}
.kn-curriculum-accordion .accordion-title,
.kn-curriculum-accordion a.accordion-title {
padding: 16px 24px;
display: flex;
align-items: center;
position: relative;
background: #ffffff;
border: none;
font-size: 16.5px;
}
/* Adjust the inner title tag container inside Flatsome accordion */
.accordion-title > .mb-0,
.accordion-title > .is-thin {
display: flex !important;
align-items: center;
justify-content: space-between;
width: 100% !important;
flex: 1 1 auto !important;
}
.kn-curriculum-accordion .accordion-title > .mb-0,
.kn-curriculum-accordion .accordion-title > .is-thin,
.kn-curriculum-accordion .accordion-title > h1,
.kn-curriculum-accordion .accordion-title > h2,
.kn-curriculum-accordion .accordion-title > h3,
.kn-curriculum-accordion .accordion-title > h4,
.kn-curriculum-accordion .accordion-title > h5,
.kn-curriculum-accordion .accordion-title > h6,
.kn-curriculum-accordion .accordion-title > *:not(.toggle):not(::before) {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
flex: 1 1 auto;
font-size: 16.5px;
margin: 0;
padding-right: 0;
}
/* Custom left icon container for arrow icon */
.kn-curriculum-accordion .accordion-title::before {
content: "";
width: 36px;
height: 36px;
background: #f1f5f9;
border-radius: 8px;
margin-right: 15px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
transition: all 0.2s ease;
}
.kn-curriculum-accordion .accordion-title.active::before,
.kn-curriculum-accordion .accordion-item.active .accordion-title::before {
background-color: #b61f3d;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'%3E%3C/polyline%3E%3C/svg%3E");
}
.kn-curriculum-accordion .accordion-title .toggle {
display: none !important;
}
.kn-curriculum-accordion .accordion-inner {
padding: 0 24px 24px 75px;
border: none;
}
.kn-acc-duration,
.kn-curriculum-accordion .kn-acc-duration {
font-size: 14.5px;
color: #2c3c7a;
font-weight: 700;
margin-left: auto;
white-space: nowrap;
padding-left: 15px;
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
@media (max-width: 768px) {
body .kn-curriculum-accordion .accordion-item {
margin-bottom: 12px;
border-radius: 10px;
}
body .kn-curriculum-accordion .accordion-title,
body .kn-curriculum-accordion a.accordion-title {
padding: 12px 14px;
font-size: 13.5px !important;
}
body .kn-curriculum-accordion .accordion-title,
body .kn-curriculum-accordion a.accordion-title,
body .kn-curriculum-accordion .accordion-title a,
body .kn-curriculum-accordion .accordion-title span:not(.kn-acc-duration),
body .kn-curriculum-accordion .accordion-title b,
body .kn-curriculum-accordion .accordion-title strong,
body .kn-curriculum-accordion .accordion-title p,
body .kn-curriculum-accordion .accordion-title h1,
body .kn-curriculum-accordion .accordion-title h2,
body .kn-curriculum-accordion .accordion-title h3,
body .kn-curriculum-accordion .accordion-title h4,
body .kn-curriculum-accordion .accordion-title h5,
body .kn-curriculum-accordion .accordion-title h6,
body .kn-curriculum-accordion .accordion-title .h1,
body .kn-curriculum-accordion .accordion-title .h2,
body .kn-curriculum-accordion .accordion-title .h3,
body .kn-curriculum-accordion .accordion-title .h4,
body .kn-curriculum-accordion .accordion-title .h5,
body .kn-curriculum-accordion .accordion-title .h6,
body .kn-curriculum-accordion .accordion-title > .mb-0,
body .kn-curriculum-accordion .accordion-title > .is-thin,
body .kn-curriculum-accordion .accordion-title > *:not(.toggle):not(::before):not(.kn-acc-duration) {
font-size: 13.5px !important;
line-height: 1.35 !important;
gap: 8px;
}
body .kn-curriculum-accordion .accordion-title::before {
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
margin-right: 10px !important;
border-radius: 6px !important;
background-size: 14px !important;
}
body .kn-curriculum-accordion .kn-acc-duration {
font-size: 12px !important;
padding-left: 6px !important;
}
body .kn-curriculum-accordion .accordion-inner {
padding: 0 14px 14px 14px;
}
.kn-lesson-item {
padding: 10px 0;
font-size: 13px;
}
.kn-lesson-title {
font-size: 13px;
padding-right: 10px;
}
.kn-lesson-num {
width: 22px;
font-size: 12px;
}
.kn-lesson-duration {
font-size: 12px;
}
}
/* Lesson Items inside Accordion */
.kn-lesson-list {
display: flex;
flex-direction: column;
gap: 0;
}
.kn-lesson-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px 0;
border-bottom: 1px solid #f1f5f9;
font-size: 14px;
color: #475569;
}
.kn-lesson-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.kn-lesson-num {
width: 28px;
font-weight: 700;
color: #94a3b8;
flex-shrink: 0;
}
.kn-lesson-title {
flex-grow: 1;
font-weight: 500;
color: #334155;
padding-right: 20px;
}
.kn-lesson-duration {
font-size: 13px;
color: #94a3b8;
font-weight: 500;
flex-shrink: 0;
}
.kn-pricing-col h3 {
font-size: 24px;
font-weight: 700;
color: #2c3c7a;
margin-bottom: 5px;
margin-top: 10px;
text-transform: none;
}
.kn-pricing-sub {
font-size: 15px;
font-weight: 700;
color: #b61f3d;
margin-bottom: 15px;
text-transform: none;
}
.kn-pricing-desc {
font-size: 13.5px;
color: #64748b;
line-height: 1.6;
}
.kn-pricing-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: #b61f3d;
color: #ffffff;
font-size: 11px;
font-weight: 700;
padding: 4px 14px;
border-radius: 99px;
letter-spacing: 0.5px;
white-space: nowrap;
z-index: 10;
box-shadow: 0 4px 10px rgba(176, 30, 56, 0.3);
}
/* Button variants override */
.kn-pricing-btn-outline {
border-color: #b61f3d;
color: #b61f3d;
font-weight: 700;
text-transform: none;
transition: all 0.2s ease;
}
.kn-pricing-btn-outline:hover {
background-color: #b61f3d;
color: #ffffff;
border-color: #b61f3d;
}
.kn-pricing-btn-solid {
background-color: #b61f3d;
border-color: #b61f3d;
color: #ffffff;
font-weight: 700;
text-transform: none;
transition: all 0.2s ease;
}
.kn-pricing-btn-solid:hover {
background-color: #92182e;
border-color: #92182e;
transform: translateY(-2px);
}
.kn-pricing-col:not(.card-featured):hover>.col-inner {
transform: translateY(-5px);
border-color: rgba(176, 30, 56, 0.15);
}
.kn-pricing-col.card-featured:hover>.col-inner {
transform: translateY(-8px);
box-shadow: 0 25px 50px rgba(23, 43, 77, 0.2);
}
/* Book Cover Mockup Styles */
.kn-book-cover {
background-color: #f1f5f9;
border-radius: 12px;
height: 280px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.015);
cursor: pointer;
border: 1px solid #e2e8f0;
}
.kn-book-cover:hover {
transform: translateY(-6px);
box-shadow: 0 16px 28px rgba(176, 30, 56, 0.08);
background-color: #e2e8f0;
border-color: rgba(176, 30, 56, 0.15);
}
.kn-book-cover svg {
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.kn-book-cover:hover svg {
transform: scale(1.15);
}
.kn-book-title {
font-size: 16px;
font-weight: 700;
color: #2c3c7a;
margin: 0 0 5px 0;
text-transform: none;
}
.kn-book-desc {
font-size: 13px;
color: #64748b;
margin: 0;
}
/* Why Ky Nguyen Section Custom Styles */
.kn-why-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.kn-why-item {
background: #ffffff;
border: 1px solid #edf2f7;
border-radius: 12px;
padding: 20px 24px;
display: flex;
align-items: center;
gap: 20px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01);
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.kn-why-item:hover {
transform: translateX(6px);
border-color: rgba(176, 30, 56, 0.15);
box-shadow: 0 10px 25px rgba(176, 30, 56, 0.04);
}
.kn-why-num {
font-size: 24px;
font-weight: 700;
color: #b61f3d;
flex-shrink: 0;
line-height: 1;
}
.kn-why-content {
flex-grow: 1;
}
.kn-why-content h3 {
font-size: 15px;
font-weight: 700;
color: #2c3c7a;
margin: 0 0 4px 0;
text-transform: none;
}
.kn-why-content p {
font-size: 13px;
color: #64748b;
margin: 0;
line-height: 1.5;
}
/* Teacher Overlay Card Styling */
.kn-teacher-overlay-card {
text-align: left;
margin-bottom: 25px;
display: block;
text-decoration: none;
}
.kn-teacher-overlay-image {
position: relative;
border-radius: 12px;
overflow: hidden;
padding-top: 120%;
/* portrait aspect ratio */
background: #1e293b;
margin-bottom: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
.kn-teacher-overlay-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.kn-teacher-overlay-card:hover .kn-teacher-overlay-image img {
transform: scale(1.08);
}
/* Gradient overlay for title text legibility */
.kn-teacher-overlay-image::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 60%;
background: linear-gradient(to top, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0) 100%);
z-index: 1;
transition: opacity 0.3s ease;
}
.kn-teacher-overlay-text {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 16px 20px;
z-index: 2;
}
.kn-teacher-overlay-text h1,
.kn-teacher-overlay-text h2,
.kn-teacher-overlay-text h3,
.kn-teacher-overlay-text h4,
.kn-teacher-overlay-text h5,
.kn-teacher-overlay-text h6,
.kn-teacher-overlay-text .kn-teacher-overlay-title {
font-size: 17px;
font-weight: 700;
color: #ffffff;
margin: 0 0 3px 0;
text-transform: none;
line-height: 1.35;
}
.kn-teacher-overlay-badge {
font-size: 13px;
font-weight: 600;
color: #fca5a5;
/* Pastel rose/red */
margin: 0;
}
.kn-teacher-overlay-details {
padding: 0 4px;
}
.kn-teacher-overlay-details p {
font-size: 13.5px;
color: #cbd5e1;
/* Light grey for readability */
line-height: 1.5;
margin: 0 0 4px 0;
}
.kn-teacher-overlay-details p:last-child {
font-weight: 600;
color: #94a3b8;
/* Medium-light grey */
}
/* Adapt for light backgrounds (when not inside a dark section) */
.dark-theme-parent .kn-teacher-overlay-details p,
.dark .kn-teacher-overlay-details p,
[class*="bg-dark"] .kn-teacher-overlay-details p {
color: #cbd5e1 !important;
}
.dark-theme-parent .kn-teacher-overlay-details p:last-child,
.dark .kn-teacher-overlay-details p:last-child,
[class*="bg-dark"] .kn-teacher-overlay-details p:last-child {
color: #94a3b8 !important;
}
/* Light theme parent default overrides */
body:not(.dark-mode) .kn-teacher-overlay-details p {
color: #cbd5e1 !important;
}
body:not(.dark-mode) .kn-teacher-overlay-details p:last-child {
color: #94a3b8 !important;
}
/* Curriculum Teachers Section Header & Nav Buttons */
.kn-teachers-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 40px;
gap: 20px;
}
.kn-teachers-header-left {
flex-grow: 1;
}
.kn-teachers-title {
color: #ffffff;
font-size: 28px;
font-weight: 700;
margin: 0 0 10px 0;
text-transform: none;
text-align: left;
}
.kn-teachers-subtitle {
color: #94a3b8;
font-size: 15px;
line-height: 1.6;
margin: 0;
max-width: 700px;
text-align: left;
}
.kn-teachers-nav {
display: flex;
gap: 10px;
flex-shrink: 0;
margin-bottom: 5px;
}
.kn-teachers-nav button {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.15);
background: transparent !important;
color: #ffffff !important;
display: flex !important;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
font-size: 16px !important;
padding: 0;
line-height: 1;
}
.kn-teachers-nav button:hover {
border-color: #b61f3d !important;
background: #b61f3d !important;
}
@media (max-width: 768px) {
.kn-teachers-header {
flex-direction: column;
align-items: flex-start;
margin-bottom: 25px;
}
.kn-teachers-nav {
display: none !important;
}
}
/* Custom styles for Other Courses cards */
.kn-course-card-col .col-inner {
border-radius: 16px;
overflow: hidden;
border: 1px solid #eef2f6;
background: #ffffff;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
transition: transform 0.3s ease, box-shadow 0.3s ease;
padding: 0;
display: flex;
flex-direction: column;
}
.kn-course-card-col .col-inner:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}
.kn-course-card-img-wrapper {
width: 100%;
height: 190px;
overflow: hidden;
background: #f4f6f8;
}
.kn-course-card-img-wrapper .img-inner {
height: 100%;
}
.kn-course-card-img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.kn-course-card-col .col-inner:hover .kn-course-card-img-wrapper img {
transform: scale(1.05);
}
.kn-course-card-content {
padding: 24px 20px;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.kn-course-card-title {
color: #2c3c7a;
font-weight: 700;
font-size: 18px;
margin: 0 0 10px 0;
line-height: 1.3;
}
.kn-course-card-desc {
color: #64748b;
font-size: 14px;
line-height: 1.6;
margin: 0 0 20px 0;
min-height: 48px;
}
.kn-course-card-link {
color: #b61f3d;
font-weight: 700;
font-size: 14px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
transition: gap 0.2s ease;
}
.kn-course-card-link:hover {
gap: 10px;
color: #900c22;
}
/* Tab bar styles */
.kn-schedule-tabs {
display: flex;
justify-content: center;
gap: 40px;
margin-bottom: 30px;
border-bottom: 1px solid #edf2f7;
padding-bottom: 10px;
}
.kn-tab-item {
font-size: 18px;
font-weight: 700;
color: #94a3b8;
cursor: pointer;
padding: 10px 5px;
position: relative;
transition: color 0.3s ease;
margin: 0;
line-height: 1;
}
.kn-tab-item:hover,
.kn-tab-item.active {
color: #b61f3d;
}
.kn-tab-item::after {
content: '';
position: absolute;
bottom: -11px;
left: 0;
width: 100%;
height: 3px;
background: transparent;
transition: background 0.3s ease;
}
.kn-tab-item.active::after {
background: #b61f3d;
}
/* Filter bar styles */
.kn-schedule-filter-bar {
background: #f8fafc;
border-radius: 12px;
padding: 24px;
margin-bottom: 40px;
border: 1px solid #edf2f7;
}
.kn-filter-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
@media (max-width: 768px) {
.kn-schedule-filter-bar {
padding: 16px 12px;
margin-bottom: 24px;
border-radius: 12px;
transform: none;
}
.kn-filter-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px 8px;
transform: none;
}
.kn-filter-item {
gap: 4px;
transform: none;
}
.kn-filter-item label {
font-size: 11.5px;
margin-bottom: 2px;
}
.kn-filter-item select {
height: 40px;
padding: 0 24px 0 10px;
font-size: 14px !important;
background-position: right 8px center !important;
background-size: 14px !important;
transform: none;
}
}
.kn-filter-item {
display: flex;
flex-direction: column;
gap: 8px;
position: relative;
}
.kn-filter-item label {
font-size: 12px;
font-weight: 700;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.kn-filter-item select {
width: 100%;
height: 44px;
border: 1px solid #e2e8f0;
background-color: #ffffff !important;
border-radius: 8px;
padding: 0 16px;
font-size: 14px !important;
font-weight: 500;
color: #1e293b !important;
appearance: none !important;
-webkit-appearance: none !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 16px center !important;
background-size: 18px !important;
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
transform: none;
}
.kn-filter-item select:focus {
border-color: #b61f3d !important;
box-shadow: 0 0 0 3px rgba(182, 31, 61, 0.1);
outline: none !important;
}
/* Table styles */
.kn-all-schedule-table-wrapper {
background: #ffffff;
border: 1px solid #edf2f7;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
overflow: hidden;
}
.kn-all-schedule-table {
width: 100%;
border-collapse: collapse;
margin: 0;
}
.kn-all-schedule-table th {
background: #2c3c7a;
color: #ffffff;
font-weight: 700;
padding: 18px 20px;
font-size: 14px;
text-transform: none;
letter-spacing: normal;
border: none;
}
.kn-all-schedule-table td {
padding: 20px;
border-bottom: 1px solid #f1f5f9;
color: #475569;
font-size: 14px;
vertical-align: middle;
}
.kn-all-schedule-table tr:last-child td {
border-bottom: none;
}
.kn-all-schedule-table tr:hover td {
background-color: #f8fafc;
}
.kn-col-class-name {
font-weight: 700;
color: #1e293b;
}
.kn-badge-mode {
padding: 6px 14px;
border-radius: 12px;
font-size: 12px;
font-weight: 700;
display: inline-block;
}
.kn-badge-mode.offline {
background-color: #e2e8f0;
color: #64748b;
}
.kn-badge-mode.online {
background-color: #dbeafe;
color: #2563eb;
}
.kn-col-entry-req {
font-weight: 700;
color: #1e293b;
text-align: center;
}
.kn-col-start-date {
font-weight: 700;
color: #b61f3d;
text-align: center;
}
.kn-btn-register-now {
background: #b61f3d;
color: #ffffff;
border: 1px solid #b61f3d;
padding: 10px 22px;
font-size: 13px;
font-weight: 700;
border-radius: 6px;
transition: all 0.3s ease;
display: inline-block;
text-decoration: none;
box-shadow: none;
}
.kn-btn-register-now:hover {
background: #900c22;
border-color: #900c22;
color: #ffffff;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(176, 30, 56, 0.2);
}
/* IELTS Knowledge Hub Styles */
.kn-knowledge-hub-wrapper>.row {
margin-bottom: 10px;
/* Reduce gap under header description */
}
.kn-knowledge-hub-pills {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 0;
margin-bottom: 15px;
/* Reduce gap under sticky pills */
position: -webkit-sticky;
position: sticky;
top: 145px;
/* Sticky right below desktop header */
background: #ffffff;
z-index: 999;
padding: 10px 0;
border-bottom: 1px solid #eef2f6;
}
@media (max-width: 849px) {
.kn-knowledge-hub-pills {
top: 70px !important;
/* Mobile header sticky position */
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding: 10px 15px;
gap: 8px;
margin-bottom: 20px;
scrollbar-width: none;
/* Firefox */
}
.kn-knowledge-hub-pills::-webkit-scrollbar {
display: none;
/* Safari/Chrome */
}
.kn-hub-pill {
flex: 0 0 auto;
}
}
.kn-hub-section {
padding: 30px 0;
/* Reduce spacing between sections */
}
.kn-hub-section:first-of-type {
padding-top: 15px;
/* Reduce spacing for the first section below pills */
}
.kn-hub-pill {
background: #f1f5f9;
color: #333;
padding: 8px 20px;
border-radius: 20px;
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: all 0.2s;
}
.kn-hub-pill:hover {
background: #e2e8f0;
color: #333;
}
.kn-hub-pill.active {
background: #2c3c7a;
color: #ffffff;
font-weight: bold;
}
.kn-hub-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.kn-hub-card:hover {
transform: translateY(-5px);
}
.kn-hub-card:hover .kn-hub-card-image img {
transform: scale(1.06);
}
.kn-hub-card h3 a:hover {
color: #c02444 !important;
}
/* About Us Page Teacher Cards */
.kn-about-teacher-card {
background: #ffffff;
border: 1px solid #eef2f6;
border-radius: 12px;
padding: 18px;
height: 100%;
display: flex;
flex-direction: column;
box-sizing: border-box;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.015);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.kn-about-teacher-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}
.kn-about-teacher-image {
border-radius: 8px;
overflow: hidden;
margin-bottom: 15px;
position: relative;
width: 100%;
padding-top: 85%;
background: #f4f6f8;
flex-shrink: 0;
}
.kn-about-teacher-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.kn-about-teacher-card:hover .kn-about-teacher-image img {
transform: scale(1.05);
}
.kn-about-teacher-info {
flex-grow: 1;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.kn-about-teacher-info .kn-about-teacher-name,
.kn-about-teacher-info h1,
.kn-about-teacher-info h2,
.kn-about-teacher-info h3,
.kn-about-teacher-info h4,
.kn-about-teacher-info h5,
.kn-about-teacher-info h6 {
color: #2c3c7a;
font-size: 17px;
font-weight: 700;
margin: 0 0 6px 0;
font-family: 'Montserrat', sans-serif;
text-transform: none;
line-height: 1.4;
height: 48px;
min-height: 48px;
max-height: 48px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.kn-about-teacher-meta {
color: #b61f3d;
font-size: 13px;
font-weight: 700;
margin: 0 0 10px 0;
line-height: 1.4;
height: 38px;
min-height: 38px;
max-height: 38px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.kn-about-teacher-desc {
color: #666;
font-size: 13px;
line-height: 1.5;
margin: 0;
height: 60px;
min-height: 60px;
max-height: 60px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Custom styling for course cards in About Us page */
.kn-about-course-card {
display: block;
background: #ffffff;
border: 1px solid #eef2f6;
border-radius: 16px;
padding: 35px 30px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
text-decoration: none;
color: inherit;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
height: 100%;
min-height: 180px;
position: relative;
}
.kn-about-course-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
border-color: #dbeafe;
}
.kn-about-course-card-inner {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.kn-about-course-card h3 {
font-size: 24px;
font-weight: 700;
line-height: 1.3;
color: #2c3c7a;
margin: 0 0 30px 0;
font-family: 'Montserrat', sans-serif;
transition: color 0.3s ease;
text-transform: none;
}
.kn-about-course-card:hover h3 {
color: #b61f3d;
}
.kn-about-course-card-arrow {
color: #2c3c7a;
display: flex;
align-items: center;
justify-content: flex-start;
transition: transform 0.3s ease, color 0.3s ease;
}
.kn-about-course-card:hover .kn-about-course-card-arrow {
transform: translateX(6px);
color: #b61f3d;
}
/* Custom styling for CTA buttons in About Us page courses section */
.kn-about-cta-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 18px 30px;
font-size: 16px;
font-weight: 700;
text-decoration: none;
border-radius: 12px;
transition: all 0.3s ease;
text-align: center;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
.kn-about-cta-btn.btn-red {
background-color: #b61f3d;
color: #ffffff;
}
.kn-about-cta-btn.btn-red:hover {
background-color: #921327;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(176, 30, 56, 0.25);
}
.kn-about-cta-btn.btn-blue {
background-color: #273062;
color: #ffffff;
}
.kn-about-cta-btn.btn-blue:hover {
background-color: #1a224a;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(39, 48, 98, 0.25);
}
@media (max-width: 768px) {
.kn-about-cta-btn {
margin-bottom: 12px;
padding: 15px 20px;
font-size: 15px;
}
}
/* Custom styling for tech section in About Us page */
.kn-about-tech-col {
text-align: center;
padding: 20px;
transition: all 0.3s ease;
}
.kn-about-tech-icon-box {
display: inline-flex;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
background-color: #00bed2;
color: #ffffff;
border-radius: 24px;
margin-bottom: 25px;
box-shadow: 0 8px 20px rgba(0, 190, 208, 0.15);
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.kn-about-tech-col:hover .kn-about-tech-icon-box {
transform: translateY(-5px) scale(1.05);
box-shadow: 0 12px 25px rgba(0, 190, 208, 0.3);
background-color: #00a4b5;
}
.kn-about-tech-col h3 {
font-size: 22px;
font-weight: 700;
color: #2c3c7a;
margin-bottom: 12px;
font-family: 'Montserrat', sans-serif;
text-transform: none;
}
.kn-about-tech-col p {
font-size: 14.5px;
color: #555555;
line-height: 1.6;
margin: 0;
max-width: 320px;
margin-left: auto;
margin-right: auto;
}
/* Custom styling for Target Audience section in About Us page */
.kn-about-target-card {
background: #ffffff;
border-radius: 12px;
padding: 30px 25px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
border: 1px solid #f1f5f9;
border-left-width: 5px;
height: 100%;
transition: all 0.3s ease;
}
.kn-about-target-card.border-red {
border-left-color: #b61f3d;
}
.kn-about-target-card.border-navy {
border-left-color: #2c3c7a;
}
.kn-about-target-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}
.kn-about-target-card h3 {
font-size: 20px;
font-weight: 700;
color: #2c3c7a;
margin-bottom: 10px;
font-family: 'Montserrat', sans-serif;
text-transform: none;
}
.kn-about-target-card p {
font-size: 14px;
color: #666666;
line-height: 1.6;
margin: 0;
}
/* Custom styling for USP section in About Us page */
.kn-about-usp-card {
background: #ffffff;
border: 1px solid #fecdd3;
border-radius: 16px;
padding: 30px 25px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
height: 100%;
transition: all 0.3s ease;
}
.kn-about-usp-card:hover {
transform: translateY(-5px);
border-color: #f43f5e;
box-shadow: 0 10px 25px rgba(225, 29, 72, 0.08);
}
.kn-about-usp-badge {
color: #b61f3d;
font-weight: 700;
font-size: 13px;
letter-spacing: 0.5px;
text-transform: uppercase;
margin-bottom: 10px;
display: block;
}
.kn-about-usp-card h3 {
font-size: 19px;
font-weight: 700;
color: #2c3c7a;
margin-bottom: 10px;
font-family: 'Montserrat', sans-serif;
text-transform: none;
line-height: 1.35;
}
.kn-about-usp-card p {
font-size: 13.5px;
color: #666666;
line-height: 1.6;
margin: 0;
}
/* Equal height slider & card support for kn_reviews */
.kn-reviews-container-wrapper .col-inner {
height: 100%;
}
.kn-reviews-container-wrapper .open-lightbox {
display: flex !important;
flex-direction: column !important;
height: 100%;
width: 100%;
text-decoration: none;
color: inherit;
}
.kn-reviews-container-wrapper .kn-review-card,
.kn-reviews-container-wrapper .kn-pink-review-card,
.kn-reviews-container-wrapper .kn-blue-review-card {
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
box-sizing: border-box !important;
width: 100%;
}
.kn-reviews-container-wrapper .kn-pink-review-quote,
.kn-reviews-container-wrapper .kn-blue-review-quote,
.kn-reviews-container-wrapper .kn-review-card-body {
flex-grow: 1;
}
/* Custom Pink Review Cards for Testimonials & Parent Reviews */
.kn-pink-review-card {
background: #fce8ec;
border-radius: 16px;
padding: 24px 22px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.kn-pink-review-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(224, 30, 90, 0.12);
}
.kn-pink-review-stars {
color: #b61f3d;
font-size: 16px;
letter-spacing: 2px;
margin-bottom: 12px;
}
.kn-pink-review-quote {
font-size: 14px;
color: #334155;
font-style: italic;
line-height: 1.6;
margin-bottom: 20px;
flex-grow: 1;
}
.kn-pink-review-author {
font-size: 14.5px;
font-weight: 700;
color: #2c3c7a;
margin: 0;
font-family: 'Montserrat', sans-serif;
}
/* Partner & Press Logo Pill Styling */
.kn-brand-pill {
background: #f1f5f9;
border-radius: 12px;
padding: 18px 12px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
height: 65px;
font-weight: 700;
color: #64748b;
font-size: 15px;
transition: all 0.3s ease;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.03);
}
.kn-brand-pill:hover {
background: #ffffff;
color: #b61f3d;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
transform: translateY(-2px);
}
/* Custom styling for bottom action cards section */
.kn-action-card {
background: #ffffff;
border-radius: 16px;
padding: 40px 25px;
text-align: center;
border: 1px solid #eef2f6;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.kn-action-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
}
.kn-action-card.featured-red {
background-color: #b61f3d;
color: #ffffff;
border-color: #b61f3d;
box-shadow: 0 15px 35px rgba(176, 30, 56, 0.28);
transform: scale(1.03);
}
.kn-action-card.featured-red:hover {
transform: scale(1.05) translateY(-5px);
box-shadow: 0 20px 40px rgba(176, 30, 56, 0.38);
}
.kn-action-card-icon {
width: 60px;
height: 60px;
margin-bottom: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #b61f3d;
}
.kn-action-card.featured-red .kn-action-card-icon {
color: #ffffff;
}
.kn-action-card h2 {
font-size: 22px;
font-weight: 700;
color: #2c3c7a;
margin-bottom: 12px;
font-family: 'Montserrat', sans-serif;
line-height: 1.3;
}
.kn-action-card.featured-red h2 {
color: #ffffff;
}
.kn-action-card p {
font-size: 14px;
color: #666666;
line-height: 1.6;
margin-bottom: 25px;
max-width: 280px;
}
.kn-action-card.featured-red p {
color: rgba(255, 255, 255, 0.95);
}
.kn-action-card-btn {
display: inline-block;
padding: 12px 30px;
border-radius: 8px;
font-weight: 700;
font-size: 15px;
text-decoration: none;
transition: all 0.3s ease;
width: 80%;
}
.kn-action-card-btn.btn-navy {
background-color: #273062;
color: #ffffff;
}
.kn-action-card-btn.btn-navy:hover {
background-color: #1a224a;
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(39, 48, 98, 0.25);
}
.kn-action-card-btn.btn-white {
background-color: #ffffff;
color: #b61f3d;
}
.kn-action-card-btn.btn-white:hover {
background-color: #f8fafc;
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}
/* Custom Teacher Page Feature Cards */
.kn-teacher-feature-card {
background: #ffffff;
border-radius: 16px;
padding: 35px 22px;
text-align: center;
border: 1px solid #f1f5f9;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.kn-teacher-feature-card:hover {
transform: translateY(-5px);
}
.kn-teacher-feature-card.shadow-navy {
box-shadow: 0 10px 25px rgba(23, 43, 77, 0.08);
}
.kn-teacher-feature-card.shadow-navy:hover {
box-shadow: 0 15px 35px rgba(23, 43, 77, 0.18);
}
.kn-teacher-feature-card.shadow-red {
box-shadow: 0 10px 25px rgba(176, 30, 56, 0.08);
}
.kn-teacher-feature-card.shadow-red:hover {
box-shadow: 0 15px 35px rgba(176, 30, 56, 0.18);
}
.kn-teacher-feature-card.shadow-cyan {
box-shadow: 0 10px 25px rgba(0, 190, 208, 0.08);
}
.kn-teacher-feature-card.shadow-cyan:hover {
box-shadow: 0 15px 35px rgba(0, 190, 208, 0.18);
}
.kn-teacher-feature-card.shadow-pink {
box-shadow: 0 10px 25px rgba(244, 114, 182, 0.08);
}
.kn-teacher-feature-card.shadow-pink:hover {
box-shadow: 0 15px 35px rgba(244, 114, 182, 0.18);
}
.kn-teacher-feature-icon-box {
width: 60px;
height: 60px;
border-radius: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 22px;
}
.kn-teacher-feature-card h3 {
font-size: 20px;
font-weight: 700;
color: #2c3c7a;
margin-bottom: 12px;
font-family: 'Montserrat', sans-serif;
text-transform: none;
}
.kn-teacher-feature-card p {
font-size: 14px;
color: #666666;
line-height: 1.6;
margin: 0;
}
/* Teacher Page Card Layout */
.kn-teacher-page-card {
background: #ffffff;
border-radius: 16px;
border: 1px solid #edf2f7;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
overflow: hidden;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.kn-teacher-page-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}
.kn-teacher-card-img-wrapper {
position: relative;
width: 100%;
height: 240px;
background: #f1f5f9;
overflow: hidden;
}
.kn-teacher-card-img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
transition: transform 0.4s ease;
}
.kn-teacher-page-card:hover .kn-teacher-card-img-wrapper img {
transform: scale(1.05);
}
.kn-teacher-card-img-wrapper .kn-teacher-badge-red,
.kn-teacher-badge-red {
position: absolute;
top: 14px;
right: 14px;
background: #b61f3d;
color: #ffffff;
font-size: 11px;
font-weight: 700;
padding: 4px 12px;
border-radius: 12px;
letter-spacing: 0.5px;
box-shadow: 0 4px 10px rgba(182, 31, 61, 0.3);
z-index: 2;
}
.kn-teacher-card-body {
padding: 20px 18px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.kn-teacher-card-title {
font-size: 19px;
font-weight: 700;
color: #2c3c7a;
margin-bottom: 4px;
font-family: 'Montserrat', sans-serif;
}
.kn-teacher-card-role {
font-size: 13px;
font-weight: 700;
color: #b61f3d;
margin-bottom: 15px;
}
.kn-teacher-card-scores {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
margin-bottom: 18px;
}
.kn-score-box {
background: #f8fafc;
border: 1px solid #f1f5f9;
border-radius: 8px;
padding: 6px 2px;
text-align: center;
}
.kn-score-box .score-label {
display: block;
font-size: 9.5px;
color: #94a3b8;
font-weight: 700;
letter-spacing: 0.5px;
}
.kn-score-box .score-val {
display: block;
font-size: 14px;
color: #b61f3d;
font-weight: 700;
}
.kn-teacher-card-bullets {
list-style: none;
padding: 0;
margin: 0 0 20px 0;
flex-grow: 1;
}
.kn-teacher-card-bullets li {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 13px;
color: #64748b;
line-height: 1.5;
margin-bottom: 8px;
}
.kn-teacher-card-bullets li svg {
flex-shrink: 0;
margin-top: 2px;
}
.kn-teacher-card-footer {
margin-top: auto;
}
.kn-teacher-detail-btn {
display: block;
width: 100%;
text-align: center;
background: #273062;
color: #ffffff;
font-weight: 700;
font-size: 14px;
padding: 10px 16px;
border-radius: 8px;
text-decoration: none;
transition: all 0.3s ease;
}
.kn-teacher-detail-btn:hover {
background: #1a224a;
box-shadow: 0 4px 15px rgba(39, 48, 98, 0.25);
transform: translateY(-2px);
}
/* Teacher Card Page - Equal Height Columns & Bottom-aligned Detail Button (PC vs Mobile) */
@media (min-width: 768px) {
.kn-teachers-card-page .row,
.kn-teachers-wrapper .row:has(.kn-teacher-page-card) {
display: flex;
flex-wrap: wrap;
}
.kn-teachers-card-page .col,
.col.kn-teacher-page-col,
.kn-teachers-wrapper .col:has(.kn-teacher-page-card) {
display: flex !important;
flex-direction: column !important;
}
.kn-teachers-card-page .col.kn-hide-col,
.col.kn-teacher-page-col.kn-hide-col {
display: none !important;
}
.kn-teachers-card-page .col > .col-inner,
.col.kn-teacher-page-col > .col-inner,
.kn-teachers-wrapper .col:has(.kn-teacher-page-card) > .col-inner {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
height: 100% !important;
width: 100%;
}
.kn-teachers-card-page .kn-teacher-page-card,
.col.kn-teacher-page-col .kn-teacher-page-card,
.kn-teacher-page-card {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
height: 100% !important;
width: 100%;
justify-content: flex-start !important;
}
.kn-teacher-card-img-wrapper {
flex-shrink: 0;
}
.kn-teacher-card-body {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
height: auto;
}
.kn-teacher-card-bullets {
flex-grow: 1 !important;
margin-bottom: 20px;
}
.kn-teacher-card-footer {
margin-top: auto !important;
width: 100%;
}
}
@media (max-width: 767.98px) {
.kn-teachers-card-page .col,
.col.kn-teacher-page-col {
display: block !important;
}
.kn-teachers-card-page .col.kn-hide-col,
.col.kn-teacher-page-col.kn-hide-col {
display: none !important;
}
.kn-teachers-card-page .col > .col-inner,
.col.kn-teacher-page-col > .col-inner {
display: block !important;
height: auto !important;
flex: none !important;
}
.kn-teachers-card-page .kn-teacher-page-card,
.col.kn-teacher-page-col .kn-teacher-page-card,
.kn-teacher-page-card {
height: auto !important;
flex: none !important;
}
.kn-teacher-card-body {
flex: none !important;
height: auto;
}
.kn-teacher-card-bullets {
flex-grow: 0 !important;
margin-bottom: 16px;
}
.kn-teacher-card-footer {
margin-top: 0 !important;
width: 100%;
}
}
/* Sidebar Filter Styling */
.kn-teacher-sidebar {
background: #ffffff;
border-radius: 16px;
border: 1px solid #edf2f7;
padding: 24px 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}
.kn-teacher-sidebar-title {
font-size: 20px;
font-weight: 700;
color: #b61f3d;
margin-bottom: 2px;
font-family: 'Montserrat', sans-serif;
}
.kn-teacher-sidebar-subtitle {
font-size: 12px;
color: #94a3b8;
margin-bottom: 20px;
}
.kn-sidebar-nav {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 25px;
}
.kn-sidebar-nav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border-radius: 10px;
font-size: 14px;
font-weight: 700;
color: #475569;
text-decoration: none;
background: transparent;
transition: all 0.2s ease;
}
.kn-sidebar-nav-item:hover {
background: #f8fafc;
color: #2c3c7a;
}
.kn-sidebar-nav-item.active {
background: #b61f3d;
color: #ffffff;
}
.kn-sidebar-cta-btn {
display: block;
width: 100%;
text-align: center;
background: #b61f3d;
color: #ffffff;
font-size: 14px;
font-weight: 700;
padding: 12px;
border-radius: 8px;
text-decoration: none;
transition: all 0.3s ease;
}
.kn-sidebar-cta-btn:hover {
background: #90162c;
box-shadow: 0 6px 20px rgba(176, 30, 56, 0.25);
}
.kn-sidebar-nav-item svg {
flex-shrink: 0;
width: 18px;
height: 18px;
color: inherit;
transition: color 0.2s ease;
}
/* Custom Select Dropdowns for Teacher Filters */
.kn-teacher-filters-row {
display: flex;
gap: 15px;
justify-content: flex-end;
margin-bottom: 25px;
flex-wrap: wrap;
}
.kn-teacher-filter-select-wrapper {
position: relative;
display: inline-block;
}
.kn-teacher-filter-select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-color: #ffffff;
border: 1px solid #edf2f7;
border-radius: 8px;
padding: 0 40px 0 38px;
height: 42px;
font-size: 14px;
font-weight: 700;
color: #475569;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
min-width: 200px;
line-height: 40px;
font-family: inherit;
}
.kn-teacher-filter-select:hover {
border-color: #cbd5e1;
color: #2c3c7a;
background-color: #f8fafc;
}
.kn-teacher-filter-select:focus {
outline: none;
border-color: #b61f3d;
box-shadow: 0 0 0 3px rgba(176, 30, 56, 0.1);
background-color: #ffffff;
}
/* Icon placement (left side filter icon, right side dropdown chevron) */
.kn-teacher-filter-select-wrapper::before {
content: "";
position: absolute;
left: 14px;
top: 20px;
transform: translateY(-50%);
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='21' x2='4' y2='14'%3E%3C/line%3E%3Cline x1='4' y1='10' x2='4' y2='3'%3E%3C/line%3E%3Cline x1='12' y1='21' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12' y2='3'%3E%3C/line%3E%3Cline x1='20' y1='21' x2='20' y2='16'%3E%3C/line%3E%3Cline x1='20' y1='12' x2='20' y2='3'%3E%3C/line%3E%3Cline x1='1' y1='14' x2='7' y2='14'%3E%3C/line%3E%3Cline x1='9' y1='8' x2='15' y2='8'%3E%3C/line%3E%3Cline x1='17' y1='16' x2='23' y2='16'%3E%3C/line%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
pointer-events: none;
opacity: 0.8;
}
/* Hide animations & load more animation fixes */
.kn-filtered-out {
display: none !important;
}
/* Layout vertical tabs override for teacher directory */
.kn-teacher-tabs {
display: flex;
flex-wrap: wrap;
gap: 30px;
align-items: flex-start;
}
.kn-teacher-tabs>.kn-teacher-sidebar {
flex: 0 0 25%;
max-width: 25%;
background: #ffffff;
border: 1px solid #edf2f7;
border-radius: 16px;
padding: 24px 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}
.kn-teacher-tabs>.tab-panels {
flex: 1;
min-width: 0;
}
/* Reset Flatsome defaults for kn-teacher-tabs */
.kn-teacher-tabs ul.nav-vertical {
width: 100% !important;
float: none !important;
border-right: none !important;
box-shadow: none;
background: transparent !important;
margin: 0 0 20px 0 !important;
}
.kn-teacher-tabs .tab-panels {
float: none;
width: auto;
padding: 0;
background: transparent;
}
.kn-teacher-tabs .nav-vertical>li {
margin: 0 0 8px 0 !important;
border: none !important;
}
.kn-teacher-tabs .nav-vertical>li.active {
border: none !important;
}
.kn-teacher-tabs .nav-vertical>li>a {
display: flex !important;
align-items: center;
gap: 10px;
padding: 12px 16px !important;
border-radius: 10px;
font-size: 14px !important;
font-weight: 700 !important;
color: #475569 !important;
text-transform: none !important;
background: transparent !important;
border: none !important;
box-shadow: none;
text-decoration: none;
transition: all 0.2s ease;
}
.kn-teacher-tabs .nav-vertical>li>a:hover {
background: #f8fafc !important;
color: #2c3c7a !important;
}
.kn-teacher-tabs .nav-vertical>li.active>a,
.kn-teacher-tabs .nav-vertical>li>a.active {
background: #bfdbfe !important;
color: #1e3a8a !important;
}
.kn-teacher-tabs .nav-vertical>li>a svg {
flex-shrink: 0;
width: 18px;
height: 18px;
color: inherit;
margin-right: 0 !important;
}
/* ==========================================================================
Responsive Mobile Navigation (.kn-teacher-tabs)
========================================================================== */
/* ==========================================================================
Responsive Mobile Navigation (.kn-teacher-tabs) - Swipeable Pills
========================================================================== */
@media (max-width: 849px) {
.kn-teacher-tabs.tabbed-content,
.kn-teacher-tabs {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
overflow: visible !important;
gap: 0 !important;
}
/* Remove sidebar background and padding on mobile */
.kn-teacher-sidebar,
.kn-teacher-tabs>.kn-teacher-sidebar {
flex: none !important;
width: 100% !important;
max-width: 100% !important;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 0 10px 0 !important;
}
.kn-teacher-sidebar-title,
.kn-teacher-sidebar-subtitle,
.kn-teacher-tabs .kn-teacher-sidebar-title,
.kn-teacher-tabs .kn-teacher-sidebar-subtitle {
display: none !important;
}
/* Horizontal scrollable nav pills bar */
.kn-teacher-tabs ul.nav,
.kn-teacher-tabs ul.nav-vertical,
.kn-teacher-sidebar ul.nav-vertical,
.kn-teacher-sidebar ul.nav,
.kn-teacher-tabs .nav-vertical {
display: flex !important;
flex-direction: row !important;
flex-flow: row nowrap !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important;
scroll-snap-type: x proximity !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
margin-top: 0 !important;
margin-bottom: 12px !important;
padding: 6px 0 12px 0 !important;
gap: 12px !important;
list-style: none !important;
background: transparent !important;
border: none !important;
float: none !important;
}
.kn-teacher-tabs ul.nav::-webkit-scrollbar,
.kn-teacher-tabs ul.nav-vertical::-webkit-scrollbar,
.kn-teacher-sidebar ul.nav-vertical::-webkit-scrollbar,
.kn-teacher-sidebar ul.nav::-webkit-scrollbar {
display: none !important;
height: 0 !important;
width: 0 !important;
}
/* Tab list item sizing */
.kn-teacher-tabs ul.nav>li,
.kn-teacher-tabs ul.nav-vertical>li,
.kn-teacher-sidebar ul.nav-vertical>li,
.kn-teacher-sidebar ul.nav>li {
display: inline-flex !important;
flex: 0 0 auto !important;
width: auto !important;
min-width: fit-content !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
list-style: none !important;
scroll-snap-align: start !important;
}
/* Pills appearance matching screenshot */
.kn-teacher-tabs ul.nav>li>a,
.kn-teacher-tabs ul.nav-vertical>li>a,
.kn-teacher-sidebar .kn-sidebar-nav-item,
.kn-teacher-tabs .nav-vertical>li>a.kn-sidebar-nav-item,
.kn-sidebar-nav-item {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 10px 24px !important;
border-radius: 999px !important;
background-color: #ffffff !important;
border: 1.5px solid #e2e8f0 !important;
color: #2c3c7a !important;
font-size: 14px !important;
font-weight: 700 !important;
text-transform: none !important;
letter-spacing: normal !important;
white-space: nowrap !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
transition: all 0.25s ease !important;
line-height: 1.3 !important;
gap: 0 !important;
margin: 0 !important;
text-decoration: none !important;
}
/* Hide SVG icons inside tab links on mobile */
.kn-teacher-tabs ul.nav>li>a svg,
.kn-teacher-tabs ul.nav-vertical>li>a svg,
.kn-teacher-sidebar .kn-sidebar-nav-item svg,
.kn-sidebar-nav-item svg {
display: none !important;
}
.kn-teacher-tabs ul.nav>li>a:hover,
.kn-teacher-tabs ul.nav-vertical>li>a:hover,
.kn-sidebar-nav-item:hover {
background-color: #f8fafc !important;
border-color: #cbd5e1 !important;
color: #1e293b !important;
}
/* Active Pill: Crimson Red #b61f3d with white text */
.kn-teacher-tabs ul.nav>li.active>a,
.kn-teacher-tabs ul.nav-vertical>li.active>a,
.kn-teacher-tabs ul.nav-vertical>li>a.active,
.kn-teacher-sidebar .kn-sidebar-nav-item.active,
.kn-sidebar-nav-item.active {
background-color: #b61f3d !important;
border-color: #b61f3d !important;
color: #ffffff !important;
box-shadow: 0 4px 14px rgba(182, 31, 61, 0.3) !important;
}
/* CTA button "Nhận lộ trình miễn phí" */
.kn-sidebar-cta-btn,
.kn-teacher-tabs .kn-sidebar-cta-btn {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
background-color: #b61f3d !important;
color: #ffffff !important;
font-size: 15px !important;
font-weight: 700 !important;
padding: 14px 20px !important;
border-radius: 12px !important;
text-decoration: none !important;
box-shadow: 0 4px 14px rgba(182, 31, 61, 0.25) !important;
margin: 5px 0 18px 0 !important;
transition: all 0.25s ease !important;
box-sizing: border-box !important;
}
.kn-sidebar-cta-btn:after,
.kn-teacher-tabs .kn-sidebar-cta-btn:after {
content: "→";
font-size: 18px;
font-weight: 700;
line-height: 1;
margin-left: 10px;
}
.kn-sidebar-cta-btn:hover,
.kn-teacher-tabs .kn-sidebar-cta-btn:hover {
background-color: #961730 !important;
}
/* Compact teacher filter dropdowns */
.kn-teacher-filters-row {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
width: 100% !important;
margin-bottom: 20px !important;
align-items: stretch !important;
}
.kn-teacher-filter-select-wrapper {
width: 100% !important;
display: block !important;
}
.kn-teacher-filter-select {
width: 100% !important;
min-width: 0 !important;
height: 44px !important;
line-height: 42px !important;
box-sizing: border-box !important;
}
.kn-teacher-tabs>.tab-panels {
width: 100% !important;
padding: 0 !important;
}
/* Hide Teacher Image in Popup Modal on Mobile */
.kn-teacher-modal-box .kn-teacher-modal-image-col,
.kn-teacher-modal-box .col:first-child {
display: none !important;
}
.kn-teacher-modal-box .kn-teacher-modal-content-col,
.kn-teacher-modal-box .col:last-child {
width: 100% !important;
flex: 0 0 100% !important;
max-width: 100% !important;
}
.kn-teacher-modal-box {
max-width: 92vw !important;
border-radius: 16px !important;
margin: 0 auto !important;
}
.kn-teacher-modal-box .kn-teacher-modal-scroll {
padding: 24px 18px !important;
max-height: 80vh !important;
}
}
.kn-teacher-popup-badge {
position: absolute;
top: 16px;
left: 16px;
background: #b61f3d;
color: #fff;
font-size: 12px;
font-weight: 800;
padding: 6px 14px;
border-radius: 20px;
box-shadow: 0 4px 12px rgba(182, 31, 61, 0.35);
display: inline-flex;
align-items: center;
gap: 6px;
z-index: 9;
letter-spacing: 0.3px;
font-family: 'Montserrat', sans-serif;
}
.kn-teacher-popup-badge svg {
flex-shrink: 0;
stroke: #ffffff;
}
/* Testimonials Section */
.kn-testimonial-card .col-inner {
background-color: #f8fafc;
border-radius: 16px;
padding: 35px 30px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.01);
position: relative;
border: 1px solid #edf2f7;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: all 0.3s ease;
}
.kn-testimonial-card .col-inner:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
border-color: #e2e8f0;
}
.kn-quote-icon {
position: absolute;
top: 15px;
right: 25px;
font-size: 72px;
font-weight: 900;
color: #fee2e2;
font-family: 'Montserrat', sans-serif;
line-height: 1;
user-select: none;
opacity: 0.8;
}
.kn-testimonial-text {
font-size: 14px;
color: #4b5563;
line-height: 1.65;
margin-bottom: 25px;
font-weight: 500;
position: relative;
z-index: 2;
}
.kn-testimonial-student {
display: flex;
align-items: center;
gap: 14px;
position: relative;
z-index: 2;
margin-top: auto;
}
.kn-testimonial-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
}
.kn-testimonial-info {
display: flex;
flex-direction: column;
}
.kn-testimonial-name {
color: #111827;
font-size: 15px;
font-weight: 700;
margin: 0 0 2px 0;
font-family: 'Montserrat', sans-serif;
}
.kn-testimonial-meta {
font-size: 12px;
color: #b61f3d;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Registration Section */
.kn-reg-row {
border-radius: 16px;
overflow: hidden;
box-shadow: 0 15px 45px rgba(0, 0, 0, 0.06);
}
.kn-reg-col-left {
background-color: #1d2c4f;
padding: 55px 45px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.kn-reg-col-right {
background-color: #ffffff;
padding: 50px 45px;
}
.kn-reg-badge {
background-color: #b61f3d;
color: #ffffff;
padding: 6px 14px;
font-size: 11px;
font-weight: 700;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 0.5px;
display: inline-block;
margin-bottom: 25px;
}
.kn-reg-left-title {
color: #ffffff;
font-size: 32px;
font-weight: 700;
line-height: 1.3;
margin: 0 0 20px 0;
font-family: 'Montserrat', sans-serif;
}
.kn-reg-left-text {
color: #cbd5e1;
font-size: 15px;
line-height: 1.65;
margin-bottom: 40px;
}
.kn-reg-stats-row {
display: flex;
align-items: center;
gap: 30px;
margin-top: auto;
}
.kn-reg-stat-num {
font-size: 28px;
font-weight: 700;
color: #ffffff;
line-height: 1.1;
margin-bottom: 4px;
display: block;
}
.kn-reg-stat-label {
font-size: 12px;
color: #94a3b8;
font-weight: 600;
}
.kn-reg-divider {
width: 1px;
height: 40px;
background-color: rgba(255, 255, 255, 0.15);
}
.kn-reg-right-title {
font-size: 24px;
font-weight: 700;
color: #2c3c7a;
margin: 0 0 8px 0;
font-family: 'Montserrat', sans-serif;
}
.kn-reg-right-subtitle {
font-size: 13px;
color: #64748b;
margin-bottom: 30px;
line-height: 1.5;
}
.kn-reg-field-group {
margin-bottom: 18px;
}
.kn-reg-field-row {
display: flex;
gap: 16px;
margin-bottom: 18px;
}
.kn-reg-field-row .kn-reg-field-group {
flex: 1;
margin-bottom: 0;
}
.kn-reg-label {
display: block;
font-size: 11px;
font-weight: 700;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 6px;
}
.kn-reg-input,
.kn-reg-select {
width: 100%;
height: 42px;
border: 1px solid #cbd5e1;
border-radius: 8px;
padding: 0 16px;
font-size: 13px;
color: #1e293b;
background-color: #ffffff;
transition: all 0.2s ease;
box-shadow: none;
margin: 0;
}
.kn-reg-input:focus,
.kn-reg-select:focus {
border-color: #b61f3d;
box-shadow: 0 0 0 3px rgba(176, 30, 56, 0.08);
outline: none;
}
/* Custom Radio Pills */
.kn-reg-radio-pill {
flex: 1;
height: 42px;
border: 1px solid #cbd5e1;
border-radius: 8px;
display: flex;
align-items: center;
padding: 0 16px;
gap: 10px;
cursor: pointer;
transition: all 0.2s ease;
background-color: #ffffff;
user-select: none;
}
.kn-reg-radio-pill input[type="radio"] {
display: none !important;
}
.kn-radio-circle {
width: 16px;
height: 16px;
border: 2px solid #cbd5e1;
border-radius: 50%;
display: inline-block;
position: relative;
transition: all 0.2s ease;
flex-shrink: 0;
}
.kn-reg-radio-pill input[type="radio"]:checked+.kn-radio-circle {
border-color: #b61f3d !important;
}
.kn-reg-radio-pill input[type="radio"]:checked+.kn-radio-circle::after {
content: "" !important;
width: 8px;
height: 8px;
background-color: #b61f3d !important;
border-radius: 50%;
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%);
}
.kn-reg-radio-pill:hover {
border-color: #94a3b8;
background-color: #f8fafc;
}
.kn-reg-radio-pill.checked-pill {
border-color: #b61f3d;
background-color: rgba(176, 30, 56, 0.02);
}
.kn-reg-radio-pill-label {
font-size: 13px;
color: #475569;
font-weight: 500;
}
.kn-reg-submit-btn {
width: 100%;
height: 48px;
background-color: #b61f3d;
color: #ffffff;
font-size: 15px;
font-weight: 700;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 4px 12px rgba(176, 30, 56, 0.2);
text-transform: none;
display: flex;
align-items: center;
justify-content: center;
}
.kn-reg-submit-btn:hover {
background-color: #96162d;
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(176, 30, 56, 0.3);
}
.kn-reg-disclaimer {
text-align: center;
font-size: 11px;
color: #94a3b8;
margin-top: 14px;
display: block;
}
/* WPForms Premium Custom Styling Overrides */
.kn-reg-col-right .wpforms-container {
margin: 0;
padding: 0;
border: none;
}
.kn-reg-col-right .wpforms-form {
margin: 0;
}
.kn-reg-col-right .wpforms-field-container {
margin: 0;
}
.kn-reg-col-right .wpforms-field {
padding: 0;
margin-bottom: 18px;
}
/* Reset honeypot field spacing */
.kn-reg-col-right [id*="-field_7-container"] {
margin-bottom: 0;
height: 0;
padding: 0;
overflow: hidden;
}
.kn-reg-col-right .wpforms-field-label {
display: block;
font-size: 11px;
font-weight: 700;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 6px;
font-family: 'Montserrat', sans-serif;
}
.kn-reg-col-right input[type="text"],
.kn-reg-col-right input[type="tel"],
.kn-reg-col-right input[type="email"],
.kn-reg-col-right select.wpforms-field-large,
.kn-reg-col-right .wpforms-field select {
width: 100% !important;
height: 42px !important;
border: 1px solid #cbd5e1 !important;
border-radius: 8px;
padding: 0 16px !important;
font-size: 13px !important;
color: #1e293b !important;
background-color: #ffffff !important;
transition: all 0.2s ease;
box-shadow: none;
margin: 0 !important;
box-sizing: border-box !important;
}
.kn-reg-col-right input:focus,
.kn-reg-col-right select:focus {
border-color: #b61f3d !important;
box-shadow: 0 0 0 3px rgba(176, 30, 56, 0.08);
outline: none !important;
}
/* Radio Button Grid in WPForms */
.kn-reg-col-right .wpforms-field-radio fieldset {
border: none !important;
padding: 0 !important;
margin: 0 !important;
min-width: 0 !important;
width: 100% !important;
}
.kn-reg-col-right .wpforms-field-radio legend.wpforms-field-label {
display: block !important;
width: 100% !important;
float: none !important;
padding: 0 !important;
margin: 0 0 10px 0 !important;
border-bottom: none !important;
}
.kn-reg-col-right .wpforms-field-radio ul {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-wrap: wrap;
gap: 16px;
width: 100% !important;
}
.kn-reg-col-right .wpforms-field-radio ul li {
flex: 1 !important;
margin: 0 !important;
padding: 0 !important;
min-height: 42px !important;
height: auto !important;
border: 1px solid #cbd5e1 !important;
border-radius: 8px;
display: flex !important;
align-items: center;
cursor: pointer;
transition: all 0.2s ease;
background-color: #ffffff !important;
position: relative !important;
}
.kn-reg-col-right .wpforms-field-radio ul li label {
display: flex !important;
align-items: center;
width: 100% !important;
height: 100% !important;
padding: 0 16px !important;
margin: 0 !important;
font-size: 13px !important;
color: #475569 !important;
font-weight: 500 !important;
cursor: pointer;
gap: 10px;
font-family: inherit !important;
}
/* Style WPForms native radio buttons to look like custom radio buttons */
.kn-reg-col-right .wpforms-field-radio input[type="radio"] {
appearance: none !important;
-webkit-appearance: none !important;
width: 16px !important;
height: 16px !important;
border: 2px solid #cbd5e1 !important;
border-radius: 50%;
outline: none !important;
margin-left: 15px !important;
cursor: pointer;
position: relative !important;
transition: all 0.2s ease;
display: inline-block !important;
flex-shrink: 0;
}
/* 100% cross-browser compatible checked state styling using box-shadow inside input */
.kn-reg-col-right .wpforms-field-radio input[type="radio"]:checked {
border-color: #b61f3d !important;
background-color: #b61f3d !important;
box-shadow: inset 0 0 0 3px #ffffff;
}
/* Highlight checked card in WPForms */
.kn-reg-col-right .wpforms-field-radio ul li:has(input[type="radio"]:checked) {
border-color: #b61f3d !important;
background-color: rgba(176, 30, 56, 0.02) !important;
}
.kn-reg-col-right .wpforms-field-radio ul li:hover {
border-color: #94a3b8 !important;
background-color: #f8fafc !important;
}
/* Submit button */
.kn-reg-col-right .wpforms-submit-container {
padding: 0;
margin: 25px 0 0 0;
}
.kn-reg-col-right button.wpforms-submit {
width: 100% !important;
height: 48px !important;
background-color: #b61f3d !important;
color: #ffffff !important;
font-size: 15px !important;
font-weight: 700 !important;
border: none !important;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 4px 12px rgba(176, 30, 56, 0.2);
text-transform: none !important;
display: flex !important;
align-items: center;
justify-content: center;
font-family: 'Montserrat', sans-serif !important;
}
.kn-reg-col-right button.wpforms-submit:hover {
background-color: #96162d !important;
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(176, 30, 56, 0.3);
}
/* Disclaimer at the bottom */
.kn-reg-col-right .wpforms-disclaimer,
.kn-reg-col-right .wpforms-disclaimer-wrapper {
text-align: center;
font-size: 11px;
color: #94a3b8;
margin-top: 14px;
display: block;
}
/* Adjust WPForms Layout columns spacing to match design */
.kn-reg-col-right .wpforms-layout-row {
display: flex;
gap: 16px;
margin-bottom: 0px;
}
.kn-reg-col-right .wpforms-layout-column {
flex: 1;
margin: 0;
width: auto;
}
.kn-reg-col-right .wpforms-layout-column .wpforms-field {
margin-bottom: 0;
}
.kn-reg-col-right label.wpforms-error {
color: #d63637;
font-size: 11px;
font-weight: 600;
margin-top: 4px;
margin-bottom: 0;
display: block;
}
.kn-reg-col-right .wpforms-title {
font-size: 24px;
font-weight: 700;
color: #2c3c7a;
margin: 0 0 8px 0;
font-family: 'Montserrat', sans-serif;
display: block;
}
.kn-reg-col-right .wpforms-description {
font-size: 13px;
color: #64748b;
margin-bottom: 30px;
line-height: 1.5;
display: block;
}
/* Student Cards and Filter Tabs Section */
.kn-fame-wrapper {
width: 100%;
}
.kn-student-filter-scroll-wrapper {
display: flex;
justify-content: center;
width: 100%;
margin-bottom: 45px;
}
.kn-student-filter-row {
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
background: transparent;
border: none;
border-radius: 0;
padding: 0;
box-shadow: none;
width: auto;
max-width: 100%;
}
.kn-student-filter-btn {
padding: 10px 24px;
background-color: #ffffff;
color: #475569;
font-size: 13px;
font-weight: 600;
border: 1px solid #e2e8f0;
border-radius: 6px;
text-decoration: none;
transition: all 0.25s ease;
cursor: pointer;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
}
.kn-student-filter-btn:hover {
border-color: #cbd5e1;
background-color: #f8fafc;
color: #1e293b;
}
.kn-student-filter-btn.active {
background-color: #1d2951;
color: #ffffff;
border-color: #1d2951;
font-weight: 700;
box-shadow: 0 4px 12px rgba(29, 41, 81, 0.15);
}
/* Mobile: Capsule Segmented Pill Bar */
@media (max-width: 849px) {
.kn-student-filter-scroll-wrapper {
display: flex !important;
justify-content: flex-start !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
width: 100% !important;
padding: 4px 0 12px 0 !important;
margin-bottom: 20px !important;
}
.kn-student-filter-scroll-wrapper::-webkit-scrollbar {
display: none !important;
}
.kn-student-filter-row {
display: inline-flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
margin: 0 !important;
min-width: max-content !important;
padding: 4px !important;
border-radius: 999px !important;
border: 1.5px solid #e2e8f0 !important;
background: #ffffff !important;
gap: 4px !important;
flex-shrink: 0 !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
}
.kn-student-filter-btn {
padding: 8px 18px !important;
font-size: 13px !important;
font-weight: 700 !important;
border-radius: 999px !important;
border: 1.5px solid transparent !important;
background-color: transparent !important;
color: #64748b !important;
flex: 0 0 auto !important;
white-space: nowrap !important;
text-transform: uppercase !important;
letter-spacing: 0.3px !important;
}
.kn-student-filter-btn:hover {
color: #b61f3d !important;
background-color: rgba(241, 245, 249, 0.6) !important;
}
.kn-student-filter-btn.active {
background-color: #ffffff !important;
color: #b61f3d !important;
border: 1.5px solid #cbd5e1 !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
font-weight: 800 !important;
}
/* Hide Student Image in Hall of Fame Popup Modal on Mobile */
.kn-fame-modal-box .kn-fame-modal-image-col,
.kn-fame-modal-box .col:first-child {
display: none !important;
}
.kn-fame-modal-box .kn-fame-modal-content-col,
.kn-fame-modal-box .col:last-child {
width: 100% !important;
flex: 0 0 100% !important;
max-width: 100% !important;
}
.kn-fame-modal-box {
max-width: 92vw !important;
border-radius: 16px !important;
margin: 0 auto !important;
}
.kn-fame-modal-box .kn-fame-modal-scroll {
padding: 24px 18px !important;
max-height: 80vh !important;
overflow-y: auto !important;
}
}
.kn-student-card {
background-color: #ffffff;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
padding: 16px;
position: relative;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
border: 1px solid #f1f5f9;
}
.kn-student-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
border-color: #e2e8f0;
}
.kn-student-img-wrapper {
position: relative;
width: 100%;
height: 240px;
border-radius: 8px;
overflow: hidden;
margin-bottom: 18px;
background-color: #f8fafc;
}
.kn-student-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
display: block;
transition: transform 0.5s ease;
}
.kn-student-card:hover .kn-student-img {
transform: scale(1.03);
}
.kn-student-badge {
position: absolute;
top: 0;
right: 0;
background-color: #b61f3d;
color: #ffffff;
font-size: 11px;
font-weight: 700;
padding: 5px 12px;
border-radius: 0 8px 0 8px;
z-index: 2;
box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.08);
}
.kn-student-date {
font-size: 12px;
color: #b61f3d;
font-weight: 700;
margin-bottom: 6px;
display: block;
}
.kn-student-name {
color: #1e293b;
font-size: 18px;
font-weight: 700;
margin: 0 0 12px 0;
font-family: 'Montserrat', sans-serif;
}
.kn-student-info-row {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: #64748b;
margin-bottom: 8px;
line-height: 1.4;
}
.kn-student-info-row:last-child {
margin-bottom: 0;
}
.kn-student-info-icon {
width: 14px;
height: 14px;
color: #94a3b8;
flex-shrink: 0;
display: inline-block;
}
/* Animations for filter filtering */
@keyframes studentFadeIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.kn-student-animate {
animation: studentFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.kn-student-card-link {
cursor: pointer;
}
.kn-student-card-link:hover .kn-student-view-detail-text svg {
transform: translateX(4px);
}
.kn-student-view-detail-text svg {
transition: transform 0.2s ease;
}
/* Student Story Slider Section */
.kn-story-section {
background-color: #f8fafc;
padding: 60px 0 80px 0;
}
.kn-story-title-container {
text-align: center;
}
.kn-story-title {
color: #b61f3d;
font-weight: 700;
font-size: 30px;
margin: 0 0 12px 0;
font-family: 'Montserrat', sans-serif;
}
.kn-story-divider {
width: 50px;
height: 3px;
background-color: #b61f3d;
margin: 0 auto 40px auto;
}
.kn-story-slider {
position: relative;
padding-bottom: 60px;
}
.kn-story-card {
background-color: #ffffff;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
padding: 35px;
border: 1px solid #f1f5f9;
margin: 10px;
}
.kn-story-img-col {
padding: 0;
}
.kn-story-img-col .col-inner {
height: 100%;
}
.kn-story-img {
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}
.kn-story-content-col {
display: flex;
flex-direction: column;
justify-content: center;
}
.kn-story-quote-icon {
font-size: 48px;
color: #b61f3d;
font-family: Georgia, serif;
line-height: 1;
margin-bottom: 15px;
}
.kn-story-text {
font-size: 15px;
color: #475569;
font-style: italic;
line-height: 1.8;
margin-bottom: 25px;
}
.kn-story-name {
color: #1e293b;
font-weight: 700;
font-size: 18px;
margin: 0 0 4px 0;
font-family: 'Montserrat', sans-serif;
}
.kn-story-meta {
color: #b61f3d;
font-weight: 700;
font-size: 13px;
display: block;
margin-bottom: 18px;
}
.kn-story-link {
color: #1e293b;
font-weight: 700;
font-size: 13px;
text-decoration: none;
display: inline-block;
transition: all 0.2s ease;
}
.kn-story-link:hover {
color: #b61f3d;
transform: translateX(3px);
}
/* Flatsome Slider Nav Theme Accents for kn-story-slider and reviews */
.kn-story-slider .flickity-prev-next-button:hover {
background-color: #b61f3d !important;
border-color: #b61f3d !important;
color: #ffffff !important;
}
.kn-story-slider.slider-nav-simple .flickity-prev-next-button:hover,
.kn-story-slider.slider-nav-reveal .flickity-prev-next-button:hover {
background-color: transparent !important;
color: #b61f3d !important;
}
/* Contact Page Custom Styling */
.kn-contact-info-card {
display: flex;
align-items: center;
gap: 20px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 20px 24px;
margin-bottom: 16px;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.01);
}
.kn-contact-info-card:hover {
border-color: rgba(176, 30, 56, 0.3);
box-shadow: 0 8px 25px rgba(176, 30, 56, 0.05);
transform: translateY(-2px);
}
.kn-contact-icon-box {
width: 48px;
height: 48px;
border-radius: 10px;
background-color: #b61f3d;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.kn-contact-label {
font-size: 11px;
color: #888888;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
display: block;
margin-bottom: 4px;
}
/* Social Buttons Row */
.kn-contact-social-label {
font-size: 14px;
font-weight: 700;
color: #1d2951;
display: block;
margin-bottom: 12px;
font-family: 'Montserrat', sans-serif;
}
.kn-contact-social-row {
display: flex;
gap: 12px;
}
.kn-contact-social-btn {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #f8fafc;
border: 1px solid #cbd5e1;
display: flex;
align-items: center;
justify-content: center;
color: #64748b;
transition: all 0.2s ease;
}
.kn-contact-social-btn:hover {
background-color: #b61f3d;
border-color: #b61f3d;
color: #ffffff;
transform: translateY(-2px);
}
/* Contact Form Card on Page 61 */
.kn-contact-form-card {
background: #ffffff;
border-radius: 16px;
border: 1px solid #f1f5f9;
padding: 40px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}
.kn-contact-form-title {
color: #1d2951;
font-weight: 700;
font-size: 24px;
margin: 0 0 25px 0;
font-family: 'Montserrat', sans-serif;
}
/* ==========================================================================
CUSTOM FOOTER STYLING
========================================================================== */
.kn-footer {
padding-top: 60px;
padding-bottom: 40px;
background-color: #ffffff;
font-size: 14px;
color: #4a5568;
border-top: 1px solid #eaedf1;
}
.kn-footer-col h4 {
color: #2c3c7a !important;
/* Navy */
font-size: 16px !important;
font-weight: 700;
margin-bottom: 20px;
text-transform: none !important;
/* Keep original capitalization */
letter-spacing: -0.2px;
}
.kn-footer-contact {
margin-top: 15px;
}
.kn-footer-contact-item {
margin-bottom: 12px;
display: flex;
align-items: flex-start;
gap: 10px;
line-height: 1.5;
}
.kn-footer-contact-item i {
color: #2c3c7a;
font-size: 16px;
margin-top: 3px;
width: 16px;
text-align: center;
}
.kn-footer-campuses {
list-style: none;
padding: 0;
margin: 5px 0 15px 26px;
margin-left: 0;
}
.kn-footer-campuses li {
margin-bottom: 8px;
font-size: 13.5px;
line-height: 1.45;
color: #4a5568;
margin-left: 0;
}
.kn-footer-license {
font-size: 12.5px;
color: #718096;
line-height: 1.6;
margin-top: 20px;
padding-top: 15px;
border-top: 1px solid #edf2f7;
}
.kn-footer-license p {
margin-bottom: 6px;
}
.kn-footer-links,
.kn-footer-links ul {
list-style: none !important;
padding: 0;
margin: 0;
}
.kn-footer-links li,
.kn-footer-links ul li {
margin-left: 0;
margin-bottom: 10px;
line-height: 1.4;
}
.kn-footer-links a,
.kn-footer-links ul li a {
color: #4a5568 !important;
font-weight: 500;
padding: 0;
background-color: transparent !important;
transition: color 0.2s ease;
}
.kn-footer-links a:hover,
.kn-footer-links ul li a:hover {
color: #c02444 !important;
/* Primary Red */
background-color: transparent !important;
text-decoration: none;
}
.kn-footer-col .social-icons {
margin-top: 15px;
margin-bottom: 25px;
}
.kn-footer-col .social-icons a {
color: #2c3c7a !important;
font-size: 18px !important;
margin-right: 15px;
transition: color 0.2s ease;
}
.kn-footer-col .social-icons a:hover {
color: #c02444 !important;
}
.kn-footer-badges {
display: flex;
align-items: center;
gap: 15px;
flex-wrap: wrap;
margin-top: 20px;
}
.kn-footer-badges img {
height: 32px;
width: auto;
object-fit: contain;
display: block;
}
.kn-footer-col .menu-title {
color: #2c3c7a !important;
/* Navy */
font-size: 16px !important;
font-weight: 700;
margin-top: 0;
margin-bottom: 20px;
text-transform: none !important;
letter-spacing: -0.2px;
}
/* =========================================================================
HEADER SEARCH FORM CUSTOM STYLING (Matching Mockup)
========================================================================= */
@media (min-width: 850px) {
/* Main Container Reset */
.header-search-form.search-form {
background: transparent !important;
border: none !important;
box-shadow: none;
padding: 0 !important;
margin: 0 !important;
}
.header-search-form .header-search-form-wrapper {
padding: 0 !important;
}
.header-search-form .searchform-wrapper {
background: transparent !important;
border: none !important;
box-shadow: none;
padding: 0 !important;
max-width: 250px;
}
.header-search-form .searchform {
margin: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none;
}
/* Flex Container setup */
.header-search-form .searchform .flex-row {
display: flex !important;
align-items: center;
border: none !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
}
.header-search-form .searchform .flex-row>.flex-col {
padding: 0 !important;
margin: 0 !important;
}
/* Swap positions using Flexbox order */
.header-search-form .searchform .flex-row>.flex-col.flex-grow {
order: 2 !important;
/* Move Input to the right */
}
.header-search-form .searchform .flex-row>.flex-col:not(.flex-grow) {
order: 1 !important;
/* Move Button to the left */
}
/* Style the Search Input Field */
.header-search-form .search-field {
background-color: transparent !important;
border: none !important;
box-shadow: none;
padding: 0 0 0 10px !important;
/* 10px spacing from the icon on the left */
height: 36px !important;
line-height: 36px !important;
font-size: 15px !important;
color: #4a5568 !important;
/* Neutral dark text color */
font-weight: 500 !important;
width: 100% !important;
outline: none !important;
}
/* Custom placeholder color matching mockup */
.header-search-form .search-field::placeholder {
color: #7f8d9f !important;
opacity: 1;
font-weight: 400 !important;
}
.header-search-form .search-field::-webkit-input-placeholder {
color: #7f8d9f !important;
font-weight: 400 !important;
}
.header-search-form .search-field::-moz-placeholder {
color: #7f8d9f !important;
font-weight: 400 !important;
}
.header-search-form .search-field:-ms-input-placeholder {
color: #7f8d9f !important;
font-weight: 400 !important;
}
/* Style the Search Icon/Button */
.header-search-form .ux-search-submit {
background: transparent !important;
border: none !important;
box-shadow: none;
color: #7f8d9f !important;
/* Magnifying glass color */
padding: 0 0 0 12px !important;
/* 12px left padding so it is not stuck to the left border edge */
margin: 0 !important;
min-width: auto !important;
height: auto !important;
line-height: 1 !important;
text-shadow: none !important;
transition: color 0.2s ease, transform 0.2s ease;
display: inline-flex !important;
align-items: center;
justify-content: center;
}
.header-search-form .ux-search-submit:hover {
color: #2c3c7a !important;
/* Navy color on hover */
background: transparent !important;
transform: scale(1.05);
}
.header-search-form .ux-search-submit i {
font-size: 18px !important;
display: inline-block !important;
}
/* Hide Flatsome default border/background wrappers */
.header-search-form .ux-search-box {
border: none !important;
background-color: transparent !important;
}
}
/* Course Tag Badges (HOT, NEW, SALES) */
.kn-course-card {
position: relative;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.kn-course-card.has-badge-hot {
border: 2px solid #b61f3d;
}
.kn-course-card.has-badge-new {
border: 2px solid #10b981;
}
.kn-course-card.has-badge-sales {
border: 2px solid #f59e0b;
}
.kn-course-tag-badge {
position: absolute;
top: 0;
right: 0;
color: #ffffff;
font-size: 10px;
font-weight: 700;
padding: 4px 12px;
border-bottom-left-radius: 8px;
text-transform: uppercase;
z-index: 10;
}
.kn-course-tag-badge.badge-hot {
background-color: #b61f3d;
}
.kn-course-tag-badge.badge-new {
background-color: #10b981;
}
.kn-course-tag-badge.badge-sales {
background-color: #f59e0b;
}
/* Force month/year date text in simple table on a single line */
.kn-simple-table-date {
white-space: nowrap;
}
/* Teacher Grid Card Styling matching mockup design */
.kn-teacher-grid-card {
display: block;
text-decoration: none;
color: inherit;
height: 100%;
}
.kn-teacher-card-inner {
background: #ffffff;
border: 1px solid #edf2f7;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
height: 100%;
display: flex;
flex-direction: column;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.kn-teacher-grid-card:hover .kn-teacher-card-inner {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}
.kn-teacher-card-img-box {
position: relative;
padding-top: 100%;
overflow: hidden;
background: #f4f6f8;
}
.kn-teacher-card-img-box img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.kn-teacher-grid-card:hover .kn-teacher-card-img-box img {
transform: scale(1.05);
}
.kn-teacher-card-content {
padding: 24px 20px;
flex-grow: 1;
display: flex;
flex-direction: column;
text-align: left;
}
.kn-teacher-card-name {
font-size: 18px;
font-weight: 700;
color: #2c3c7a;
margin: 0 0 10px 0;
line-height: 1.4;
height: 50px;
overflow: hidden;
}
.kn-teacher-card-badges {
display: flex;
gap: 8px;
margin-bottom: 18px;
flex-wrap: wrap;
align-items: flex-start;
overflow: hidden;
}
.kn-teacher-badge-blue {
background: #e6f0fa;
color: #2b6cb0;
font-size: 11px;
font-weight: 700;
padding: 4px 10px;
border-radius: 4px;
}
.kn-teacher-badge-red {
background: #b61f3d;
color: #ffffff;
font-size: 11px;
font-weight: 700;
padding: 4px 10px;
border-radius: 4px;
text-transform: uppercase;
}
.kn-teacher-badge-grey {
background: #f1f5f9;
color: #718096;
font-size: 11px;
font-weight: 700;
padding: 4px 10px;
border-radius: 4px;
}
.kn-teacher-card-meta-info {
font-size: 13px;
line-height: 1.6;
color: #4a5568;
}
.kn-teacher-card-meta-info p {
margin: 0 0 8px 0;
}
.kn-teacher-card-meta-info p:last-child {
margin: 0;
height: 42px;
overflow: hidden;
}
.kn-teacher-card-meta-info strong {
color: #718096;
font-weight: 700;
}
/* Footer Bottom Bar Styling */
.kn-footer-bottom {
background-color: #ffffff;
border-top: 1px solid #eaedf1;
padding: 25px 0;
font-size: 13.5px;
}
.kn-footer-bottom p {
margin: 0;
}
.kn-footer-bottom .text-left p {
color: #1e293b !important;
font-weight: 700;
}
.kn-footer-bottom .text-right p {
color: #64748b !important;
font-style: italic !important;
}
/* Floating Action Buttons Stack */
.kn-floating-actions {
position: fixed;
bottom: 110px;
right: 20px;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 15px;
align-items: center;
}
.kn-float-btn {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
width: 50px;
height: 50px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
cursor: pointer;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
box-sizing: border-box;
}
.kn-float-btn:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}
/* Circular Phone Button */
.kn-float-phone {
background: #ffffff;
border-radius: 50%;
border: 1px solid #b61f3d;
padding: 0;
}
/* Circular Messenger Button */
.kn-float-messenger {
background: #0084ff;
border-radius: 50%;
padding: 0;
}
/* Rounded Square Advisory Button */
.kn-float-advisory {
background: #b61f3d;
border-radius: 12px;
padding: 9px;
}
.kn-float-btn i {
font-size: 20px;
line-height: 1;
display: inline-block;
}
.kn-float-phone i {
color: #b61f3d;
}
.kn-float-messenger i {
color: #ffffff;
}
.kn-float-btn svg {
display: block;
width: 100%;
height: 100%;
}
/* Pulse animation for phone call button to make it interactive */
@keyframes kn-float-pulse-red {
0% {
box-shadow: 0 0 0 0 rgba(176, 30, 56, 0.4);
}
70% {
box-shadow: 0 0 0 10px rgba(176, 30, 56, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(176, 30, 56, 0);
}
}
.kn-float-phone {
animation: kn-float-pulse-red 2s infinite;
}
/* Customize Flatsome back-to-top button to match mockup 100% */
#toTop,
.back-to-top {
width: 50px !important;
height: 50px !important;
border-radius: 12px;
background-color: #2c3c7a !important;
/* Solid Navy */
color: #ffffff !important;
display: flex !important;
align-items: center;
justify-content: center;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
border: none !important;
position: fixed !important;
bottom: 45px !important;
right: 20px !important;
transition: all 0.3s ease;
opacity: 0;
visibility: hidden;
z-index: 9999;
}
#toTop.active,
.back-to-top.active {
opacity: 1;
visibility: visible !important;
}
#toTop:hover,
.back-to-top:hover {
background-color: #1a285c !important;
transform: translateY(-3px) scale(1.05);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}
#toTop i,
.back-to-top i {
display: none !important;
/* Hide Flatsome's default arrow icon */
}
#toTop::after,
.back-to-top::after {
content: "↑" !important;
font-size: 24px !important;
font-weight: 700 !important;
color: #ffffff !important;
line-height: 1 !important;
display: block !important;
}
.kn-cta-container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
max-width: 1200px;
margin: 0 auto;
}
.kn-cta-left {
flex: 1;
max-width: 520px;
color: #ffffff;
}
.kn-cta-title-text {
font-size: 38px;
font-weight: 700;
color: #ffffff;
line-height: 1.25;
margin: 0 0 20px 0;
}
.kn-cta-desc-text {
font-size: 15px;
color: #cbd5e1;
line-height: 1.7;
margin: 0 0 35px 0;
}
.kn-cta-left p:not(.kn-cta-desc-text) {
display: none !important;
}
.kn-cta-stats-row {
display: flex;
align-items: center;
gap: 12px;
}
.kn-cta-stats-row p {
display: none !important;
}
.kn-cta-stat-item {
flex: 0 0 auto;
}
.kn-cta-stat-val {
font-size: 32px;
font-weight: 700;
color: #ffffff;
margin-bottom: 4px;
line-height: 1;
}
.kn-cta-stats-row .kn-cta-stat-item:last-of-type .kn-cta-stat-val {
color: #fca5a5;
/* Pastel rose/salmon */
}
.kn-cta-stat-lbl {
font-size: 13.5px;
color: #cbd5e1;
font-weight: 500;
}
.kn-cta-stat-divider {
width: 1px;
height: 35px;
background-color: rgba(255, 255, 255, 0.15);
margin: 0 12px;
}
.kn-cta-right {
flex: 1;
max-width: 540px;
}
.kn-cta-form-card {
background: #ffffff;
border-radius: 20px;
padding: 40px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}
.kn-cta-form-title {
font-size: 22px;
font-weight: 700;
color: #172b4d;
margin: 0 0 8px 0;
line-height: 1.3;
}
.kn-cta-form-subtitle {
font-size: 13px;
color: #64748b;
margin: 0 0 25px 0;
line-height: 1.4;
}
.kn-cta-form-footer {
text-align: center;
font-size: 11px;
color: #94a3b8;
margin-top: 15px;
}
/* WPForms custom overrides */
.kn-cta-form-card .wpforms-container {
margin: 0;
padding: 0;
width: 100%;
}
.kn-cta-form-card .wpforms-form {
margin: 0;
}
.kn-cta-form-card .wpforms-field-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin: 0;
padding: 0;
}
.kn-cta-form-card .wpforms-field {
margin: 0;
padding: 0;
border: none;
}
/* Grid mapping for inputs */
.kn-cta-form-card .wpforms-field:nth-child(1),
.kn-cta-form-card .wpforms-field:nth-child(4),
.kn-cta-form-card .wpforms-field:nth-child(5) {
grid-column: span 2;
}
.kn-cta-form-card .wpforms-field:slate,
.kn-cta-form-card .wpforms-field:nth-child(2),
.kn-cta-form-card .wpforms-field:nth-child(3) {
grid-column: span 1;
}
.kn-cta-form-card .wpforms-field-label {
display: block;
font-size: 11px;
font-weight: 700;
color: #475569;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 6px;
}
.kn-cta-form-card .wpforms-field-label .wpforms-required-label {
color: #b61f3d;
}
.kn-cta-form-card input[type="text"],
.kn-cta-form-card input[type="email"],
.kn-cta-form-card input[type="tel"],
.kn-cta-form-card select {
width: 100%;
height: 44px;
border: 1px solid #cbd5e1;
border-radius: 8px;
padding: 10px 14px;
font-size: 14px !important;
color: #1e293b !important;
background-color: #ffffff !important;
box-shadow: none;
transition: border-color 0.2s, box-shadow 0.2s;
}
.kn-cta-form-card input:focus,
.kn-cta-form-card select:focus {
outline: none !important;
border-color: #b61f3d !important;
box-shadow: 0 0 0 3px rgba(176, 30, 56, 0.08);
}
/* Choice list radio styling */
.kn-cta-form-card .wpforms-field-radio ul,
.kn-cta-form-card .wpforms-field-checkbox ul {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
gap: 12px;
}
.kn-cta-form-card .wpforms-field-radio ul li,
.kn-cta-form-card .wpforms-field-checkbox ul li {
flex: 1 !important;
border: 1px solid #cbd5e1 !important;
border-radius: 8px;
padding: 10px 12px !important;
margin: 0 !important;
display: flex !important;
align-items: center;
transition: border-color 0.2s, background-color 0.2s;
}
.kn-cta-form-card .wpforms-field-radio ul li input,
.kn-cta-form-card .wpforms-field-checkbox ul li input {
margin: 0 8px 0 0 !important;
width: 16px !important;
height: 16px !important;
accent-color: #b61f3d !important;
flex-shrink: 0;
}
.kn-cta-form-card .wpforms-field-radio ul li label,
.kn-cta-form-card .wpforms-field-checkbox ul li label {
margin: 0 !important;
font-size: 13px !important;
color: #475569 !important;
font-weight: 600 !important;
cursor: pointer;
}
.kn-cta-form-card .wpforms-field-radio ul li:hover {
border-color: #b61f3d !important;
background-color: #fffcfc !important;
}
/* Hide native WPForms titles */
.kn-cta-form-card .wpforms-title,
.kn-cta-form-card .wpforms-description {
display: none !important;
}
.kn-cta-form-card .wpforms-submit-container {
grid-column: span 2;
padding: 0;
margin-top: 15px;
}
.kn-cta-form-card .wpforms-submit {
width: 100%;
height: 46px;
background-color: #b61f3d;
color: #ffffff;
border: none;
border-radius: 8px;
font-size: 15px;
font-weight: 700;
cursor: pointer;
transition: background-color 0.2s, transform 0.2s;
box-shadow: 0 4px 12px rgba(176, 30, 56, 0.1);
text-transform: none;
}
.kn-cta-form-card .wpforms-submit:hover {
background-color: #900c22;
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(176, 30, 56, 0.2);
}
@media (max-width: 991px) {
.kn-cta-container {
flex-direction: column;
gap: 30px;
}
.kn-cta-left,
.kn-cta-right {
max-width: 100%;
width: 100%;
}
.kn-cta-title-text {
font-size: 30px;
}
}
@media (max-width: 576px) {
.kn-cta-form-card {
padding: 24px;
}
.kn-cta-form-card .wpforms-field-radio ul,
.kn-cta-form-card .wpforms-field-checkbox ul {
flex-direction: column;
gap: 8px;
}
.kn-cta-form-card .wpforms-field:nth-child(2),
.kn-cta-form-card .wpforms-field:nth-child(3) {
grid-column: span 2;
}
}
/* ==========================================================================
CTA Early Registration Banner (kn-cta-row / kn-cta-section)
========================================================================== */
.kn-cta-section {
background-color: transparent;
}
.kn-cta-row {
background: #2b3363;
border-radius: 24px;
padding: 55px 50px;
margin-left: auto;
margin-right: auto;
box-shadow: 0 15px 40px rgba(43, 51, 99, 0.18);
align-items: center;
overflow: hidden;
}
.kn-cta-title {
color: #ffffff;
font-family: 'Montserrat', sans-serif;
font-size: 38px;
font-weight: 700;
line-height: 1.28;
margin-bottom: 24px;
letter-spacing: -0.5px;
}
.kn-cta-list {
list-style: none;
padding: 0;
margin: 0 0 32px 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.kn-cta-item {
display: flex;
align-items: center;
gap: 12px;
color: #ffffff;
font-size: 15px;
font-weight: 500;
line-height: 1.4;
}
.kn-cta-icon-wrapper {
width: 22px;
height: 22px;
border-radius: 50%;
background-color: #ffffff;
color: #2b3363;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.kn-cta-icon {
width: 12px;
height: 12px;
stroke: #2b3363;
stroke-width: 3.5;
display: block;
}
.kn-cta-icon-wrapper:empty::after {
content: "✓";
font-size: 13px;
font-weight: 900;
color: #2b3363;
line-height: 1;
}
.kn-cta-btn {
display: inline-block;
background-color: #b61f3d;
color: #ffffff;
font-size: 15px;
font-weight: 700;
padding: 13px 36px;
border-radius: 6px;
text-decoration: none;
box-shadow: 0 4px 15px rgba(176, 30, 56, 0.35);
transition: all 0.25s ease;
}
.kn-cta-btn:hover {
background-color: #8c1228;
color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(176, 30, 56, 0.5);
}
.kn-cta-img {
width: 100%;
}
.kn-cta-img .img-inner {
border-radius: 18px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.kn-cta-img img {
border-radius: 18px;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
@media (max-width: 849px) {
.kn-cta-row {
padding: 35px 24px;
border-radius: 18px;
}
.kn-cta-title {
font-size: 26px;
margin-bottom: 18px;
}
.kn-cta-item {
font-size: 14px;
}
.kn-cta-img {
margin-top: 25px;
}
}
/* ==========================================================================
5-Column & Odd Columns Grid Helper
========================================================================== */
.kn-col-5,
.kn-5-cols>.col {
flex: 0 0 20%;
max-width: 20%;
}
@media (max-width: 849px) {
.kn-col-5,
.kn-5-cols>.col {
flex: 0 0 33.333%;
max-width: 33.333%;
}
}
@media (max-width: 549px) {
.kn-col-5,
.kn-5-cols>.col {
flex: 0 0 50%;
max-width: 50%;
}
}
/* ==========================================================================
Timeline Milestones (Lịch sử và phát triển - Native Flatsome Shortcode)
========================================================================== */
.kn-flatsome-timeline {
display: flex;
justify-content: space-between;
gap: 24px;
padding: 30px 0 10px 0;
overflow: visible !important;
position: relative;
}
.kn-flatsome-timeline::before {
content: "";
position: absolute;
top: 50%;
left: 40px;
right: 40px;
height: 2px;
background-color: #e2e8f0;
z-index: 1;
pointer-events: none;
}
.kn-flatsome-timeline .timeline-item {
flex: 1 1 0;
position: relative;
text-align: left;
z-index: 2;
padding: 0;
margin: 0;
}
.kn-flatsome-timeline .timeline-item::before {
display: none !important;
}
.kn-timeline-card {
background-color: #ffffff;
border: 1px solid #eef2f6;
border-bottom: 4px solid #b61f3d;
border-radius: 16px;
padding: 38px 24px 26px 24px;
position: relative;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
height: 100%;
display: flex;
flex-direction: column;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.kn-timeline-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 30px rgba(176, 30, 56, 0.08);
border-color: rgba(176, 30, 56, 0.2);
}
.kn-timeline-badge {
position: absolute;
top: -15px;
left: 20px;
background-color: #b61f3d;
color: #ffffff;
font-weight: 700;
font-size: 15px;
padding: 5px 16px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(176, 30, 56, 0.3);
font-family: 'Montserrat', sans-serif;
letter-spacing: 0.5px;
}
.kn-timeline-title {
font-size: 18px;
font-weight: 700;
color: #172b4d;
margin: 0 0 12px 0;
font-family: 'Montserrat', sans-serif;
line-height: 1.3;
}
.kn-timeline-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.kn-timeline-list li {
font-size: 13.5px !important;
color: #475569 !important;
line-height: 1.55;
position: relative !important;
padding-left: 14px !important;
margin: 0;
}
.kn-timeline-list li::before {
content: "•" !important;
position: absolute !important;
left: 0 !important;
color: #64748b !important;
font-weight: bold;
}
@media (max-width: 849px) {
.kn-flatsome-timeline {
flex-direction: column;
gap: 28px;
padding: 10px 0;
}
.kn-flatsome-timeline::before {
display: none !important;
}
.kn-flatsome-timeline .timeline-item {
flex: 1 1 auto;
width: 100%;
}
.kn-timeline-card {
padding: 32px 20px 22px 20px;
}
}
/* ==========================================================================
FLATSOME SINGLE POST CUSTOM ELEMENTS
========================================================================== */
/* Custom Author Box styling */
.kn-author-box-wrapper .author-box {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 30px;
margin: 40px 0;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}
.kn-author-box-wrapper .author-box .flex-row {
align-items: center;
}
.kn-author-box-wrapper .author-name {
font-size: 18px;
font-weight: 700;
color: #172b4d;
text-transform: none;
margin-bottom: 10px;
}
.kn-author-box-wrapper .author-description {
font-size: 14.5px;
color: #4a5568;
line-height: 1.6;
margin-bottom: 12px;
}
.kn-author-box-wrapper .author-link {
font-size: 14px;
font-weight: 700;
color: #b61f3d;
text-decoration: none;
transition: color 0.2s ease;
}
.kn-author-box-wrapper .author-link:hover {
color: #94192e;
}
/* Related post card adjustments */
.kn-related-posts-header+* .box {
border: 1px solid #eaedf1;
border-radius: 12px;
overflow: hidden !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01);
background: #ffffff !important;
transition: all 0.3s ease;
}
.kn-related-posts-header+* .box:hover {
border-color: #cbd5e1 !important;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}
.kn-related-posts-header+* .box-text {
position: relative !important;
padding-bottom: 40px !important;
padding-left: 16px !important;
padding-right: 16px !important;
}
.kn-related-posts-header+* .box-text .post-title {
font-size: 15px !important;
font-weight: 700;
line-height: 1.4;
color: #172b4d !important;
margin-bottom: 8px;
padding: 30px 0 10px 0;
overflow: visible !important;
position: relative !important;
}
.kn-flatsome-timeline::before {
content: "";
position: absolute;
top: 50%;
left: 40px;
right: 40px;
height: 2px;
background-color: #e2e8f0;
z-index: 1;
pointer-events: none;
}
.kn-flatsome-timeline .timeline-item {
flex: 1 1 0;
position: relative;
text-align: left;
z-index: 2;
padding: 0;
margin: 0;
}
.kn-flatsome-timeline .timeline-item::before {
display: none !important;
}
.kn-timeline-card {
background-color: #ffffff;
border: 1px solid #eef2f6;
border-bottom: 4px solid #b61f3d;
border-radius: 16px;
padding: 38px 24px 26px 24px;
position: relative;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
height: 100%;
display: flex;
flex-direction: column;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.kn-timeline-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 30px rgba(176, 30, 56, 0.08);
border-color: rgba(176, 30, 56, 0.2);
}
.kn-timeline-badge {
position: absolute;
top: -15px;
left: 20px;
background-color: #b61f3d;
color: #ffffff;
font-weight: 700;
font-size: 15px;
padding: 5px 16px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(176, 30, 56, 0.3);
font-family: 'Montserrat', sans-serif;
letter-spacing: 0.5px;
}
.kn-timeline-title {
font-size: 18px;
font-weight: 700;
color: #172b4d;
margin: 0 0 12px 0;
font-family: 'Montserrat', sans-serif;
line-height: 1.3;
}
.kn-timeline-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.kn-timeline-list li {
font-size: 13.5px !important;
color: #475569 !important;
line-height: 1.55;
position: relative !important;
padding-left: 14px !important;
margin: 0;
}
.kn-timeline-list li::before {
content: "•" !important;
position: absolute !important;
left: 0 !important;
color: #64748b !important;
font-weight: bold;
}
@media (max-width: 849px) {
.kn-flatsome-timeline {
flex-direction: column;
gap: 28px;
padding: 10px 0;
}
.kn-flatsome-timeline::before {
display: none !important;
}
.kn-flatsome-timeline .timeline-item {
flex: 1 1 auto;
width: 100%;
}
.kn-timeline-card {
padding: 32px 20px 22px 20px;
}
}
/* ==========================================================================
FLATSOME SINGLE POST CUSTOM ELEMENTS
========================================================================== */
/* Custom Author Box styling */
.kn-author-box-wrapper .author-box {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 30px;
margin: 40px 0;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}
.kn-author-box-wrapper .author-box .flex-row {
align-items: center;
}
.kn-author-box-wrapper .author-name {
font-size: 18px;
font-weight: 700;
color: #172b4d;
text-transform: none;
margin-bottom: 10px;
}
.kn-author-box-wrapper .author-description {
font-size: 14.5px;
color: #4a5568;
line-height: 1.6;
margin-bottom: 12px;
}
.kn-author-box-wrapper .author-link {
font-size: 14px;
font-weight: 700;
color: #b61f3d;
text-decoration: none;
transition: color 0.2s ease;
}
.kn-author-box-wrapper .author-link:hover {
color: #94192e;
}
/* Related post card adjustments */
.kn-related-posts-header+* .box {
border: 1px solid #eaedf1;
border-radius: 12px;
overflow: hidden !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01);
background: #ffffff !important;
transition: all 0.3s ease;
}
.kn-related-posts-header+* .box:hover {
border-color: #cbd5e1 !important;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}
.kn-related-posts-header+* .box-text {
position: relative !important;
padding-bottom: 40px !important;
padding-left: 16px !important;
padding-right: 16px !important;
}
.kn-related-posts-header+* .box-text .post-title {
font-size: 15px !important;
font-weight: 700;
line-height: 1.4;
color: #172b4d !important;
margin-bottom: 8px;
}
.kn-related-posts-header+* .box-text .from_the_blog-excerpt {
font-size: 13px !important;
color: #64748b !important;
line-height: 1.5;
}
.kn-related-posts-header+* .box-text .post-meta {
position: absolute !important;
bottom: 12px !important;
right: 16px !important;
font-size: 12px !important;
color: #94a3b8 !important;
margin: 0;
}
/* Custom main menu active/hover underline gradient */
#header .nav-line-bottom>li>a:before,
#header .nav-line-grow>li>a:before,
#header .nav-line>li>a:before,
.header-nav.nav-line-bottom>li>a:before,
.header-nav.nav-line-grow>li>a:before,
.header-nav.nav-line>li>a:before {
background: linear-gradient(90deg, #b61f3d 0%, #00b4d8 100%) !important;
border-top-left-radius: 3px !important;
border-top-right-radius: 3px !important;
}
/* Custom Header Search Icon Box and Buttons (Phone & Register) */
.header-search.has-icon>a {
display: flex !important;
align-items: center;
justify-content: center;
width: 44px !important;
height: 44px !important;
background-color: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 14px;
padding: 0 !important;
color: #64748b !important;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
transition: all 0.2s ease;
}
.header-search.has-icon>a:hover {
border-color: #cbd5e1 !important;
color: #b61f3d !important;
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.05);
}
.header-search.has-icon>a i {
margin: 0 !important;
font-size: 16px !important;
line-height: 1 !important;
}
.header-button-1 .button {
background-color: #b61f3d !important;
border-color: #b61f3d !important;
color: #ffffff !important;
border-radius: 99px;
padding: 6px 22px 6px 10px !important;
text-transform: none !important;
display: inline-flex !important;
align-items: center;
letter-spacing: 0.5px;
box-shadow: 0 6px 20px rgba(176, 30, 56, 0.15);
transition: all 0.3s ease;
height: auto !important;
min-height: 44px !important;
}
.header-button-1 .button:hover {
background-color: #94192e !important;
border-color: #94192e !important;
box-shadow: 0 8px 24px rgba(176, 30, 56, 0.25);
transform: translateY(-1px);
}
.header-button-1 .button i {
background-color: rgba(0, 0, 0, 0.15) !important;
border-radius: 50%;
width: 30px !important;
height: 30px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
margin-right: 10px !important;
font-size: 13px !important;
color: #ffffff !important;
line-height: 1 !important;
top: 0 !important;
-webkit-mask: none !important;
mask: none !important;
}
.header-button-1 .button i:before {
content: "" !important;
display: inline-block;
width: 14px;
height: 14px;
background-color: #ffffff !important;
-webkit-mask-image: url("data:image/svg+xml,") !important;
mask-image: url("data:image/svg+xml,") !important;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
.header-button-2 .button {
background-color: #172b4d !important;
border-color: #172b4d !important;
color: #ffffff !important;
border-radius: 99px;
padding: 6px 24px !important;
text-transform: none !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
letter-spacing: 0.5px;
box-shadow: 0 6px 20px rgba(23, 43, 77, 0.12);
transition: all 0.3s ease;
height: auto !important;
min-height: 44px !important;
}
.header-button-2 .button:hover {
background-color: #0f1d34 !important;
border-color: #0f1d34 !important;
box-shadow: 0 8px 24px rgba(23, 43, 77, 0.22);
transform: translateY(-1px);
}
/* Custom main menu active/hover background color */
.header-nav li>a {
color: #22284a;
font-weight: 600;
font-size: .9em;
}
.header-nav li>a:hover {
color: var(--primary-color);
background-color: #F5F2FB !important;
}
/* Rotate dropdown arrow icon on hover */
.header-nav li a i.icon-angle-down,
.header-nav li a svg.icon-angle-down,
.header-nav li a [class*="icon-angle-down"] {
transition: transform 0.25s ease;
display: inline-block !important;
}
.header-nav li:hover>a i.icon-angle-down,
.header-nav li:hover>a svg.icon-angle-down,
.header-nav li:hover>a [class*="icon-angle-down"],
.header-nav li.nav-dropdown-active>a [class*="icon-angle-down"],
.header-nav li.current-dropdown>a [class*="icon-angle-down"] {
transform: rotate(180deg);
}
.nav .nav-dropdown {
padding-top: 10px !important;
padding-bottom: 10px !important;
margin-left: 15px;
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
}
.header:not(.transparent) .header-bottom-nav.nav>li {
margin: 0;
}
.header:not(.transparent) .header-bottom-nav.nav>li>a {
padding-left: 10px !important;
padding-right: 10px !important;
transition: background-color 0.2s ease, color 0.2s ease;
}
/* Custom Submenu Dropdown Animation (Smooth Slide Up & Fade In) */
.header-nav .nav-dropdown {
margin-top: 15px;
pointer-events: none;
transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
margin-top 0.3s cubic-bezier(0.16, 1, 0.3, 1),
visibility 0.3s ease;
}
.header-nav li:hover>.nav-dropdown,
.header-nav li.has-dropdown:hover>.nav-dropdown,
.header-nav li.current-dropdown>.nav-dropdown,
.header-nav li.active>.nav-dropdown,
.header-nav li.show>.nav-dropdown,
.header-nav li.nav-dropdown-active>.nav-dropdown {
margin-top: 0 !important;
pointer-events: auto;
}
/* ==========================================================================
Custom Navigation Mega Menu (Kỳ Nguyên Abis Navigation Mega Menu)
========================================================================== */
/* Mega Menu Row */
.kn-mega-menu-row {
background-color: #ffffff;
padding: 30px 25px;
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
/* Mega Menu Columns */
.kn-mega-menu-col {
padding: 10px 20px;
transition: all 0.3s ease;
box-sizing: border-box;
}
/* Column Wrapper styling */
.kn-mega-column-wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
/* Group Sub-Label (e.g. "Theo band điểm") */
.kn-mega-menu-col .grp-label {
display: block;
font-family: 'Montserrat', sans-serif;
font-size: 11px;
font-weight: 700;
color: #5a6a85;
/* Slate/Dark Grey */
text-transform: uppercase;
letter-spacing: 0.5px;
margin-top: 20px;
/* Spacing between groups */
margin-bottom: 6px;
}
/* First group label inside the wrapper (right under divider) should have less margin-top */
.kn-mega-column-wrapper>p:first-child .grp-label,
.kn-mega-column-wrapper>.grp-label:first-child {
margin-top: 8px;
}
/* Links Wrapper */
.kn-mega-links {
list-style: none;
padding: 0;
margin: 0;
}
.kn-mega-links li {
margin: 0;
padding: 0;
}
/* Mega Menu Links styling */
.kn-mega-links a,
.kn-mega-menu-col>a {
display: block !important;
font-family: 'Montserrat', sans-serif !important;
font-size: 13.5px !important;
font-weight: 500;
color: #2c3e50 !important;
/* Elegant slate blue-grey */
padding: 5px 0;
text-decoration: none;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
border-bottom: none;
background: transparent !important;
}
/* Hover effects for links */
.kn-mega-links a:hover,
.kn-mega-menu-col>a:hover {
color: #b61f3d !important;
/* Primary Red Crimson */
padding-left: 6px !important;
font-weight: 600;
}
/* Divider borders for columns on Desktop */
@media (min-width: 850px) {
.kn-mega-menu-row {
flex-direction: row;
flex-wrap: nowrap;
}
.kn-mega-menu-col {
flex: 0 0 20%;
max-width: 20%;
width: 20%;
}
/* Subtle divider border between columns */
.kn-mega-menu-col:not(:last-child) {
border-right: 1px solid #f1f5f9;
}
}
/* Mobile Responsive */
@media (max-width: 849px) {
.kn-mega-menu-row {
padding: 20px 15px;
flex-direction: column;
}
.kn-mega-menu-col {
flex: 0 0 100%;
max-width: 100%;
width: 100%;
border-right: none;
margin-bottom: 25px;
border-bottom: 1px solid #f1f5f9;
padding-bottom: 15px;
}
.kn-mega-menu-col:last-child {
margin-bottom: 0;
border-bottom: none;
padding-bottom: 0;
}
.kn-mega-menu-col h4 {
margin-bottom: 12px;
}
}
/* ==========================================================================
Trending Tab Transition Animations (Flatsome Tabs & Child Theme)
========================================================================== */
/* 1. Fade In Up (Apple & Linear UI) -> class="tab-anim-fade-up" */
@keyframes fsTabFadeInUp {
from {
opacity: 0;
transform: translateY(12px) scale(0.995);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.tab-anim-fade-up .tab-panels > .panel.active {
animation: fsTabFadeInUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
will-change: transform, opacity;
}
/* 2. Scale In (Spring / macOS Pop) -> class="tab-anim-scale" */
@keyframes fsTabScaleIn {
from {
opacity: 0;
transform: scale(0.96);
}
to {
opacity: 1;
transform: scale(1);
}
}
.tab-anim-scale .tab-panels > .panel.active {
animation: fsTabScaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}
/* 3. Slide In (Mobile Native App swipe) -> class="tab-anim-slide" */
@keyframes fsTabSlideIn {
from {
opacity: 0;
transform: translateX(18px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.tab-anim-slide .tab-panels > .panel.active {
animation: fsTabSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}
/* 4. Glass Blur In (iOS Glassmorphism) -> class="tab-anim-blur" */
@keyframes fsTabBlurIn {
from {
opacity: 0;
filter: blur(6px);
transform: scale(0.98);
}
to {
opacity: 1;
filter: blur(0);
transform: scale(1);
}
}
.tab-anim-blur .tab-panels > .panel.active {
animation: fsTabBlurIn 0.35s ease-out forwards !important;
}
/* 5. 3D Flip In (Card Flip) -> class="tab-anim-flip" */
@keyframes fsTabFlipIn {
from {
opacity: 0;
transform: perspective(600px) rotateX(10deg);
}
to {
opacity: 1;
transform: perspective(600px) rotateX(0deg);
}
}
.tab-anim-flip .tab-panels > .panel.active {
animation: fsTabFlipIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}
/* ==========================================================================
Flatsome Tabgroup Style: Segmented (Pill Box) -> [tabgroup style="segmented"]
========================================================================== */
.tabbed-content > .nav.nav-segmented,
.nav.nav-segmented {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 4px;
background: #f1f5f9 !important;
border: 1px solid #e2e8f0 !important;
padding: 4px !important;
border-radius: 8px !important;
box-sizing: border-box !important;
width: auto !important;
max-width: max-content !important;
flex: 0 0 auto !important;
flex-wrap: wrap;
margin: 0 auto 25px 0 !important;
}
.tabbed-content > .nav.nav-segmented.nav-center,
.nav.nav-segmented.nav-center {
margin-left: auto !important;
margin-right: auto !important;
}
.tabbed-content > .nav.nav-segmented.nav-left,
.nav.nav-segmented.nav-left {
margin-left: 0 !important;
margin-right: auto !important;
}
.tabbed-content > .nav.nav-segmented.nav-right,
.nav.nav-segmented.nav-right {
margin-left: auto !important;
margin-right: 0 !important;
}
.nav.nav-segmented > li {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
border: none !important;
background: transparent !important;
}
.nav.nav-segmented > li > a {
display: inline-flex !important;
align-items: center;
justify-content: center;
background: transparent !important;
border: none !important;
border-radius: 6px !important;
padding: 8px 18px !important;
font-weight: 700 !important;
font-size: 14px !important;
color: #475569 !important;
cursor: pointer;
transition: all 0.2s ease-in-out;
outline: none;
box-shadow: none !important;
text-transform: none !important;
line-height: 1.3 !important;
min-height: 0 !important;
height: auto !important;
margin: 0 !important;
box-sizing: border-box !important;
-webkit-appearance: none;
}
.nav.nav-segmented > li > a:hover,
.nav.nav-segmented > li > a:focus {
background: rgba(255, 255, 255, 0.6) !important;
border: none !important;
color: #1e293b !important;
outline: none;
box-shadow: none !important;
}
.nav.nav-segmented > li.active > a,
.nav.nav-segmented > li.current > a {
background: #ffffff !important;
border: none !important;
color: var(--fs-color-primary, #2563eb) !important;
font-weight: 700 !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
outline: none;
}
@media (max-width: 767px) {
.tabbed-content > .nav.nav-segmented,
.nav.nav-segmented {
display: inline-flex !important;
flex-flow: row nowrap !important;
align-items: center !important;
justify-content: flex-start !important;
width: max-content !important;
max-width: 100% !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
padding: 4px !important;
margin-left: 0 !important;
margin-right: auto !important;
margin-bottom: 15px !important;
}
.nav.nav-segmented::-webkit-scrollbar {
display: none !important;
}
.nav.nav-segmented > li {
flex-shrink: 0 !important;
}
.nav.nav-segmented > li > a {
padding: 7px 14px !important;
font-size: 13px !important;
white-space: nowrap !important;
}
}
/* ==========================================================================
Tab Content Layout .home-khoahoc (Card & Meta Table Content)
========================================================================== */
.home-khoahoc {
width: 100%;
max-width: 960px;
margin: 30px auto;
font-family: 'Montserrat', sans-serif;
}
/* Card Main Layout & Panel */
.home-khoahoc .tab-panels {
background: #ffffff !important;
border: 1px solid #eef2f6 !important;
border-radius: 20px !important;
padding: 24px !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02) !important;
margin: 0 !important;
}
.home-khoahoc .tab-panels .panel {
padding: 0 !important;
margin: 0 !important;
border: none !important;
}
.home-khoahoc .tab-panels .row,
.home-khoahoc .tab-panels .col,
.home-khoahoc .tab-panels .col-inner {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.home-khoahoc .tab-panels .panel > .row {
align-items: center !important;
margin-bottom: 0 !important;
}
.home-khoahoc .tab-panels .panel > .row > .col {
display: flex;
flex-direction: column;
justify-content: center;
}
/* Left Image Column */
.home-khoahoc .tab-panels .col:first-child .img,
.home-khoahoc .tab-panels .col:first-child .img-inner,
.home-khoahoc .tab-panels .col:first-child .ux-image {
border-radius: 16px !important;
overflow: hidden !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.home-khoahoc .tab-panels .col:first-child img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: 16px !important;
display: block !important;
margin-bottom: 0 !important;
}
/* Right Details Column */
.home-khoahoc .tab-panels .col:last-child,
.home-khoahoc .tab-panels .col:last-child > .col-inner {
display: flex;
flex-direction: column;
justify-content: flex-start;
position: relative;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
/* Header & Title */
.home-khoahoc .stack,
.home-khoahoc .stack-row {
margin-bottom: 12px !important;
align-items: flex-start !important;
}
.home-khoahoc .stack h3,
.home-khoahoc .tab-panels h3,
.home-khoahoc .tab-panels .col:last-child > p:first-of-type {
font-size: 20px !important;
font-weight: 700 !important;
color: #172b4d !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
line-height: 1.35 !important;
}
/* HOT Badge */
.home-khoahoc .stack .button,
.home-khoahoc .stack [id^="btn-"],
.home-khoahoc .tab-panels .col:last-child p.hot,
.home-khoahoc .tab-panels .col:last-child .hot {
background-color: #b61f3d !important;
border-color: #b61f3d !important;
color: #ffffff !important;
font-size: 11px !important;
font-weight: 700 !important;
padding: 5px 14px !important;
border-radius: 6px !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
line-height: 1.4 !important;
min-height: 0 !important;
height: auto !important;
margin: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: fit-content !important;
box-shadow: none !important;
flex-shrink: 0 !important;
z-index: 2;
}
/* Meta Box Table Container (Exact Match to Design Screenshot) */
.home-khoahoc div[id^="table-"],
.home-khoahoc .ux_table,
.home-khoahoc .col-inner > div:has(> table) {
background: #f4f7fc !important;
border-radius: 16px !important;
padding: 4px 20px !important;
margin: 12px 0 16px 0 !important;
border: 1px solid #e8edf7 !important;
box-shadow: none !important;
overflow: hidden !important;
}
/* Table and Rows Reset & Styling */
.home-khoahoc table {
width: 100% !important;
margin: 0 !important;
border-collapse: collapse !important;
border-spacing: 0 !important;
border: none !important;
background: transparent !important;
box-shadow: none !important;
}
.home-khoahoc table thead {
display: none !important;
}
.home-khoahoc table tr,
.home-khoahoc table tbody tr,
.home-khoahoc table tbody tr:nth-child(even) td,
.home-khoahoc table tbody tr:nth-child(odd) td {
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
}
.home-khoahoc table tbody tr,
.home-khoahoc table tfoot tr {
border-bottom: 1px solid #e5ecf6 !important;
border-top: none !important;
border-left: none !important;
border-right: none !important;
}
.home-khoahoc table tbody tr:last-child,
.home-khoahoc table tfoot tr:last-child,
.home-khoahoc table tbody + tfoot tr:last-child {
border-bottom: none !important;
}
.home-khoahoc table td,
.home-khoahoc table th {
padding: 10px 0 !important;
border: none !important;
background: transparent !important;
vertical-align: middle !important;
line-height: 1.45 !important;
}
.home-khoahoc table td:first-child,
.home-khoahoc table th:first-child {
width: 125px !important;
font-size: 14.5px !important;
font-weight: 700 !important;
color: #172b4d !important;
text-align: left !important;
white-space: nowrap !important;
padding-right: 15px !important;
}
.home-khoahoc table td:first-child::after {
content: ":";
}
.home-khoahoc table td:last-child,
.home-khoahoc table th:last-child {
font-size: 14.5px !important;
color: #4a5568 !important;
font-weight: 500 !important;
text-align: left !important;
padding-left: 0 !important;
}
.home-khoahoc table tfoot td:last-child,
.home-khoahoc table tbody tr:last-child td:last-child,
.home-khoahoc table tfoot tr:last-child td:last-child,
.home-khoahoc table tr.tuition-row td:last-child {
font-weight: 700 !important;
color: #b61f3d !important;
}
/* Action Buttons Bottom Row */
.home-khoahoc .col-inner > .row:last-child,
.home-khoahoc .row-inner {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.home-khoahoc .col-inner > .row:last-child .col,
.home-khoahoc .row-inner .col {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.home-khoahoc .col-inner > .row:last-child .button.is-outline,
.home-khoahoc .row-inner .col-inner:first-child .button {
background: transparent !important;
border: 1.5px solid #172b4d !important;
color: #172b4d !important;
border-radius: 8px !important;
font-weight: 700 !important;
padding: 10px 20px !important;
font-size: 14px !important;
text-transform: none !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
margin: 0 !important;
display: block;
width: 100%;
text-align: center;
}
.home-khoahoc .col-inner > .row:last-child .button.is-outline:hover,
.home-khoahoc .row-inner .col-inner:first-child .button:hover {
background: #172b4d !important;
color: #ffffff !important;
transform: translateY(-2px);
}
.home-khoahoc .col-inner > .row:last-child .button:not(.is-outline):not(.is-small),
.home-khoahoc .row-inner .col-inner:last-child .button {
background: #172b4d !important;
border: 1.5px solid #172b4d !important;
color: #ffffff !important;
border-radius: 8px !important;
font-weight: 700 !important;
padding: 10px 20px !important;
font-size: 14px !important;
text-transform: none !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
margin: 0 !important;
display: block;
width: 100%;
text-align: center;
}
.home-khoahoc .col-inner > .row:last-child .button:not(.is-outline):not(.is-small):hover,
.home-khoahoc .row-inner .col-inner:last-child .button:hover {
background: #2c3c7a !important;
border-color: #2c3c7a !important;
color: #ffffff !important;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(23, 43, 77, 0.15);
}
/* Responsive Styles for .home-khoahoc & Mobile UX */
@media (max-width: 767px) {
.home-khoahoc {
margin: 15px auto !important;
padding: 0 5px !important;
}
/* Tab Bar Mobile Scroll */
.tabbed-content > .nav.nav-segmented,
.nav.nav-segmented {
display: flex !important;
flex-flow: row nowrap !important;
align-items: center !important;
justify-content: flex-start !important;
width: 100% !important;
max-width: 100% !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
padding: 4px !important;
margin-left: 0 !important;
margin-right: 0 !important;
margin-bottom: 16px !important;
gap: 6px !important;
box-sizing: border-box !important;
}
.nav.nav-segmented::-webkit-scrollbar {
display: none !important;
}
.nav.nav-segmented > li {
flex-shrink: 0 !important;
}
.nav.nav-segmented > li > a {
padding: 8px 14px !important;
font-size: 13px !important;
white-space: nowrap !important;
}
/* Card Box on Mobile */
.home-khoahoc .tab-panels {
padding: 16px !important;
border-radius: 16px !important;
}
/* Image Spacing & Proportion on Mobile */
.home-khoahoc .tab-panels .col:first-child {
margin-bottom: 16px !important;
width: 100% !important;
}
.home-khoahoc .tab-panels .col:first-child .img-inner {
padding-top: 56.25% !important;
border-radius: 12px !important;
min-height: 180px !important;
max-height: 240px !important;
}
.home-khoahoc .tab-panels .col:first-child img {
border-radius: 12px !important;
}
/* Header & Title on Mobile */
.home-khoahoc .stack,
.home-khoahoc .stack-row {
gap: 10px !important;
margin-bottom: 12px !important;
}
.home-khoahoc .stack h3,
.home-khoahoc .tab-panels h3,
.home-khoahoc .tab-panels .col:last-child > p:first-of-type {
font-size: 17px !important;
line-height: 1.35 !important;
}
/* Table Meta Box on Mobile */
.home-khoahoc div[id^="table-"],
.home-khoahoc .ux_table {
padding: 4px 16px !important;
margin: 12px 0 16px 0 !important;
border-radius: 12px !important;
}
.home-khoahoc table td,
.home-khoahoc table th {
padding: 8px 0 !important;
font-size: 13.5px !important;
}
.home-khoahoc table td:first-child,
.home-khoahoc table th:first-child {
width: 95px !important;
font-size: 13.5px !important;
padding-right: 8px !important;
}
.home-khoahoc table td:last-child,
.home-khoahoc table th:last-child {
font-size: 13.5px !important;
}
/* 2 Bottom Buttons Spacing on Mobile */
.home-khoahoc .col-inner > .row:last-child {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.home-khoahoc .col-inner > .row:last-child .col {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
margin-bottom: 0 !important;
padding: 0 !important;
}
.home-khoahoc .col-inner > .row:last-child .button {
padding: 10px 16px !important;
font-size: 14px !important;
}
}
/* Custom Why Choose Section Styles */
.kn-why-choose-media-wrapper {
position: relative;
width: 100%;
}
.kn-why-choose-image-item {
display: none;
animation: knFadeIn 0.5s ease forwards;
}
.kn-why-choose-image-item.active {
display: block;
}
@keyframes knFadeIn {
from {
opacity: 0;
transform: scale(0.98);
}
to {
opacity: 1;
transform: scale(1);
}
}
.kn-why-title {
color: #172b4d;
font-weight: 700;
font-size: 32px;
margin-bottom: 25px;
}
.kn-why-reasons-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.kn-why-reason-item {
background: #ffffff;
border: 1.5px solid #edf2f7;
border-radius: 12px;
overflow: hidden;
transition: all 0.3s ease;
cursor: pointer;
}
.kn-why-reason-item.active {
border-color: #b61f3d;
background: #ffffff;
box-shadow: 0 8px 24px rgba(182, 31, 61, 0.08);
}
.kn-why-reason-title {
font-size: 16px;
font-weight: 700;
color: #2c3c7a;
margin: 0;
transition: color 0.3s ease;
}
.kn-why-reason-item.active .kn-why-reason-title {
color: #b61f3d;
}
.kn-why-reason-body {
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
}
.kn-why-reason-item.active .kn-why-reason-body {
max-height: 1200px;
opacity: 1;
}
.kn-why-reason-body p {
color: #4a5568;
font-size: 15px;
line-height: 1.6;
margin: 0;
}
/* Responsive for Why Choose Section */
@media (max-width: 849px) {
.kn-why-choose-media-wrapper {
display: none !important;
}
.kn-why-title {
font-size: 22px;
margin-bottom: 16px;
text-align: center;
}
}
@media (max-width: 550px) {
.kn-why-reason-title {
font-size: 14.5px;
}
}
/* Grayscale logos with transition to color on hover */
.kn-logo-partner-row .ux-logo {
filter: grayscale(100%);
opacity: 0.6;
transition: filter 0.3s ease, opacity 0.3s ease;
}
.kn-logo-partner-row .ux-logo:hover {
filter: grayscale(0%);
opacity: 1;
}
/* Logo Đối tác Slider Card Styling (.logo-doitac) */
.logo-doitac {
padding: 15px 0 !important;
}
.logo-doitac .ux-logo {
background: #ffffff !important;
border: 1px solid #f1f5f9 !important;
border-radius: 20px;
padding: 28px 20px !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
display: flex !important;
align-items: center;
justify-content: center;
min-height: 120px !important;
height: 100% !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-sizing: border-box !important;
}
.logo-doitac .ux-logo:hover {
border-color: #e2e8f0 !important;
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}
.logo-doitac .ux-logo .ux-logo-link {
display: flex !important;
align-items: center;
justify-content: center;
width: 100% !important;
height: 100% !important;
}
.logo-doitac .ux-logo img,
.logo-doitac .ux-logo-image {
max-height: 48px !important;
max-width: 80% !important;
width: auto !important;
height: auto !important;
object-fit: contain;
transition: all 0.3s ease;
filter: grayscale(100%);
opacity: 0.65;
}
.logo-doitac .ux-logo:hover img,
.logo-doitac .ux-logo:hover .ux-logo-image {
filter: grayscale(0%);
opacity: 1;
}
@media (max-width: 550px) {
.logo-doitac .ux-logo {
border-radius: 16px;
padding: 18px 12px !important;
min-height: 95px !important;
}
.logo-doitac .ux-logo img,
.logo-doitac .ux-logo-image {
max-height: 38px !important;
}
}
/* Blog badge default color fallback & new category background colors */
.kn-blog-badge {
background: #2c3c7a;
/* Default background fallback */
}
.kn-blog-badge.badge-tai-lieu-ielts {
background: #2c3c7a;
/* Navy */
}
.kn-blog-badge.badge-tu-vung-ielts {
background: #00bed2;
/* Teal */
}
.kn-blog-badge.badge-ngu-phap-ielts {
background: #b61f3d;
/* Crimson Red */
}
.kn-blog-badge.badge-kinh-nghiem-thi {
background: #2563eb;
/* Royal Blue */
}
/* Accordion questions font weight */
.kn-faq-accordion .accordion-title {
font-weight: 600;
}
/* Custom button classes to match mockups */
.kn-btn-crimson {
background-color: #b01e38;
border-color: #b01e38;
color: #ffffff;
}
.kn-btn-crimson:hover {
background-color: #8c1428;
border-color: #8c1428;
color: #ffffff;
transform: translateY(-2px);
}
.kn-btn-navy {
background-color: #0b2240;
border-color: #0b2240;
color: #ffffff;
}
.kn-btn-navy:hover {
background-color: #051224;
border-color: #051224;
color: #ffffff;
transform: translateY(-2px);
}
/* Custom HTML tab rows and columns to prevent nested shortcode bugs */
.kn-tab-row {
display: flex;
flex-wrap: wrap;
align-items: center;
margin: 0 -15px;
}
.kn-tab-col-left {
flex: 0 0 58.33%;
max-width: 58.33%;
padding: 0 15px;
box-sizing: border-box;
}
.kn-tab-col-right {
flex: 0 0 41.67%;
max-width: 41.67%;
padding: 0 15px;
box-sizing: border-box;
}
.kn-tab-row-center {
display: flex;
justify-content: center;
align-items: center;
padding: 30px 0;
width: 100%;
}
.kn-tab-col-center {
flex: 0 0 75%;
max-width: 75%;
text-align: center;
box-sizing: border-box;
}
@media (max-width: 767px) {
.kn-tab-col-left,
.kn-tab-col-right {
flex: 0 0 100%;
max-width: 100%;
margin-bottom: 20px;
}
.kn-tab-col-right {
margin-bottom: 0;
}
.kn-tab-col-center {
flex: 0 0 100%;
max-width: 100%;
}
}
/* ==========================================================================
ABOUT US PAGE (POST 49) CUSTOM STYLING OVERRIDES
========================================================================== */
/* 1. Vision, Mission & Core Values Cards */
.kn-vision-card {
background: #ffffff;
border-radius: 16px;
padding: 35px 25px;
text-align: center;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.015);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.kn-vision-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}
.kn-vision-card.card-navy {
border-left: 4px solid #2c3c7a;
border-bottom: 4px solid #2c3c7a;
}
.kn-vision-card.card-red {
border-left: 4px solid #b61f3d;
border-bottom: 4px solid #b61f3d;
}
.kn-vision-card.card-cyan {
border-left: 4px solid #00bed2;
border-bottom: 4px solid #00bed2;
}
.kn-vision-card h3 {
color: #2c3c7a;
font-weight: 700;
font-size: 20px;
margin-bottom: 12px;
font-family: 'Montserrat', sans-serif;
text-transform: none;
}
.kn-vision-card p {
font-size: 14px;
color: #555;
line-height: 1.65;
margin: 0;
}
/* 2. Premium Horizontal Timeline */
/* 2. History & Development Timeline */
.kn-history-timeline-row,
.kn-flatsome-timeline {
position: relative;
padding-top: 25px;
padding-bottom: 25px;
}
.kn-history-timeline-row::before,
.kn-flatsome-timeline::before {
content: "";
position: absolute;
top: 50%;
left: 4%;
right: 4%;
height: 2px;
background: #e2e8f0;
z-index: 0;
transform: translateY(-50%);
}
.kn-history-timeline-row > .col {
position: relative;
z-index: 1;
display: flex;
}
.kn-history-timeline-row > .col > .col-inner {
width: 100%;
height: 100%;
display: flex;
}
.kn-history-card,
.kn-timeline-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-bottom: 5px solid #b61f3d;
border-radius: 16px;
padding: 38px 22px 28px 22px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
position: relative;
width: 100%;
height: 100%;
min-height: 220px;
display: flex;
flex-direction: column;
box-sizing: border-box;
text-align: left;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.kn-history-card:hover,
.kn-timeline-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}
.kn-history-badge,
.kn-timeline-badge {
position: absolute;
top: -16px;
left: 20px;
background: #b61f3d;
color: #ffffff;
padding: 6px 14px;
font-size: 15px;
font-weight: 700;
font-family: 'Montserrat', sans-serif;
border-radius: 8px;
line-height: 1;
display: inline-block;
box-shadow: 0 2px 8px rgba(182, 31, 61, 0.25);
margin: 0;
z-index: 2;
}
.kn-history-title,
.kn-timeline-title {
color: #1e293b;
font-size: 18px;
font-weight: 800;
margin: 0 0 14px 0;
font-family: 'Montserrat', sans-serif;
text-transform: none;
line-height: 1.3;
}
.kn-history-list,
.kn-timeline-list {
list-style: none;
padding: 0;
margin: 0;
flex-grow: 1;
}
.kn-history-list li,
.kn-timeline-list li {
font-size: 14px !important;
color: #475569 !important;
line-height: 1.6;
margin-bottom: 10px;
position: relative !important;
padding-left: 16px !important;
}
.kn-history-list li:last-child,
.kn-timeline-list li:last-child {
margin-bottom: 0;
}
.kn-history-list li::before,
.kn-timeline-list li::before {
content: "•" !important;
position: absolute !important;
left: 0 !important;
color: #64748b !important;
font-weight: bold;
font-size: 15px !important;
line-height: 1.4;
}
/* 3. About Teacher Slider Alignments & Equal Heights */
.kn-about-teacher-card {
display: flex;
flex-direction: column;
height: 100%;
box-sizing: border-box;
}
.kn-about-teacher-image {
position: relative;
width: 100%;
padding-top: 85%;
margin-bottom: 15px;
border-radius: 8px;
overflow: hidden;
background: #f4f6f8;
flex-shrink: 0;
}
.kn-about-teacher-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.kn-about-teacher-info {
display: flex;
flex-direction: column;
flex-grow: 1;
box-sizing: border-box;
}
.kn-about-teacher-info .kn-about-teacher-name,
.kn-about-teacher-info h1,
.kn-about-teacher-info h2,
.kn-about-teacher-info h3,
.kn-about-teacher-info h4,
.kn-about-teacher-info h5,
.kn-about-teacher-info h6 {
font-size: 17px;
font-weight: 700;
color: #2c3c7a;
font-family: 'Montserrat', sans-serif;
text-transform: none;
line-height: 1.4;
height: 48px;
min-height: 48px;
max-height: 48px;
margin: 0 0 6px 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.kn-about-teacher-meta {
color: #b61f3d;
font-size: 13px;
font-weight: 700;
line-height: 1.4;
height: 38px;
min-height: 38px;
max-height: 38px;
margin: 0 0 10px 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.kn-about-teacher-desc {
color: #666;
font-size: 13px;
line-height: 1.5;
height: 60px;
min-height: 60px;
max-height: 60px;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* 4. USP Section Alignments & Cards Styling */
.kn-about-usp-row .col-inner {
height: 100%;
display: flex;
flex-direction: column;
}
.kn-about-usp-card {
background: #ffffff;
border: 1px solid #fee2e2;
border-radius: 16px;
padding: 28px 24px;
box-shadow: 0 10px 25px rgba(182, 31, 61, 0.08), 0 4px 10px rgba(0, 0, 0, 0.02);
margin-bottom: 25px;
height: 100%;
display: flex;
flex-direction: column;
box-sizing: border-box;
text-align: left;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.kn-about-usp-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(182, 31, 61, 0.14), 0 6px 15px rgba(0, 0, 0, 0.03);
border-color: rgba(182, 31, 61, 0.28);
}
.kn-about-usp-badge {
color: #b61f3d;
font-size: 14px;
font-weight: 700;
font-family: 'Montserrat', sans-serif;
margin-bottom: 12px;
display: block;
letter-spacing: 0.5px;
}
.kn-about-usp-card h3 {
color: #1a202c;
font-size: 18px;
font-weight: 800;
margin: 0 0 12px 0;
font-family: 'Montserrat', sans-serif;
text-transform: none;
line-height: 1.35;
min-height: 48px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.kn-about-usp-card p {
color: #64748b;
font-size: 14px;
line-height: 1.6;
margin: 0;
flex-grow: 1;
}
/* 5. Parent Blue Review Cards */
.kn-blue-review-card {
background: #2c3c7a;
border-radius: 16px;
padding: 30px 24px 28px 24px;
height: 100%;
min-height: 220px;
border: none;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 8px 25px rgba(44, 60, 122, 0.15);
box-sizing: border-box;
text-align: left;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.kn-blue-review-card:hover {
transform: translateY(-5px);
box-shadow: 0 14px 35px rgba(44, 60, 122, 0.25);
}
.kn-blue-review-stars {
display: none !important;
}
.kn-blue-review-quote {
color: #e2e8f0;
font-size: 14.5px;
line-height: 1.65;
font-style: italic;
margin-bottom: 22px;
flex-grow: 1;
text-align: left;
}
.kn-blue-review-author {
color: #ffffff;
font-size: 16px;
font-weight: 700;
font-family: 'Montserrat', sans-serif;
margin: 0;
border-top: none;
padding-top: 0;
text-align: left;
line-height: 1.35;
}
/* ==========================================================================
MOBILE VIEWPORT OPTIMIZATIONS (MAX-WIDTH: 767PX)
========================================================================== */
@media (max-width: 767px) {
/* 1. Vision Cards spacing */
.kn-vision-card {
margin-bottom: 20px;
}
/* 2. Timeline Carousel Scroll on Mobile */
.kn-flatsome-timeline {
padding: 40px 10px 10px;
display: flex;
flex-direction: row;
gap: 15px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.kn-flatsome-timeline::before {
display: none !important;
/* Hide line on mobile to keep card carousel look clean */
}
.kn-flatsome-timeline .timeline-item {
flex: 0 0 250px;
max-width: 250px;
scroll-snap-align: center;
margin: 0;
padding: 0;
}
.kn-flatsome-timeline .timeline-item::before {
display: none !important;
/* Hide dots on mobile carousel view */
}
/* 3. Teacher card descriptions and image heights on mobile */
.kn-about-teacher-image {
padding-top: 85%;
}
.kn-about-teacher-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.kn-about-teacher-info .kn-about-teacher-name,
.kn-about-teacher-info h1,
.kn-about-teacher-info h2,
.kn-about-teacher-info h3,
.kn-about-teacher-info h4,
.kn-about-teacher-info h5,
.kn-about-teacher-info h6 {
height: 48px;
min-height: 48px;
max-height: 48px;
}
.kn-about-teacher-meta {
height: 38px;
min-height: 38px;
max-height: 38px;
}
.kn-about-teacher-desc {
height: 60px;
min-height: 60px;
max-height: 60px;
}
/* 4. USP Cards vertical margins on mobile */
.kn-about-usp-card {
margin-bottom: 20px;
}
.kn-about-usp-card h3 {
min-height: auto;
}
/* 5. Course card vertical margins on mobile */
.kn-course-card-col {
margin-bottom: 20px;
}
.kn-course-card-col:last-child {
margin-bottom: 0;
}
/* 5. Tech Column gaps on mobile */
.kn-about-tech-col {
margin-bottom: 20px;
padding: 15px;
}
.kn-about-tech-col:last-child {
margin-bottom: 0;
}
/* 6. Target Audience Gaps */
.kn-about-target-row:last-of-type .col:last-child {
margin-bottom: 0;
}
/* 7. USP Gaps */
.kn-about-usp-row .col:last-child {
margin-bottom: 0;
}
/* 8. Partners & Press Columns Gaps on mobile */
.kn-partners-row .col,
.kn-press-row .col {
margin-bottom: 12px;
}
/* 9. Reviews Gaps on mobile */
.kn-reviews-container-wrapper .row .col {
margin-bottom: 15px;
}
.kn-reviews-container-wrapper .row .col:last-child {
margin-bottom: 0;
}
/* 10. Action Cards Gaps on mobile */
.kn-action-cards-row .col {
margin-bottom: 20px;
}
.kn-action-cards-row .col:last-child {
margin-bottom: 0;
}
/* 11. Custom button widths on mobile */
.kn-about-cta-btn {
width: 100%;
text-align: center;
}
}
/* ==========================================================================
CAMPUS CHI NHÁNH / HỆ THỐNG CƠ SỞ CUSTOM STYLING (CPT AND INTERACTIVE MAP)
========================================================================== */
/* 1. CPT [kn_campuses] Card heights & spacings (Theme Child Guide 2.9) */
.kn-campus-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.kn-campus-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}
.kn-campus-title {
color: #2c3c7a;
font-size: 16px;
font-weight: 700;
margin-bottom: 10px;
font-family: 'Montserrat', sans-serif;
min-height: 24px;
}
.kn-campus-address {
font-size: 13.5px;
color: #4a5568;
line-height: 1.55;
margin-bottom: 8px;
min-height: 54px;
}
.kn-campus-phone {
font-size: 13.5px;
color: #4a5568;
margin-bottom: 15px;
min-height: 20px;
}
/* 2. Interactive Map Layout (.kn-campus-system) on Contact Page */
.kn-campus-system {
margin-top: 10px;
}
.kn-campus-list {
max-height: 480px;
overflow-y: auto;
padding-right: 8px;
}
/* Custom Scrollbar for Campus List */
.kn-campus-list::-webkit-scrollbar {
width: 6px;
}
.kn-campus-list::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 10px;
}
.kn-campus-list::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 10px;
}
.kn-campus-list::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
.kn-campus-item {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 20px;
margin-bottom: 12px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.01);
text-align: left;
}
.kn-campus-item:hover {
transform: translateX(4px);
border-color: #cbd5e1;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}
.kn-campus-item.active {
background: #fff8f9;
border-color: #b61f3d;
box-shadow: 0 4px 20px rgba(182, 31, 61, 0.06);
}
.kn-campus-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
flex-wrap: wrap;
gap: 8px;
}
.kn-campus-badge {
background: #2c3c7a;
color: #ffffff;
font-size: 11px;
font-weight: 700;
padding: 3px 10px;
border-radius: 20px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.kn-campus-item.active .kn-campus-badge {
background: #b61f3d;
}
.kn-campus-header h4 {
font-size: 15px;
font-weight: 700;
color: #2c3c7a;
margin: 0;
font-family: 'Montserrat', sans-serif;
}
.kn-campus-item.active .kn-campus-header h4 {
color: #172b4d;
}
.kn-campus-item .kn-campus-address {
font-size: 13px;
color: #4a5568;
line-height: 1.5;
margin: 0 0 10px 0;
min-height: auto;
/* Reset inside map list */
}
.kn-campus-map-btn {
display: inline-flex;
align-items: center;
font-size: 12px;
font-weight: 700;
color: #b61f3d;
text-decoration: none;
transition: color 0.2s ease;
}
.kn-campus-map-btn:hover {
color: #850f24;
text-decoration: underline;
}
/* Mobile responsive optimizations for Campus System */
@media (max-width: 767px) {
.kn-campus-list {
max-height: 380px;
margin-bottom: 20px;
}
.kn-campus-map-wrapper {
min-height: 320px;
height: 320px;
}
}
/* 3. [ux_maps] Shortcode Layout Styles */
.ux-maps-container {
display: flex !important;
justify-content: space-between;
gap: 20px;
align-items: stretch;
margin-top: 10px;
}
.ux-maps-sidebar {
width: var(--sidebar-width, 40%) !important;
flex-shrink: 0;
}
.ux-maps-cards-list {
max-height: 500px;
overflow-y: auto;
padding-right: 8px;
}
/* Custom Scrollbar for ux-maps card list */
.ux-maps-cards-list::-webkit-scrollbar {
width: 6px;
}
.ux-maps-cards-list::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 10px;
}
.ux-maps-cards-list::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 10px;
}
.ux-maps-cards-list::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
.ux-maps-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 20px;
margin-bottom: 12px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.01);
text-align: left;
}
.ux-maps-card:hover {
transform: translateX(4px);
border-color: #cbd5e1;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}
.ux-maps-card.active {
background: #fff8f9;
border-color: #b61f3d;
box-shadow: 0 4px 20px rgba(182, 31, 61, 0.06);
}
.ux-maps-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
flex-wrap: wrap;
gap: 8px;
}
.ux-maps-card-title {
font-size: 15px;
font-weight: 700;
color: #2c3c7a;
margin: 0;
font-family: 'Montserrat', sans-serif;
}
.ux-maps-card.active .ux-maps-card-title {
color: #172b4d;
}
.ux-maps-card-badge {
background: #2c3c7a;
color: #ffffff;
font-size: 11px;
font-weight: 700;
padding: 3px 10px;
border-radius: 20px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.ux-maps-card.active .ux-maps-card-badge {
background: #b61f3d;
}
.ux-maps-info-item {
display: flex;
align-items: flex-start;
gap: 8px;
margin-bottom: 8px;
font-size: 13.5px;
color: #4a5568;
line-height: 1.45;
}
.ux-maps-icon {
color: #b61f3d;
flex-shrink: 0;
margin-top: 2px;
}
.ux-maps-text {
flex-grow: 1;
}
.ux-maps-card-footer {
display: flex;
gap: 12px;
border-top: 1px solid #f1f5f9;
padding-top: 12px;
margin-top: 12px;
}
.ux-maps-btn {
display: inline-flex;
align-items: center;
font-size: 12px;
font-weight: 700;
color: #b61f3d;
text-decoration: none;
transition: color 0.2s ease;
}
.ux-maps-btn:hover {
color: #850f24;
text-decoration: underline;
}
.ux-maps-content {
width: var(--map-width, 60%) !important;
border-radius: 16px;
overflow: hidden;
border: 1px solid #e2e8f0;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}
/* Custom Leaflet Map styling */
.kn-leaflet-popup {
padding: 4px;
text-align: left;
}
.kn-leaflet-popup-title {
font-size: 14px;
font-weight: 700;
color: #2c3c7a;
margin: 0 0 6px 0;
font-family: 'Montserrat', sans-serif;
}
.kn-leaflet-popup-address {
font-size: 12px;
color: #4a5568;
line-height: 1.4;
margin: 0 0 8px 0;
}
.kn-leaflet-popup-link {
font-size: 11px;
font-weight: 700;
color: #b61f3d;
text-decoration: none;
}
.kn-leaflet-popup-link:hover {
text-decoration: underline;
}
@media (max-width: 767px) {
.ux-maps-container {
display: block !important;
}
.ux-maps-sidebar {
width: 100% !important;
margin-bottom: 20px;
}
.ux-maps-cards-list {
max-height: 380px;
}
.ux-maps-content {
width: 100% !important;
height: 320px !important;
}
.ux-leaflet-map-container,
.ux-iframe-maps-container {
height: 320px !important;
}
}
/* ==========================================================================
Teacher Features Cards (.kn-teacher-features-row)
========================================================================== */
.kn-teacher-features-row > .col > .col-inner {
background: #ffffff;
border-radius: 16px;
padding: 32px 24px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.3s ease;
border-top: 1px solid #f1f5f9;
border-right: 1px solid #f1f5f9;
position: relative;
}
.kn-teacher-features-row > .col > .col-inner:hover {
transform: translateY(-6px);
box-shadow: 0 16px 35px rgba(0, 0, 0, 0.08);
}
/* Card 1: Navy Blue */
.kn-teacher-features-row > .col:nth-child(1) > .col-inner {
border-left: 4px solid #2c3c7a;
border-bottom: 4px solid #2c3c7a;
box-shadow: 0 8px 24px rgba(44, 60, 122, 0.07);
}
/* Card 2: Crimson Red */
.kn-teacher-features-row > .col:nth-child(2) > .col-inner {
border-left: 4px solid #b61f3d;
border-bottom: 4px solid #b61f3d;
box-shadow: 0 8px 24px rgba(182, 31, 61, 0.07);
}
/* Card 3: Cyan / Teal */
.kn-teacher-features-row > .col:nth-child(3) > .col-inner {
border-left: 4px solid #00bed2;
border-bottom: 4px solid #00bed2;
box-shadow: 0 8px 24px rgba(0, 190, 210, 0.07);
}
/* Card 4: Soft Pink / Rose */
.kn-teacher-features-row > .col:nth-child(4) > .col-inner {
border-left: 4px solid #f39cb0;
border-bottom: 4px solid #f39cb0;
box-shadow: 0 8px 24px rgba(243, 156, 176, 0.12);
}
/* Featured Box Inside Elements */
.kn-teacher-features-row .featured-box {
margin-bottom: 0;
text-align: center;
}
.kn-teacher-features-row .icon-box-img {
margin: 0 auto 18px auto;
}
.kn-teacher-features-row .icon-box-img img {
border-radius: 14px;
display: block;
margin: 0 auto;
}
.kn-teacher-features-row h3 {
font-size: 18px;
font-weight: 800;
color: #172b4d;
margin-top: 0;
margin-bottom: 10px;
font-family: 'Montserrat', sans-serif;
line-height: 1.35;
}
.kn-teacher-features-row p {
font-size: 13.5px;
color: #64748b;
line-height: 1.6;
margin-bottom: 0;
}
/* ==========================================================================
Tab Lịch Khai Giảng Navigation (.tab-lich-khai-giang)
========================================================================== */
.tab-lich-khai-giang .nav,
.tab-lich-khai-giang.nav {
border-bottom: 2px solid #edf2f7 !important;
}
/* Disable Flatsome native nav-line-bottom pseudo element */
.tab-lich-khai-giang .nav > li > a:before,
.tab-lich-khai-giang.nav > li > a:before,
.tab-lich-khai-giang .nav-line-bottom > li > a:before,
.tab-lich-khai-giang.nav-line-bottom > li > a:before {
display: none !important;
content: none !important;
}
.tab-lich-khai-giang h3 {
margin-bottom: 0;
margin-right: 5px;
font-size: 1rem;
color: #b61f3d !important;
}
/* Underline indicator for active tab */
.tab-lich-khai-giang .nav > li.tab > a::after,
.tab-lich-khai-giang.nav > li.tab > a::after {
content: '' !important;
position: absolute !important;
bottom: -1px !important;
left: 0 !important;
width: 100% !important;
height: 3px !important;
background-color: transparent !important;
border-radius: 4px 4px 0 0;
transition: background-color 0.25s ease;
}
/* Hover state */
.tab-lich-khai-giang .nav > li.tab > a:hover,
.tab-lich-khai-giang.nav > li.tab > a:hover {
color: #b61f3d !important;
}
/* Active tab state */
.tab-lich-khai-giang .nav > li.tab.active > a,
.tab-lich-khai-giang.nav > li.tab.active > a {
color: #b61f3d !important;
}
.tab-lich-khai-giang .nav > li.tab.active > a::after,
.tab-lich-khai-giang.nav > li.tab.active > a::after {
background-color: #b61f3d !important;
}
/* ==========================================================================
KN STATS BAR (6 Cột trên Desktop, Grid 2 Cột Card trên Mobile)
========================================================================== */
.kn-stats-bar {
background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1.2px, transparent 1.2px);
background-size: 24px 24px;
}
/* Suffix & Countup numbers */
.kn-stats-bar .is-bold {
color: rgb(243, 204, 78); /* Suffix +, K+, % màu vàng */
font-size: 1.75rem;
font-weight: 800;
line-height: 1.1;
margin-bottom: 4px;
}
.kn-stats-bar .is-bold .count-up {
color: #ffffff; /* Số đếm màu trắng */
font-weight: 800;
}
/* Tiêu đề phụ dưới số đếm */
.kn-stats-bar .kn-stat-card p,
.kn-stats-bar .kn-stat-card .uppercase {
color: #F3CC4E;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
margin: 0;
line-height: 1.3;
}
/* Card 6: Đối tác Bạch Kim British Council (Viền vàng) */
.kn-stats-bar .kn-stat-card.kn-stat-partner,
.kn-stats-bar .kn-stat-partner {
border: 1.5px solid #fbb03b;
background: #25335e;
padding: 12px 6px;
}
.kn-stats-bar .kn-partner-top {
color: #fbb03b;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
margin-bottom: 2px;
}
.kn-stats-bar .kn-partner-name {
color: #ffffff;
font-size: 13.5px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.4px;
margin: 2px 0;
line-height: 1.15;
}
.kn-stats-bar .kn-partner-sub {
color: #fbb03b;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
margin-top: 2px;
}
/* Responsive Mobile (Grid 2 cột) */
@media (max-width: 549px) {
.kn-stats-bar {
padding: 20px 0;
}
.kn-stats-bar .col {
padding: 5px;
}
.kn-stats-bar .kn-stat-card {
padding: 18px 10px;
min-height: 110px;
border-radius: 14px;
}
.kn-stats-bar .is-bold {
font-size: 1.9rem;
}
.kn-stats-bar .kn-stat-card p,
.kn-stats-bar .kn-stat-card .uppercase {
font-size: 11px;
}
.kn-stats-bar .kn-partner-name {
font-size: 14px;
}
.kn-stats-bar .kn-partner-top,
.kn-stats-bar .kn-partner-sub {
font-size: 10px;
}
}
/* ==========================================================================
WPForms Custom Templates System (.kn-wpforms-wrapper)
========================================================================== */
/* 1. Base Styling for All Form Inputs in Templates */
.kn-wpforms-wrapper .wpforms-field-label {
font-size: 14px;
font-weight: 700;
color: #2c3c7a;
margin-bottom: 6px;
}
.kn-wpforms-wrapper .wpforms-field input[type="text"],
.kn-wpforms-wrapper .wpforms-field input[type="email"],
.kn-wpforms-wrapper .wpforms-field input[type="tel"],
.kn-wpforms-wrapper .wpforms-field input[type="number"],
.kn-wpforms-wrapper .wpforms-field select,
.kn-wpforms-wrapper .wpforms-field textarea {
height: 48px !important;
border-radius: 8px;
border: 1.5px solid #e2e8f0 !important;
background-color: #ffffff !important;
padding: 10px 16px !important;
font-size: 14.5px !important;
color: #172b4d !important;
box-shadow: none;
transition: all 0.25s ease;
width: 100% !important;
box-sizing: border-box !important;
}
.kn-wpforms-wrapper .wpforms-field textarea {
height: 110px !important;
resize: vertical !important;
}
.kn-wpforms-wrapper .wpforms-field input:focus,
.kn-wpforms-wrapper .wpforms-field select:focus,
.kn-wpforms-wrapper .wpforms-field textarea:focus {
border-color: #b61f3d !important;
box-shadow: 0 0 0 3.5px rgba(182, 31, 61, 0.12);
outline: none !important;
}
/* Submit Button Base */
.kn-wpforms-wrapper .wpforms-submit {
background: #b61f3d;
color: #ffffff;
border: none;
border-radius: 8px;
padding: 12px 32px;
font-size: 15px;
font-weight: 700;
text-transform: none;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 14px rgba(182, 31, 61, 0.25);
}
.kn-wpforms-wrapper .wpforms-submit:hover {
background: #96122d;
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(182, 31, 61, 0.35);
}
/* Full Width Button Option */
.kn-wpforms-wrapper.kn-form-btn-full .wpforms-submit,
.kn-form-btn-full .wpforms-submit {
width: 100%;
display: block;
}
/* --------------------------------------------------------------------------
ICONS: SVG Icons inside Inputs (.kn-form-icons)
-------------------------------------------------------------------------- */
.kn-form-icons .wpforms-field input[type="text"],
.kn-form-icons .wpforms-field input[type="email"],
.kn-form-icons .wpforms-field input[type="tel"],
.kn-form-icons .wpforms-field input[type="number"],
.kn-form-icons .wpforms-field select,
.kn-form-icons .wpforms-field textarea,
.kn-template-icons-modern .wpforms-field input[type="text"],
.kn-template-icons-modern .wpforms-field input[type="email"],
.kn-template-icons-modern .wpforms-field input[type="tel"],
.kn-template-icons-modern .wpforms-field input[type="number"],
.kn-template-icons-modern .wpforms-field select,
.kn-template-icons-modern .wpforms-field textarea {
padding-left: 44px !important;
background-repeat: no-repeat !important;
background-position: 14px center !important;
background-size: 18px 18px !important;
}
/* 1. Name / User Icon (Strictly Name Fields Only) */
.kn-form-icons .wpforms-field-name input,
.kn-form-icons .kn-input-name,
.kn-form-icons .kn-field-name input,
.kn-form-icons input[name*="name"],
.kn-form-icons input[placeholder*="tên" i],
.kn-form-icons input[placeholder*="name" i],
.kn-form-icons input[placeholder*="họ" i] {
background-image: url('data:image/svg+xml;utf8,') !important;
}
/* 2. Phone Field: Phone Icon (High Specificity Over General Text) */
.kn-form-icons .kn-field-phone input,
.kn-form-icons .kn-input-phone,
.kn-form-icons .wpforms-field-phone input,
.kn-form-icons .wpforms-field-phone-smart input,
.kn-form-icons input[type="tel"],
.kn-form-icons input[name*="phone"],
.kn-form-icons input[name*="sdt"],
.kn-form-icons input[placeholder*="thoại" i],
.kn-form-icons input[placeholder*="phone" i],
.kn-form-icons input[placeholder*="sđt" i],
.kn-form-icons input[placeholder*="sdt" i] {
background-image: url('data:image/svg+xml;utf8,') !important;
}
/* 3. Email Field: Mail Icon */
.kn-form-icons .kn-field-email input,
.kn-form-icons .kn-input-email,
.kn-form-icons .wpforms-field-email input,
.kn-form-icons input[type="email"],
.kn-form-icons input[name*="email"],
.kn-form-icons input[placeholder*="email" i],
.kn-form-icons input[placeholder*="mail" i] {
background-image: url('data:image/svg+xml;utf8,') !important;
}
/* 4. Select / Dropdown: Target / Cap Icon + Right Arrow */
.kn-form-icons .wpforms-field-select select {
background-image: url('data:image/svg+xml;utf8,'), url('data:image/svg+xml;utf8,') !important;
background-position: 14px center, calc(100% - 14px) center !important;
background-size: 18px 18px, 12px 12px !important;
appearance: none !important;
-webkit-appearance: none !important;
}
/* 5. Textarea Field: Message Bubble Icon */
.kn-form-icons .wpforms-field-textarea textarea {
background-image: url('data:image/svg+xml;utf8,') !important;
background-position: 14px 14px !important;
}
/* 6. Radio / Choice Pills & Circles */
.kn-wpforms-wrapper .wpforms-field-radio ul,
.kn-form-icons .wpforms-field-radio ul {
display: flex !important;
flex-wrap: wrap;
gap: 12px;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
}
.kn-wpforms-wrapper .wpforms-field-radio li,
.kn-form-icons .wpforms-field-radio li {
flex: 1 1 calc(50% - 12px) !important;
min-width: 140px !important;
border: 1.5px solid #e2e8f0 !important;
border-radius: 8px;
padding: 10px 14px !important;
display: inline-flex !important;
align-items: center;
cursor: pointer;
transition: all 0.2s ease;
background: #ffffff !important;
margin: 0 !important;
}
.kn-wpforms-wrapper .wpforms-field-radio li:hover,
.kn-form-icons .wpforms-field-radio li:hover {
border-color: #b61f3d !important;
background: #fdf2f4 !important;
}
.kn-wpforms-wrapper .wpforms-field-radio li:has(input[type="radio"]:checked),
.kn-form-icons .wpforms-field-radio li:has(input[type="radio"]:checked) {
border-color: #b61f3d !important;
background: rgba(182, 31, 61, 0.04) !important;
}
.kn-wpforms-wrapper .wpforms-field-radio li input[type="radio"],
.kn-form-icons .wpforms-field-radio li input[type="radio"] {
appearance: none !important;
-webkit-appearance: none !important;
width: 18px !important;
height: 18px !important;
border: 2px solid #cbd5e1 !important;
border-radius: 50%;
margin: 0 10px 0 0 !important;
padding: 0 !important;
outline: none !important;
background-color: #ffffff !important;
transition: all 0.2s ease;
cursor: pointer;
flex-shrink: 0;
display: inline-block !important;
box-shadow: none;
}
.kn-wpforms-wrapper .wpforms-field-radio li input[type="radio"]:checked,
.kn-form-icons .wpforms-field-radio li input[type="radio"]:checked {
border-color: #b61f3d !important;
background-color: #b61f3d !important;
box-shadow: inset 0 0 0 3.5px #ffffff !important;
}
.kn-wpforms-wrapper .wpforms-field-radio li label,
.kn-form-icons .wpforms-field-radio li label {
font-size: 13.5px !important;
font-weight: 600 !important;
color: #475569 !important;
cursor: pointer;
margin: 0 !important;
padding: 0 !important;
}
/* --------------------------------------------------------------------------
TEMPLATE 2: Card Elevated (Card bóng đổ sang trọng)
-------------------------------------------------------------------------- */
.kn-template-card-elevated {
background: #ffffff;
border-radius: 18px;
padding: 32px 30px;
border: 1px solid #edf2f7;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
}
.kn-template-card-elevated .wpforms-title {
font-size: 22px;
font-weight: 800;
color: #2c3c7a;
text-align: center;
margin-bottom: 6px;
}
.kn-template-card-elevated .wpforms-description {
font-size: 14px;
color: #64748b;
text-align: center;
margin-bottom: 20px;
}
/* --------------------------------------------------------------------------
TEMPLATE 3: Glassmorphism (Kính mờ bóng bẩy)
-------------------------------------------------------------------------- */
.kn-template-glassmorphism {
background: rgba(255, 255, 255, 0.16);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 20px;
padding: 32px 30px;
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);
}
.kn-template-glassmorphism .wpforms-field-label {
color: #ffffff;
}
.kn-template-glassmorphism .wpforms-field input,
.kn-template-glassmorphism .wpforms-field select,
.kn-template-glassmorphism .wpforms-field textarea {
background: rgba(255, 255, 255, 0.9) !important;
border-color: rgba(255, 255, 255, 0.5) !important;
}
/* --------------------------------------------------------------------------
TEMPLATE 4: Minimal Clean (Tối giản viền dưới)
-------------------------------------------------------------------------- */
.kn-template-minimal-clean .wpforms-field input[type="text"],
.kn-template-minimal-clean .wpforms-field input[type="email"],
.kn-template-minimal-clean .wpforms-field input[type="tel"],
.kn-template-minimal-clean .wpforms-field select,
.kn-template-minimal-clean .wpforms-field textarea {
border: none !important;
border-bottom: 2px solid #cbd5e1 !important;
border-radius: 0;
background: transparent !important;
padding-left: 36px !important;
background-repeat: no-repeat !important;
background-position: 4px center !important;
background-size: 18px 18px !important;
}
.kn-template-minimal-clean .wpforms-field input:focus,
.kn-template-minimal-clean .wpforms-field select:focus,
.kn-template-minimal-clean .wpforms-field textarea:focus {
border-bottom-color: #b61f3d !important;
box-shadow: none;
}
/* --------------------------------------------------------------------------
TEMPLATE 5: Brand Navy (Nền xanh đậm thương hiệu)
-------------------------------------------------------------------------- */
.kn-template-brand-navy {
background: #2c3c7a;
border-radius: 18px;
padding: 32px 30px;
box-shadow: 0 15px 40px rgba(44, 60, 122, 0.25);
}
.kn-template-brand-navy .wpforms-field-label,
.kn-template-brand-navy .wpforms-title,
.kn-template-brand-navy .wpforms-description {
color: #ffffff;
}
.kn-template-brand-navy .wpforms-field input,
.kn-template-brand-navy .wpforms-field select,
.kn-template-brand-navy .wpforms-field textarea {
background: #ffffff !important;
}
/* ==========================================================================
Tabgroup [tabgroup class="khoahoc"] Mobile Horizontal Scroll
========================================================================== */
/* Mobile & Tablet Horizontal Touch Scroll Only (<= 850px) */
@media (max-width: 850px) {
.tabbed-content.khoahoc .nav-center,
.tabbed-content.khoahoc .nav {
display: flex !important;
flex-flow: row nowrap !important;
justify-content: flex-start;
align-items: center;
width: 100% !important;
max-width: 100% !important;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* Firefox */
padding: 4px 12px 14px 12px !important;
margin: 0 0 20px 0 !important;
background: transparent !important;
border: none !important;
border-radius: 0;
box-sizing: border-box !important;
gap: 8px;
}
.tabbed-content.khoahoc .nav::-webkit-scrollbar {
display: none !important; /* Chrome, Safari, Edge */
}
.tabbed-content.khoahoc .nav > li.tab {
display: inline-flex !important;
flex: 0 0 auto !important;
flex-shrink: 0;
white-space: nowrap !important;
margin: 0 !important;
padding: 0 !important;
}
.tabbed-content.khoahoc .nav-pills > li.tab > a {
display: inline-flex !important;
align-items: center;
justify-content: center;
padding: 8px 18px !important;
font-size: 13.5px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
border-radius: 999px;
background: #f1f5f9 !important;
color: #64748b !important;
border: 1px solid transparent !important;
white-space: nowrap !important;
box-shadow: none;
-webkit-tap-highlight-color: transparent !important;
}
.tabbed-content.khoahoc .nav-pills > li.tab.active > a {
background: #ffffff !important;
color: #b61f3d !important;
font-weight: 700 !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
border-color: rgba(182, 31, 61, 0.15) !important;
}
}
/* Course Tier Card Styling */
/* Course Tier Card Styling (Supports HTML & UX Builder Shortcodes) */
/* Table inside Tier Card (Resetting ux_table defaults) */
.kn-course-tier-card .ux_table,
.kn-course-tier-card div:has(> table) {
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 0 12px 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
overflow: visible !important;
}
.kn-course-tier-card table {
width: 100% !important;
margin: 0 0 8px 0 !important;
border-collapse: collapse !important;
border-spacing: 0 !important;
border: none !important;
background: transparent !important;
box-shadow: none !important;
}
.kn-course-tier-card table thead {
display: none !important;
}
.kn-course-tier-card table tr,
.kn-course-tier-card table tbody tr,
.kn-course-tier-card table tbody tr:nth-child(even) td,
.kn-course-tier-card table tbody tr:nth-child(odd) td {
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
}
.kn-course-tier-card table tbody tr {
border-bottom: 1px dashed #e2e8f0 !important;
border-top: none !important;
border-left: none !important;
border-right: none !important;
}
.kn-course-tier-card table td {
padding: 8px 0 !important;
border: none !important;
background: transparent !important;
font-size: 13.5px !important;
vertical-align: middle !important;
}
.kn-course-tier-card table td:first-child {
color: #475569 !important;
font-weight: 500 !important;
text-align: left !important;
width: 100px !important;
white-space: nowrap !important;
padding-right: 10px !important;
}
.kn-course-tier-card table td:first-child::after {
content: ":";
}
.kn-course-tier-card table td:last-child {
color: #1e293b !important;
font-weight: 700 !important;
text-align: right !important;
padding-left: 0 !important;
}
.kn-course-tier-card .kn-card-table-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
border-bottom: 1px dashed #e2e8f0;
font-size: 13.5px;
color: #475569;
}
/* Footer Info (Supports HTML & row_inner) */
.kn-course-tier-card .kn-card-footer-info,
.kn-course-tier-card .row-inner,
.kn-course-tier-card .row_inner {
display: flex !important;
justify-content: space-between !important;
align-items: flex-end !important;
margin-top: auto !important;
padding-top: 14px !important;
border-top: 1px solid #f1f5f9 !important;
margin-bottom: 16px !important;
width: 100% !important;
}
.kn-course-tier-card .row-inner .col-inner,
.kn-course-tier-card .row_inner .col_inner {
padding: 0 !important;
margin: 0 !important;
}
.kn-course-tier-card .kn-card-footer-info .kn-label,
.kn-course-tier-card .row-inner .kn-label,
.kn-course-tier-card .row_inner .kn-label,
.kn-course-tier-card .row-inner .col-inner:first-child p:first-child,
.kn-course-tier-card .row_inner .col_inner:first-child p:first-child {
display: block !important;
font-size: 11.5px !important;
color: #94a3b8 !important;
text-transform: uppercase !important;
font-weight: 600 !important;
letter-spacing: 0.3px !important;
margin-bottom: 2px !important;
}
.kn-course-tier-card .kn-price,
.kn-course-tier-card .row-inner .col-inner:first-child p:last-child,
.kn-course-tier-card .row_inner .col_inner:first-child p:last-child {
font-size: 20px !important;
font-weight: 800 !important;
color: #b61f3d !important;
margin: 0 !important;
line-height: 1.2 !important;
}
.kn-course-tier-card .kn-date,
.kn-course-tier-card .row-inner strong.kn-date,
.kn-course-tier-card .row_inner strong.kn-date,
.kn-course-tier-card .row-inner .col-inner:last-child strong,
.kn-course-tier-card .row_inner .col_inner:last-child strong {
font-size: 14px !important;
color: #2c3c7a !important;
font-weight: 700 !important;
}
/* Bottom Action Button */
.kn-course-tier-card .button:last-child,
.kn-course-tier-card > .col-inner > .button:last-child {
background: #172b4d !important;
border: 1.5px solid #172b4d !important;
color: #ffffff !important;
font-weight: 700 !important;
border-radius: 8px !important;
font-size: 14px !important;
padding: 10px 20px !important;
width: 100% !important;
text-align: center !important;
display: block !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
text-transform: none !important;
transition: all 0.3s ease !important;
}
.kn-course-tier-card .button:last-child:hover,
.kn-course-tier-card > .col-inner > .button:last-child:hover {
background: #2c3c7a !important;
border-color: #2c3c7a !important;
color: #ffffff !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(23, 43, 77, 0.15) !important;
}
/* ==========================================================================
Horizontal Timeline & Course Roadmap Cards (.kn-timeline-card)
========================================================================== */
/* 1. Global Timeline Counter & Structure */
.timeline-horizontal {
counter-reset: timeline-step;
position: relative;
padding-top: 70px !important;
}
.timeline-horizontal::before {
content: "" !important;
position: absolute !important;
top: 31px !important;
left: 8% !important;
right: 8% !important;
height: 2px !important;
background: #e2e8f0 !important;
z-index: 1;
}
/* Numbered Step Dots */
.timeline-horizontal .timeline-item {
position: relative;
}
.timeline-horizontal .timeline-item::before {
counter-increment: timeline-step;
content: counter(timeline-step) !important;
display: flex !important;
align-items: center;
justify-content: center;
width: 38px !important;
height: 38px !important;
border-radius: 50%;
border: none !important;
font-size: 15px !important;
font-weight: 800 !important;
color: #ffffff !important;
top: -57px !important;
left: 50% !important;
transform: translateX(-50%);
z-index: 2;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
line-height: 1 !important;
}
/* 2. Timeline Card Styling */
.kn-timeline-card {
background: #ffffff;
border-radius: 18px;
padding: 24px;
border: 1.5px solid #edf2f7;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
text-align: left;
min-height: 250px;
transition: all 0.3s ease;
box-sizing: border-box;
}
.kn-timeline-card:hover {
transform: translateY(-4px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}
.kn-timeline-card.kn-timeline-red {
border: 2px solid #b61f3d;
box-shadow: 0 12px 30px rgba(182, 31, 61, 0.08);
}
.kn-timeline-card h3 {
font-size: 20px;
font-weight: 800;
color: #172b4d;
margin: 0 0 6px 0;
}
.kn-timeline-card .kn-timeline-sub {
font-size: 16px;
font-weight: 800;
color: #b61f3d;
display: inline-block;
margin-bottom: 14px;
}
.kn-timeline-card ul {
list-style: none !important;
padding: 0;
margin: 0;
}
.kn-timeline-card ul li {
font-size: 13.5px !important;
color: #475569 !important;
line-height: 1.6;
margin-bottom: 8px;
padding-left: 14px !important;
position: relative !important;
}
.kn-timeline-card ul li::before {
content: "-" !important;
position: absolute !important;
left: 0 !important;
color: #64748b !important;
font-weight: 700;
}
/* ==========================================================================
Responsive Button Expand Utilities
========================================================================== */
@media (max-width: 849px) {
.button.expand--md, a.button.expand--md, button.expand--md {
display: block !important;
width: 100% !important;
}
.button.expand--md-false, a.button.expand--md-false, button.expand--md-false {
display: inline-block !important;
width: auto !important;
}
}
@media (max-width: 549px) {
.button.expand--sm, a.button.expand--sm, button.expand--sm {
display: block !important;
width: 100% !important;
}
.button.expand--sm-false, a.button.expand--sm-false, button.expand--sm-false {
display: inline-block !important;
width: auto !important;
}
}
/* ==========================================================================
Contact Info Cards (Hotline, Email, Working Hours)
========================================================================== */
.kn-contact-info-title {
font-size: 26px;
font-weight: 800;
color: #172b4d;
margin-bottom: 10px;
font-family: 'Montserrat', sans-serif;
line-height: 1.25;
}
.kn-contact-info-desc {
font-size: 14.5px;
color: #64748b;
margin-bottom: 24px;
line-height: 1.6;
}
.kn-contact-info-card {
display: flex;
align-items: center;
gap: 20px;
background: #ffffff;
border: 1.5px solid #edf2f7;
padding: 18px 24px;
border-radius: 20px;
margin-bottom: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.kn-contact-info-card:hover {
border-color: #cbd5e1;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
transform: translateY(-2px);
}
/* Red Solid Circular Icon Box */
.kn-contact-icon-box {
width: 54px;
height: 54px;
min-width: 54px;
border-radius: 50% !important;
background-color: #b61f3d !important;
color: #ffffff !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
box-shadow: 0 4px 14px rgba(182, 31, 61, 0.25);
transition: all 0.25s ease;
}
.kn-contact-icon-box svg {
width: 22px !important;
height: 22px !important;
stroke: #ffffff !important;
stroke-width: 2.2 !important;
fill: none !important;
display: block !important;
}
.kn-contact-info-card:hover .kn-contact-icon-box {
transform: scale(1.05);
background-color: #9c1530 !important;
}
/* Category Label (HOTLINE, EMAIL, THỜI GIAN LÀM VIỆC) */
.kn-contact-label {
font-size: 13px !important;
font-weight: 700 !important;
color: #64748b !important;
text-transform: uppercase !important;
letter-spacing: 0.8px !important;
margin: 0 0 4px 0 !important;
line-height: 1.2 !important;
}
/* Value (1900 6000, info@kynguyen.online, etc.) */
.kn-contact-value {
font-weight: 600;
font-size: 16px;
color: #1d2951;
margin: 0 !important;
line-height: 1.3 !important;
letter-spacing: -0.2px !important;
}
@media (max-width: 549px) {
.kn-contact-info-card {
padding: 14px 18px;
gap: 16px;
border-radius: 16px;
}
.kn-contact-icon-box {
width: 46px;
height: 46px;
min-width: 46px;
}
.kn-contact-icon-box svg {
width: 19px !important;
height: 19px !important;
}
/* Force override Flatsome global h3/h2/h4 on mobile */
html body .kn-curriculum-accordion .accordion-title,
html body .kn-curriculum-accordion a.accordion-title,
html body .kn-curriculum-accordion .accordion-title h1,
html body .kn-curriculum-accordion .accordion-title h2,
html body .kn-curriculum-accordion .accordion-title h3,
html body .kn-curriculum-accordion .accordion-title h4,
html body .kn-curriculum-accordion .accordion-title h5,
html body .kn-curriculum-accordion .accordion-title h6,
html body .kn-curriculum-accordion .accordion-title .h1,
html body .kn-curriculum-accordion .accordion-title .h2,
html body .kn-curriculum-accordion .accordion-title .h3,
html body .kn-curriculum-accordion .accordion-title .h4,
html body .kn-curriculum-accordion .accordion-title .h5,
html body .kn-curriculum-accordion .accordion-title .h6,
html body .kn-curriculum-accordion .accordion-title span:not(.kn-acc-duration),
html body .kn-curriculum-accordion .accordion-title b,
html body .kn-curriculum-accordion .accordion-title strong,
html body .kn-curriculum-accordion .accordion-title p {
font-size: 13.5px !important;
line-height: 1.35 !important;
}
}
/* ==========================================================================
MEGA MENU KHOA HOC - COLOR & TYPOGRAPHY STYLING
========================================================================== */
@media (min-width: 850px) {
/* Container dropdown */
.menu-khoahoc .nav-dropdown {
padding: 24px 30px !important;
background-color: #ffffff !important;
}
.menu-khoahoc .nav-dropdown:after {
content: "" !important;
display: table !important;
clear: both !important;
}
/* Bỏ viền giữa các cột */
.menu-khoahoc .nav-dropdown > li,
.menu-khoahoc .nav-dropdown > li + li,
.menu-khoahoc .nav-dropdown > li.nav-dropdown-col {
border: none !important;
border-left: none !important;
border-right: none !important;
box-shadow: none !important;
}
/* 1. Tiêu đề menu chính từng cột (KHOÁ HỌC IELTS, TOEIC, CAMBRIDGE,...) */
.menu-khoahoc .nav-dropdown > li.nav-dropdown-col > a {
color: #b61f3d !important;
font-weight: 700 !important;
text-transform: uppercase !important;
font-size: 13px !important;
border-bottom: 1px solid #f1f5f9 !important;
padding: 0 0 8px 0 !important;
margin: 0 0 10px 0 !important;
display: block !important;
background: transparent !important;
border-radius:0px !important;
}
.menu-khoahoc .nav-dropdown > li.nav-dropdown-col > a:hover {
color: #9c1530 !important;
background: transparent !important;
}
/* 2. Menu text / span / link không có URL (Theo band điểm, Theo hình thức, Luyện đề,...) */
.menu-khoahoc .nav-dropdown .nav-column > li > a:not([href]),
.menu-khoahoc .nav-dropdown .nav-column > li > a[href=""],
.menu-khoahoc .nav-dropdown .nav-column > li > a[href="#"],
.menu-khoahoc .nav-dropdown .nav-column > li > span,
.menu-khoahoc .nav-dropdown .nav-column > li.menu-item-object-custom:not(.menu-item-has-children) > a {
color: #64748b !important;
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
display: block !important;
cursor: default !important;
pointer-events: none !important;
padding: 6px 0 2px 0 !important;
margin: 0 !important;
background: transparent !important;
}
/* 3. Link khóa học thông thường - thu gọn padding top bottom */
.menu-khoahoc .nav-dropdown .nav-column > li > a[href]:not([href=""]):not([href="#"]) {
color: #334155 !important;
font-size: 13px !important;
font-weight: 500 !important;
text-transform: none !important;
display: block !important;
padding: 5px 0 !important;
margin: 0 !important;
line-height: 1.4 !important;
background: transparent !important;
transition: color 0.2s ease !important;
}
/* Hover các menu bỏ background */
.menu-khoahoc .nav-dropdown a:hover,
.menu-khoahoc .nav-dropdown li:hover > a,
.menu-khoahoc .nav-dropdown .nav-column > li > a:hover {
background: transparent !important;
background-color: transparent !important;
}
.menu-khoahoc .nav-dropdown .nav-column > li > a[href]:not([href=""]):not([href="#"]):hover {
color: #b61f3d !important;
}
/* Cho phép chữ xuống dòng trong cột, không bị tràn đè lên nhau */
.menu-khoahoc .nav-dropdown li,
.menu-khoahoc .nav-dropdown a {
white-space: normal !important;
word-break: break-word !important;
}
/* 5 cột đều nhau 20% */
.menu-khoahoc .nav-dropdown > li.nav-dropdown-col {
width: 20% !important;
max-width: 20% !important;
float: left !important;
box-sizing: border-box !important;
padding: 5px !important;
border: none !important;
list-style: none !important;
}
/* Đưa submenu con về static để dropdown tính đúng chiều cao toàn bộ danh sách */
.menu-khoahoc .nav-dropdown .nav-column,
.menu-khoahoc .nav-dropdown li .sub-menu {
position: static !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
background: transparent !important;
box-shadow: none !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
left: auto !important;
top: auto !important;
}
}
/* ==========================================================================
MENU BLOG PILL BADGES NAVIGATION (Separate Soft Pill Badges)
========================================================================== */
.menu-blog {
display: flex;
width: 100%;
max-width: 100%;
margin: 20px 0 30px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Đảm bảo luôn hiển thị dạng thanh ngang trên mobile, không bị ẩn hoặc biến thành hamburger */
.menu-blog .hide-for-medium {
display: block !important;
width: 100%;
}
.menu-blog .show-for-medium {
display: none !important;
}
.menu-blog ul.nav {
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
padding: 6px 0 !important;
box-shadow: none !important;
gap: 10px !important;
max-width: 100%;
width: max-content;
min-width: min-content;
overflow-x: visible;
}
/* ==========================================================================
Căn chỉnh theo cấu hình "Text align" trong UX Builder (nav_align)
- Trái (Left): text-left / nav-left
- Giữa (Center): text-center / nav-center
- Phải (Right): text-right / nav-right
========================================================================== */
/* 1. Căn giữa (Center - Icon giữa trong UX Builder) */
.menu-blog ul.nav.nav-center,
.menu-blog ul.nav.text-center,
.menu-blog.text-center ul.nav {
justify-content: center !important;
margin: 0 auto !important;
}
/* 2. Căn trái (Left - Icon trái trong UX Builder) */
.menu-blog ul.nav.nav-left,
.menu-blog ul.nav.text-left,
.menu-blog.text-left ul.nav {
justify-content: flex-start !important;
margin: 0 auto 0 0 !important;
}
/* 3. Căn phải (Right - Icon phải trong UX Builder) */
.menu-blog ul.nav.nav-right,
.menu-blog ul.nav.text-right,
.menu-blog.text-right ul.nav {
justify-content: flex-end !important;
margin: 0 0 0 auto !important;
}
.menu-blog::-webkit-scrollbar,
.menu-blog ul.nav::-webkit-scrollbar {
display: none !important;
height: 0 !important;
width: 0 !important;
}
.menu-blog ul.nav > li {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
display: inline-flex !important;
align-items: center !important;
flex-shrink: 0 !important;
}
/* Thẻ liên kết từng mục menu */
.menu-blog ul.nav > li > a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 10px 22px !important;
font-size: 15px !important;
font-weight: 600 !important;
color: #1e293b !important;
background-color: #f1f5f9 !important;
border-radius: 9999px !important;
transition: all 0.2s ease-in-out !important;
border: none !important;
text-decoration: none !important;
line-height: 1.3 !important;
white-space: nowrap !important;
}
/* Gỡ bỏ các gạch chân hiệu ứng mặc định của Flatsome */
.menu-blog ul.nav > li > a:before,
.menu-blog ul.nav > li > a:after {
display: none !important;
}
/* Hover effect */
.menu-blog ul.nav > li > a:hover {
background-color: #e2e8f0 !important;
color: #0f172a !important;
}
/* Active / Current item (Nền đỏ thương hiệu chữ trắng nổi bật) */
.menu-blog ul.nav > li.current-menu-item > a,
.menu-blog ul.nav > li.current_page_item > a,
.menu-blog ul.nav > li.active > a {
background-color: #b61f3d !important;
color: #ffffff !important;
font-weight: 700 !important;
box-shadow: 0 2px 8px rgba(182, 31, 61, 0.25) !important;
}
/* Tối ưu riêng cho Mobile & Tablet (< 850px) */
@media (max-width: 849px) {
.menu-blog {
justify-content: flex-start !important;
margin: 15px 0 25px !important;
padding: 0 !important;
}
.menu-blog ul.nav {
justify-content: flex-start !important;
padding: 4px 0 !important;
margin: 0 !important;
gap: 8px !important;
}
.menu-blog ul.nav > li > a {
padding: 8px 16px !important;
font-size: 13.5px !important;
}
}
/* ==========================================================================
Course Search Component & Results Styling (post_type=course)
========================================================================== */
/* 1. Dedicated Course Search Bar [kn_course_search] */
.kn-course-search-wrapper {
width: 100%;
margin: 20px auto;
}
.kn-course-searchform .kn-course-search-inner {
display: flex;
align-items: center;
background: #ffffff;
border: 1.5px solid #e2e8f0;
border-radius: 12px;
padding: 4px 6px;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
transition: all 0.25s ease;
}
.kn-course-searchform .kn-course-search-inner:focus-within {
border-color: #b61f3d;
box-shadow: 0 0 0 3px rgba(182, 31, 61, 0.1), 0 8px 25px rgba(0, 0, 0, 0.06);
}
.kn-course-searchform .kn-course-search-field {
border: none !important;
background: transparent !important;
box-shadow: none !important;
padding: 10px 16px !important;
font-size: 14.5px !important;
color: #172b4d !important;
height: 44px !important;
line-height: 44px !important;
}
.kn-course-searchform .kn-course-search-field::placeholder {
color: #94a3b8;
font-size: 14px;
}
.kn-course-searchform .ux-search-submit {
background-color: #b61f3d !important;
border-color: #b61f3d !important;
color: #ffffff !important;
border-radius: 8px !important;
padding: 0 20px !important;
height: 44px !important;
line-height: 44px !important;
font-weight: 700 !important;
font-size: 14px !important;
display: inline-flex !important;
align-items: center;
gap: 8px;
transition: all 0.2s ease !important;
}
.kn-course-searchform .ux-search-submit:hover {
background-color: #900c22 !important;
border-color: #900c22 !important;
transform: translateY(-1px);
}
/* Style variants */
.kn-course-search-pill .kn-course-search-inner {
border-radius: 9999px;
padding: 4px 8px;
}
.kn-course-search-pill .ux-search-submit {
border-radius: 9999px !important;
}
.kn-course-search-flat .kn-course-search-inner {
border-radius: 6px;
box-shadow: none;
}
/* 2. Live Search Dropdown Styling for Courses */
.autocomplete-suggestions {
background: #ffffff !important;
border-radius: 12px !important;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12) !important;
border: 1px solid #edf2f7 !important;
overflow: hidden !important;
padding: 6px 0 !important;
}
.autocomplete-suggestion {
padding: 12px 16px !important;
border-bottom: 1px solid #f8fafc !important;
transition: background 0.15s ease;
}
.autocomplete-suggestion:hover,
.autocomplete-suggestion.autocomplete-selected {
background-color: #f8fafc !important;
}
.autocomplete-suggestion .search-name {
font-size: 14px !important;
font-weight: 600 !important;
color: #1e293b !important;
}
.autocomplete-suggestion .search-name strong {
color: #b61f3d !important;
font-weight: 700 !important;
}
.autocomplete-suggestion .search-price {
display: inline-block !important;
background: #f1f5f9;
color: #475569 !important;
font-size: 11px !important;
font-weight: 600 !important;
padding: 2px 8px !important;
border-radius: 4px !important;
margin-top: 4px !important;
}
.autocomplete-suggestion img.search-image {
width: 44px !important;
height: 44px !important;
border-radius: 8px !important;
object-fit: cover !important;
border: 1px solid #e2e8f0;
}
/* 3. Search Results Page - List of Links */
.kn-search-links-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 16px;
box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05);
overflow: hidden;
margin-bottom: 30px;
}
.kn-search-links-list {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.kn-search-link-item {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
border-bottom: 1px solid #f1f5f9;
transition: background-color 0.2s ease;
}
.kn-search-link-item:last-child {
border-bottom: none;
}
.kn-search-link-anchor {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 22px;
text-decoration: none !important;
color: inherit !important;
transition: all 0.2s ease;
}
.kn-search-link-item:hover {
background-color: #fafbfd;
}
.kn-search-link-item.is-course:hover {
background-color: #f8fbff;
}
.kn-search-link-left {
flex-grow: 1;
min-width: 0;
}
.kn-search-link-badges {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 6px;
}
.kn-link-badge {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11.5px;
font-weight: 700;
line-height: 1;
padding: 4px 9px;
border-radius: 6px;
letter-spacing: 0.3px;
}
.kn-link-badge.badge-course {
background: #eff6ff;
color: #2563eb;
border: 1px solid #dbeafe;
}
.kn-link-badge.badge-post {
background: #f8fafc;
color: #64748b;
border: 1px solid #e2e8f0;
}
.kn-link-badge.badge-parent {
background: #f1f5f9;
color: #475569;
font-weight: 600;
}
.kn-link-badge.badge-custom {
background: #fef2f2;
color: #b61f3d;
border: 1px solid #fee2e2;
}
.kn-link-badge.badge-date {
font-weight: 500;
color: #94a3b8;
background: transparent;
padding: 0;
}
.kn-search-link-title {
font-size: 16.5px !important;
font-weight: 600 !important;
color: #172b4d !important;
margin: 0 !important;
line-height: 1.4 !important;
transition: color 0.2s ease;
}
.kn-search-link-item:hover .kn-search-link-title {
color: #b61f3d !important;
}
.kn-search-link-right {
flex-shrink: 0;
}
.kn-search-link-action {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 600;
color: #64748b;
padding: 6px 14px;
border-radius: 8px;
background: #f8fafc;
border: 1px solid #e2e8f0;
transition: all 0.2s ease;
white-space: nowrap;
}
.kn-link-arrow {
transition: transform 0.2s ease;
}
.kn-search-link-item:hover .kn-search-link-action {
background: #b61f3d;
border-color: #b61f3d;
color: #ffffff;
}
.kn-search-link-item:hover .kn-link-arrow {
transform: translateX(3px);
}
@media (max-width: 650px) {
.kn-search-page-wrapper {
padding: 24px 0 40px !important;
overflow-x: hidden;
}
.kn-search-page-wrapper .row {
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 14px !important;
padding-right: 14px !important;
}
.kn-search-page-wrapper .col {
padding-left: 0 !important;
padding-right: 0 !important;
}
.kn-search-header-box {
margin-bottom: 25px !important;
padding: 0;
}
.kn-search-page-title {
font-size: 20px !important;
word-break: break-word;
}
.kn-search-links-card {
border-radius: 12px !important;
}
.kn-search-link-anchor {
padding: 13px 14px !important;
gap: 12px !important;
}
.kn-search-link-left {
width: calc(100% - 32px);
}
.kn-search-link-right {
flex-shrink: 0;
width: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.kn-search-action-text {
display: none !important;
}
.kn-search-link-action {
padding: 5px !important;
background: transparent !important;
border: none !important;
color: #94a3b8 !important;
}
.kn-search-link-item:hover .kn-search-link-action {
color: #b61f3d !important;
}
.kn-search-link-title {
font-size: 15px !important;
line-height: 1.35 !important;
}
.kn-course-search-btn-text {
display: none !important;
}
.kn-course-searchform button.submit-button {
padding: 0 16px !important;
}
}
/* 4. Search Page Header, Refine Bar & Filter Pills */
.kn-search-page-wrapper {
padding: 40px 0 60px;
background: #f8fafc;
}
.kn-search-header-box {
max-width: 680px;
margin: 0 auto 35px;
padding: 0 15px;
}
.kn-search-page-title {
font-size: 28px !important;
font-weight: 800 !important;
color: #172b4d !important;
margin-bottom: 8px !important;
word-break: break-word !important;
white-space: normal !important;
line-height: 1.3 !important;
}
.kn-search-page-title span {
color: #b61f3d;
}
.kn-search-page-desc {
font-size: 15px;
color: #64748b;
margin-bottom: 20px;
}
/* In-page Course Search Bar */
.kn-course-search-wrapper {
width: 100%;
max-width: 550px;
box-sizing: border-box;
margin: 0 auto 20px;
}
.kn-course-search-inner {
display: flex;
align-items: center;
width: 100%;
background: #ffffff;
border: 1.5px solid #cbd5e1;
border-radius: 999px;
padding: 4px 6px 4px 18px;
box-sizing: border-box;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
transition: all 0.25s ease;
}
.kn-course-search-inner:focus-within {
border-color: #b61f3d;
box-shadow: 0 0 0 3px rgba(182, 31, 61, 0.12);
}
.kn-course-search-inner .flex-col.flex-grow {
flex: 1 1 auto;
min-width: 0;
}
.kn-course-search-inner input.search-field {
width: 100% !important;
border: none !important;
background: transparent !important;
box-shadow: none !important;
padding: 8px 0 !important;
font-size: 15px !important;
color: #1e293b !important;
height: auto !important;
}
.kn-course-search-inner button.submit-button {
border-radius: 999px !important;
background-color: #b61f3d !important;
border-color: #b61f3d !important;
color: #ffffff !important;
padding: 8px 18px !important;
font-size: 13.5px !important;
font-weight: 600 !important;
margin: 0 !important;
display: inline-flex;
align-items: center;
gap: 6px;
}
.kn-course-search-inner button.submit-button:hover {
background-color: #900c22 !important;
border-color: #900c22 !important;
}
.kn-search-filter-pills {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 18px;
flex-wrap: wrap;
}
.kn-filter-pill {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 18px;
border-radius: 999px;
background: #ffffff;
color: #475569;
font-size: 13.5px;
font-weight: 600;
border: 1px solid #e2e8f0;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
text-decoration: none !important;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.kn-pill-svg {
flex-shrink: 0;
transition: transform 0.2s ease;
}
.kn-filter-pill:hover .kn-pill-svg {
transform: scale(1.1);
}
.kn-pill-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 2px 7px;
border-radius: 999px;
font-size: 11.5px;
font-weight: 700;
line-height: 1;
background: #f1f5f9;
color: #475569;
margin-left: 2px;
transition: all 0.2s ease;
}
.kn-filter-pill:hover {
border-color: #cbd5e1;
color: #0f172a;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}
.kn-filter-pill.active {
background: #b61f3d !important;
border-color: #b61f3d !important;
color: #ffffff !important;
box-shadow: 0 4px 14px rgba(182, 31, 61, 0.28);
}
.kn-filter-pill.active .kn-pill-svg {
stroke: #ffffff;
}
.kn-filter-pill.active .kn-pill-badge {
background: rgba(255, 255, 255, 0.22) !important;
color: #ffffff !important;
}
.kn-search-no-results {
background: #ffffff;
border-radius: 16px;
padding: 50px 30px;
border: 1px dashed #cbd5e1;
margin: 30px 0;
}
.kn-search-no-results h3 {
font-size: 20px;
font-weight: 700;
color: #172b4d;
margin: 15px 0 10px;
}
.kn-search-no-results p {
color: #64748b;
max-width: 550px;
margin: 0 auto;
font-size: 14.5px;
line-height: 1.6;
}
.row.align-equal,
.align-equal,
.row:has(.kn-target-card) {
display: flex !important;
flex-wrap: wrap !important;
align-items: stretch !important;
}
.row.align-equal > .col,
.align-equal > .col,
.row:has(.kn-target-card) > .col,
.col:has(.kn-target-card) {
display: flex !important;
flex-direction: column !important;
}
.row.align-equal > .col > .col-inner,
.align-equal > .col > .col-inner,
.row:has(.kn-target-card) > .col > .col-inner,
.col:has(.kn-target-card) > .col-inner {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
height: 100% !important;
flex: 1 1 auto !important;
}
.align-equal .kn-target-card,
.col:has(.kn-target-card) .kn-target-card,
.col-inner > .kn-target-card,
.text.kn-target-card {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
flex: 1 1 auto !important;
margin-bottom: 0 !important;
}
.row-logo-equal > .col > .col-inner {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}