:root {
--primary-color: #002749;
--secondary-color: #FFBF00;
--text-dark: #333333;
--text-normal: #000;
--text-blue: #004AAD;
--bg-light: #f8f8f8;
--bs-border-radius: 12px !important;
font-family: "Gilroy", sans-serif;
font-size: 16px;
}
body {
font-family: "Gilroy", sans-serif;
font-weight: 400;
line-height: 1.6;
font-size: 16px;
color: var(--text-dark, #333);
}
.events-classes-section .card-content .desc,
.events-classes-section .card-content p
{
min-height: 63px;
}
.social-bar-icon.zalo img
{
width: 24px;
}
.social-bar-icon.zalo
{
background: #2196F3;;
}
strong {
font-weight: 600;
}
#teamSwiper .tutor-description p
{
margin-bottom: 0;
}
#teamSwiper .tutor-description
{
text-align: justify;
}
.sec4-content-wrapper .section-title-desc,
.sec3-community-grid .section-title-desc,
.sec2-course-roadmap .section-title-desc,
.event-catelog-section .section-title-desc,
.past-events-section .section-title-desc,
.community-activities-section .section-title-desc,
.reading-program-section .section-title-desc,
.testimonials-section .section-title-desc,
.team-section .section-title-desc,
.contact-section .section-title-desc,
#offerings-section .section-title-desc {
margin-top: 16px;
}
.value-section .value-content-wrapper .image-wrapper img
{
height: 100%;
object-fit: cover
}
.demo-msg
{
display: none !important;
}
#offerings-section {
padding: 150px 0;
}
.dearflip-wrapper
{
background: #333;
}
/* Header */
.top-bar {
background: var(--primary-color);
}
/* Wrapper menu */
.main-menu ul {
list-style: none;
margin: 0;
padding: 0;
}
/* Level 1 item */
.main-menu>ul>li {
position: relative;
}
/* Link style */
.main-menu a {
text-decoration: none;
display: block;
padding: 10px 0;
}
/* ----- SUBMENU ----- */
.main-menu .sub-menu {
position: absolute;
top: 115%;
left: 0;
min-width: 200px;
background: var(--secondary-color);
border-radius: 8px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.25s ease;
z-index: 999;
}
/* Submenu item */
.main-menu .sub-menu li a {
padding: 12px 16px;
white-space: nowrap;
transition: 0.25s ease;
color: #fff;
font-feature-settings: 'liga' off, 'clig' off;
text-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.main-menu li.menu-item-has-children>a {
position: relative;
}
.main-menu li.menu-item-has-children>a::after {
content: "";
width: 11px;
height: 6px;
display: inline-block;
margin-left: 6px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: contain;
}
.main-menu .sub-menu::after {
position: absolute;
top: -12px;
left: 10%;
content: url('data:image/svg+xml;utf8,');
width: 18px;
height: 12px;
}
/* ----- SHOW SUBMENU ON HOVER ----- */
.main-menu li:hover>.sub-menu {
opacity: 1;
visibility: visible;
}
.main-menu .nav>li>a {
color: var(--primary-color);
font-weight: 600;
}
.main-menu .sub-menu li a:hover {
font-weight: 600;
color: var(--text-blue) !important;
}
.main-menu .nav>li>a:hover {
color: #f1c232;
}
.site-header .form-control {
background: #F4F4F4;
}
.badge {
font-size: 12px;
padding: 3px 6px;
}
.top-bar .find-us,
.top-bar .open-time {
gap: 32px;
}
.top-bar .find-us strong,
.top-bar .open-time strong {
font-size: 14px;
color: var(--secondary-color);
}
.top-bar .find-us .small,
.top-bar .open-time .small {
color: #fff;
position: relative;
font-size: 12px;
}
.top-bar .find-us .small::before,
.top-bar .open-time .small::before {
content: '';
top: 15%;
left: -16px;
position: absolute;
width: 1px;
height: 28px;
background: rgba(255, 255, 255, 0.50);
}
.main-menu ul li a {
text-decoration: unset;
}
.search-box input {
padding-right: 40px;
border: unset !important;
background: transparent !important;
}
.search-box input:focus {
box-shadow: unset;
}
.nav-section .search-box button svg {
width: 18px;
height: 18px;
}
.nav-section .search-box {
position: relative;
border-radius: 10px;
padding: 4px;
border: 1px solid rgba(0, 39, 73, 0.24);
background: #F3F3F3;
}
.gap-32 {
gap: 32px;
}
.menu-primary {
padding: 8px 0;
}
.flex-1 {
flex: 1;
}
.nav-section .search-box .btn-absolute-search
{
position: absolute;
display: flex;
align-items: center;
justify-content: center;
top: 0;
right: 8px;
height: 100%;
width: 36px;
}
.nav-section .search-box button {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 6px;
background: var(--M2, #FFBF00);
}
#hero-section {
position: relative;
max-height: 750px;
}
#hero-section .video-swiper .swiper-slide::before {
z-index: 998;
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: linear-gradient(270deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.24) 100%);
}
.hero-title-dev {
padding-top: 64px;
}
.hero-cta-buttons {
margin-top: 130px;
}
.video-swiper,
.video-swiper .swiper-wrapper,
.video-swiper .swiper-slide {
height: 750px !important;
}
.course-item1 {
border-radius: 5px;
background: linear-gradient(94deg, rgba(0, 74, 173, 0.90) 69.26%, rgba(0, 74, 173, 0.80) 80.39%, rgba(0, 74, 173, 0.80) 95.95%);
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.25);
transition: all 0.3s ease;
}
.course-item2 {
border-radius: 5px;
background: linear-gradient(94deg, rgba(255, 191, 0, 0.90) 69.26%, rgba(255, 191, 0, 0.80) 80.39%, rgba(255, 191, 0, 0.80) 95.95%);
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.25);
transition: all 0.3s ease;
}
.course-item {
gap: 12px;
padding: 16px 32px;
}
.hero-courses {
margin-bottom: 50px;
gap: 40px;
}
.course-item h2 {
margin-bottom: 0;
color: #FFF;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 150%;
}
.gap-30 {
gap: 30px;
}
.btn.btn-primary {
border-radius: 8px;
background: linear-gradient(94deg, rgba(0, 74, 173, 0.9) 69.26%, rgba(0, 74, 173, 0.8) 80.39%, rgba(0, 74, 173, 0.8) 95.95%);
color: #fff;
text-align: center;
font-size: 14px;
border: none;
padding: 16px 32px !important;
font-weight: 500;
line-height: 1;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.btn.btn-primary::before {
content: "";
position: absolute;
top: 0;
left: -75%;
width: 50%;
height: 100%;
background: rgba(255, 255, 255, 0.15);
transform: skewX(-20deg);
transition: all 0.5s ease;
}
.btn.btn-primary:hover {
transform: scale(1.02);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
cursor: pointer;
}
.btn.btn-primary:hover::before {
left: 125%;
}
.course-item a {
text-decoration: none;
}
.course-item p {
margin-bottom: 0;
color: #FFF;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 24px;
}
.video-swiper video {
width: 100%;
height: 100%;
object-fit: cover;
/* QUAN TRỌNG */
display: block;
}
.title_banner {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 999;
}
.hero-desc {
margin-bottom: 36px;
padding: 12px;
border-radius: 12px;
background: rgba(0, 0, 0, 0.24);
}
.btn-video-watch {
text-decoration: none;
color: #FFF;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
/* --- CSS cho Section Testimonials --- */
.testimonials-section {
padding: 70px 0;
text-align: center;
}
.testimonials-section .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
.testimonials-section .section-title {
color: #007bff;
/* Màu xanh nổi bật */
font-size: 2rem;
margin-bottom: 10px;
}
.testimonials-section .section-description {
color: #666;
margin-bottom: 40px;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
/* Tiêu đề phụ/Mô tả Section */
.section-description {
font-size: 1rem;
color: #666;
/* Màu xám nhẹ */
text-align: center;
margin-bottom: 40px;
line-height: 1.6;
max-width: 700px;
margin-left: auto;
margin-right: auto;
/* Căn giữa khối mô tả */
}
/* Trong trường hợp header có nút "Xem tất cả" (Videos, Sự kiện) */
.events-classes-section .section-header,
.videos-section .section-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
/* Căn chỉnh theo đáy của tiêu đề */
margin-bottom: 30px;
}
/* ============================================ Section Giá trị mang lại ============================== */
.value-section {
padding: 70px 0;
background-color: white;
/* Nền trắng */
text-align: center;
}
.value-section .value-list svg {
max-width: 32px;
min-width: 32px;
}
.value-section .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
.value-section .value-content-wrapper {
display: flex;
gap: 50px;
align-items: center;
text-align: left;
}
.value-section .value-list li:last-child {
margin-bottom: 0;
}
.value-section .image-column {
flex: 1.2;
position: relative;
padding: 16px;
}
.value-section .image-wrapper {
position: relative;
border-radius: 8px;
overflow: hidden;
aspect-ratio: 1.252;
margin-left: auto;
}
.value-section .value-image {
width: 100%;
height: auto;
display: block;
border-radius: 8px;
position: relative;
z-index: 5;
}
/* Các khối trang trí (Blobs/Blocks) */
.value-section .decoration {
position: absolute;
z-index: 1;
border-radius: 8px;
}
.training-methods-section .image-logo-column .image-box img {
border-radius: 12px;
aspect-ratio: 541 / 432;
padding: 14px;
}
.event-body-wrapper .event-image-column {
z-index: 999;
height: fit-content;
position: relative;
padding: 20px;
}
.image-container-wrapper .image-column::after,
.event-body-wrapper .event-image-column::after,
.value-section .image-column::after,
.training-methods-section .image-logo-column .image-box::after,
.diamond-academy-section .image-column::after {
content: "";
position: absolute;
background-color: var(--text-blue);
width: 50%;
height: 60%;
top: 0px;
left: 0px;
border-radius: 12px;
}
.image-container-wrapper .image-column::before,
.event-body-wrapper .event-image-column::before,
.value-section .image-column::before,
.training-methods-section .image-logo-column .image-box::before,
.diamond-academy-section .image-column::before {
content: "";
position: absolute;
background-color: var(--secondary-color);
width: 50%;
height: 60%;
bottom: 0px;
right: 0px;
border-radius: 12px;
}
.value-section .list-column {
flex: 1;
padding-left: 20px;
}
.value-section .value-list {
list-style: none;
padding: 0;
margin: 0;
}
.value-section .value-list li p {
color: #000;
font-size: 16px;
font-weight: 400;
line-height: 24px;
margin-bottom: 0;
}
.value-section .value-list li {
display: flex;
align-items: center;
margin-bottom: 43px;
gap: 24px;
}
.value-section .icon {
width: 20px;
height: 20px;
flex-shrink: 0;
background-color: transparent;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: bold;
}
.value-section .icon::before {
content: '✔';
color: white;
}
.value-section .check-blue {
background-color: #007bff;
}
.value-section .check-yellow {
background-color: #ffc107;
}
/* ====================== Đội ngũ nhân viên ==================================== */
.team-section {
position: relative;
padding: 70px 0;
background: linear-gradient(0deg, rgba(255, 191, 0, 0.12) 0%, rgba(255, 191, 0, 0.12) 100%), #FFF;
}
.team-section .team-card {
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
padding: 24px;
margin-bottom: 15px;
height: auto;
border-radius: 200px 200px 40px 40px;
background: #FFF;
}
/* .team-section .team-card:nth-child(2),
.team-section .team-card:nth-child(3) {
margin-top: 92px;
} */
.team-section .bg_team_top_left {
position: absolute;
top: 0;
left: 0;
}
.team-section .bg_team_top_right {
position: absolute;
top: 0;
right: 0;
}
.team-section .avatar-wrapper {
margin-bottom: 24px;
aspect-ratio: 1;
}
.team-section .bg_team_bottom_right {
position: absolute;
bottom: 0;
right: 0;
}
.team-section .team-card h3 {
color: var(--text-blue);
height: 48px;
margin-bottom: 0;
text-align: center;
font-size: 16px;
font-weight: 700;
line-height: 150%;
}
.team-section .tutor-description {
color: #000;
margin-bottom: 0;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 150%;
}
/* ================================= Định dạng Card Testimonial ========================== */
.testimonials-section .testimonial-card {
border-radius: 8px;
border: 1px solid #E1E1E1;
background: #FFF;
padding: 16px;
text-align: left;
height: auto;
}
.testimonials-section .card-header {
display: flex;
align-items: center;
margin-bottom: 12px;
}
.testimonials-section .avatar {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 15px;
object-fit: cover;
}
.testimonials-section .card-header h4 {
font-size: 1rem;
color: #333;
margin: 0;
}
.testimonials-section .card-header p {
font-size: 0.9rem;
color: #999;
margin: 0;
}
.testimonials-section .rating {
margin-bottom: 15px;
}
.testimonial-swiper {
margin-top: 50px;
padding: 5px 0;
}
.testimonials-section .review-text {
color: #000;
font-size: 14px;
font-weight: 400;
margin-bottom: 0;
line-height: 150%;
}
.testimonials-section .testimonial-card .info h4 {
color: var(--text-blue);
font-size: 16px;
font-weight: 700;
line-height: 150%;
}
.testimonials-section .swiper-pagination-bullet {
background: #ccc;
opacity: 1;
}
.testimonials-section .swiper-pagination-bullet-active {
background: #007bff;
}
.testimonials-section .swiper-button-next,
.testimonials-section .swiper-button-prev {
color: #007bff;
top: auto;
bottom: 0;
}
.testimonials-section .swiper-button-next::after {
content: '→';
font-size: 24px;
}
.testimonials-section .swiper-pagination {
bottom: 0px;
text-align: right;
width: auto;
left: auto;
right: 50px;
}
.testimonials-section .swiper-button-prev {
display: none;
}
/* ====================================== Section Videos ================================== */
.videos-section {
padding: 35px 0;
background-color: #F4F4F4;
}
.videos-section .section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
}
.videos-section .section-title {
font-size: 1.8rem;
color: #333;
border-bottom: 4px solid #ffc107;
padding-bottom: 5px;
}
.videos-section .view-all {
text-decoration: none;
color: var(--text-blue);
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.videos-section .video-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 24px;
}
.videos-section .video-card {
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
overflow: hidden;
display: flex;
flex-direction: column;
}
.videos-section .video-thumbnail-wrapper {
position: relative;
height: 180px;
overflow: hidden;
cursor: pointer;
}
.videos-section .video-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.videos-section .play-button::before {
content: "";
position: absolute;
top: 50%;
left: 55%;
transform: translate(-50%, -50%);
border-style: solid;
border-width: 10px 0 10px 15px;
border-color: transparent transparent transparent white;
}
.videos-section .video-thumbnail-wrapper:hover .play-button {
opacity: 1;
transform: translate(-50%, -50%) scale(1.1);
}
.videos-section .video-content {
padding: 18px;
flex-grow: 1;
text-align: left;
}
.videos-section .video-content h4,
.videos-section .video-content h4 a,
.videos-section .video-content h3,
.videos-section .video-content h3 a
{
color: var(--text-blue);
font-size: 16px;
font-weight: 700;
text-decoration: none;
line-height: 150%;
margin-bottom: 0;
}
.videos-section .video-location {
color: #000;
font-size: 14px;
margin-bottom: 0;
font-style: normal;
font-weight: 500;
line-height: normal;
margin-top: 12px;
}
header.site-header {
position: relative;
}
/* ====================================== Section Sự kiện / Lớp học ===================================== */
.events-classes-section {
padding: 35px 0;
background-color: #F4F4F4;
/* Nền nhẹ */
}
/* Tiêu đề và Xem tất cả */
.events-classes-section .section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
}
.view-all {
color: var(--text-blue);
font-size: 14px;
font-weight: 600;
text-decoration: none;
line-height: normal;
}
.document-classes-section .document-card h4 {
text-align: center;
margin-bottom: 0;
}
.document-classes-section .document-card h4 a {
color: var(--text-blue);
text-align: center;
font-size: 20px;
text-decoration: none;
font-style: normal;
font-weight: 700;
line-height: 150%;
}
/* Wrapper ảnh */
.post-image-large,
.small-post-image {
overflow: hidden;
}
/* Ảnh */
.post-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
/* Hover zoom */
.main-post:hover .post-img,
.small-post-item:hover .post-img {
transform: scale(1.08);
}
.child-category-slider {
overflow: visible !important;
}
.child-category-slider .swiper-wrapper {
overflow: visible;
}
.child-category-slider .swiper-slide {
overflow: visible;
}
.entry-content
{
text-align: justify;
}
.child-category-section
{
overflow: hidden;
}
.card-hover-primary {
margin-top: 18px;
transition: transform 0.5s ease, box-shadow 0.5s ease, border-color 0.5s ease !important;
border: 1px solid transparent;
}
.card-hover-primary:hover {
transform: translateY(-20px) !important;
border-color: var(--text-blue);
box-shadow: 0 12px 32px rgba(0, 44, 102, 0.15);
}
.card-hover-primary .card-img {
transition: transform 0.4s ease;
}
.card-hover-primary:hover .card-img {
transform: scale(1.08);
}
.products-grid
{
padding-bottom: 24px
}
.products-grid,
.document-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 24px;
}
.document-classes-section {
padding: 35px 0;
}
.document-classes-section .card-image-wrapper {
aspect-ratio: 402/320;
width: 100%;
margin-bottom: 8px;
}
/* Lưới 4 cột */
.events-classes-section .event-cards-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
/* 4 cột bằng nhau */
gap: 24px;
}
/* --- Định dạng Card Sự kiện/Lớp học --- */
.events-classes-section .event-card {
background-color: white;
border-radius: 12px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.events-classes-section .card-image-wrapper {
position: relative;
height: 180px;
/* Chiều cao cố định cho phần hình ảnh */
overflow: hidden;
}
.events-classes-section .card-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.events-classes-section .decorative-curve {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
background-color: #ffc107;
clip-path: ellipse(150% 100% at 0% 100%);
transform: rotate(180deg) scaleX(-1);
transform-origin: top left;
}
.events-classes-section .decorative-curve {
position: absolute;
bottom: -50px;
left: -50px;
width: 150px;
height: 150px;
background-color: #ffc107;
border-radius: 0 0 100% 0;
transform: rotate(90deg);
transform-origin: 0 0;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 50%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.events-classes-section .card-image-wrapper::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100px;
height: 100px;
background-color: #ffc107;
border-radius: 0 100% 0 0;
transform: rotate(-90deg) translate(-100px, 0);
transform-origin: 0% 100%;
}
.event-catelog-section .card-content a {
text-decoration: none;
}
.events-classes-section .card-content {
padding: 18px;
flex-grow: 1;
text-align: left;
}
.events-classes-section .card-content h4 a,
.events-classes-section .card-content h3 a {
text-decoration: none;
color: var(--text-blue);
font-size: 16px;
font-weight: 700;
line-height: 150%;
margin-bottom: 0;
}
.events-classes-section .card-content h4,
.events-classes-section .card-content h3 {
margin-bottom: 24px;
}
.archive .events-classes-section {
background: #fff;
}
.events-classes-section .card-content p {
color: #000;
font-size: 14px;
font-weight: 400;
line-height: 150%;
margin-bottom: 0;
}
.events-classes-section .card-content .read-more a {
color: var(--text-blue);
font-size: 14px;
text-decoration: none;
text-align: right;
display: inline-block;
font-weight: 600;
margin-top: 22px;
line-height: normal;
}
.fw-bold {
font-weight: 600 !important;
}
/* ====================== Section Featured =============================*/
.filter-tabs {
gap: 20px;
}
.box-shadow {
border-radius: 12px;
background: #FFF;
box-shadow: 0 10px 60px 0 rgba(38, 45, 118, 0.08);
}
.wpcf7-not-valid-tip
{
font-size: 12px;
}
.wpcf7 form.invalid .wpcf7-response-output
{
border: unset !important;
text-align: center;
margin: 0;
font-size: 14px;
color: red;
}
#courses-filter-section .swiper-container
{
overflow: visible
}
.events-classes-section .swiper
{
overflow: visible;
}
.swiper-container .event-card {
margin-top: 18px;
}
#courses-filter-section {
padding: 50px 0;
background: #F4F4F4;
}
.team-grid {
position: relative;
z-index: 99;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-top: 40px;
}
.avatar-wrapper {
border: 4px solid #fff;
border-radius: 50%;
overflow: hidden;
transition: border-color 0.3s ease;
}
.testimonial-swiper {
overflow: hidden;
}
/* pause khi hover (tuỳ chọn) */
.testimonial-swiper:hover .swiper-wrapper {
animation-play-state: paused;
}
.team-card:hover .avatar-wrapper {
border-color: var(--secondary-color);
}
.team-card {
background: #fff;
border-radius: 16px;
padding: 24px;
border: 1px solid #fff;
text-align: center;
transition: transform 0.5s ease, box-shadow 0.5s ease;
}
.team-card:hover {
transform: translateY(-48px);
border-color: var(--secondary-color);
box-shadow: 0 12px 32px rgba(0, 74, 173, 0.15);
}
.filter-controls .nav-link {
border-radius: 12px;
border: 1px solid #E1E1E1;
background: #FFF;
display: flex;
height: 56px;
padding: 0 24px;
justify-content: center;
align-items: center;
gap: 10px;
}
.filter-controls .nav-link.active {
background: var(--text-blue);
}
.filter-controls .nav-link {
color: #696984;
text-align: center;
font-size: 16px;
font-weight: 500;
line-height: 20px;
}
.event-card .card-link i {
font-size: 12px;
}
.featured-posts-section {
padding: 35px 0;
background-color: #F4F4F4;
}
.post-meta span {
display: flex;
align-items: center;
gap: 5px;
color: #000;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 150%;
text-transform: capitalize;
}
.team-section .team-card p
{
color: #000;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 150%;
}
.events-classes-section .desc
{
color: #000;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 21px */
}
.events-classes-section .container
{
overflow: hidden;
}
.overflow-line-camp-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.overflow-line-camp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.overflow-line-camp-1 {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.featured-posts-section h2 {
color: #007bff;
margin-bottom: 30px;
}
/* Bố cục chính 2 cột */
.featured-posts-section .posts-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.small-post-content a {
text-decoration: none;
}
.featured-posts-section .main-post {
display: flex;
flex-direction: column;
}
.featured-posts-section .post-image-large {
margin-bottom: 24px;
border-radius: 8px;
overflow: hidden;
}
.featured-posts-section .post-img {
width: 100%;
height: auto;
aspect-ratio: 577/380;
display: block;
}
.featured-posts-section .post-content-large h3,
.featured-posts-section .post-content-large h3 a {
color: var(--text-blue);
font-size: 20px;
text-decoration: none;
font-weight: 700;
margin-bottom: 24px;
line-height: 150%;
}
.featured-posts-section .post-content-large p {
overflow: hidden;
color: #000;
text-overflow: ellipsis;
font-size: 16px;
font-weight: 400;
line-height: 150%;
margin-bottom: 24px;
}
.featured-posts-section .read-more {
color: var(--text-blue);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 150%;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: none;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
}
.featured-posts-section .related-posts {
display: flex;
flex-direction: column;
gap: 24px;
margin-top: 0;
}
.featured-posts-section .small-post-item {
display: flex;
gap: 15px;
align-items: flex-start;
}
.featured-posts-section .small-post-image {
width: 280px;
min-width: 280px;
height: 200px;
border-radius: 12px;
aspect-ratio: 1.4;
overflow: hidden;
position: relative;
}
.featured-posts-section .small-post-image .post-img {
object-fit: cover;
width: 280px;
min-width: 280px;
height: 200px;
}
.featured-posts-section .small-post-content h4 {
color: var(--text-blue);
font-size: 16px;
margin-bottom: 24px;
font-weight: 700;
line-height: 150%;
}
.featured-posts-section .small-post-content p {
color: #000;
font-size: 14px;
font-weight: 400;
margin-bottom: 0;
line-height: 150%;
}
.featured-posts-section .post-tag {
display: inline-flex;
padding: 5px 24px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 100px;
background: var(--secondary-color);
color: #FFF;
font-size: 14px;
font-weight: 600;
line-height: 150%;
letter-spacing: 0.28px;
}
.featured-posts-section .news-tag {
display: flex;
padding: 5px 32px;
justify-content: center;
align-items: center;
gap: 10px;
width: fit-content;
border-radius: 100px;
background: var(--secondary-color);
color: #FFF;
font-size: 20px;
margin-bottom: 24px;
font-weight: 600;
line-height: 150%;
letter-spacing: 0.4px;
}
.border-line {
padding-bottom: 5px;
position: relative;
}
.border-line::before {
content: "";
background: var(--secondary-color);
position: absolute;
width: 94px;
height: 5px;
bottom: 0;
left: 0;
}
.featured-posts-section .yellow-tag {
background-color: var(--secondary-color);
color: #FFF;
font-size: 14px;
font-weight: 600;
line-height: 150%;
letter-spacing: 0.28px;
position: absolute;
bottom: 12px;
right: 12px;
margin-bottom: 0;
padding: 5px 24px;
border-radius: 100px;
}
/* =============================== Section Contact =============================== */
.contact-section {
padding: 70px 0;
text-align: center;
}
.contact-section .section-description {
color: #666;
margin-bottom: 40px;
max-width: 700px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
}
.contact-section .content-wrapper {
display: flex;
justify-content: space-between;
gap: 30px;
text-align: left;
}
.contact-section .contact-form {
flex: 0 40%
}
.contact-form .form-group p {
margin-bottom: 0;
}
.contact-section .map-placeholder iframe {
width: 100%;
}
.contact-section .map-placeholder {
flex: 0 60%
}
.contact-section .form-group input::placeholder,
.contact-section .form-group textarea::placeholder {
color: #000;
font-size: 14px;
font-weight: 400;
line-height: normal;
}
.contact-section .form-group input,
.contact-section .form-group textarea {
width: 100%;
padding: 15px;
margin-bottom: 18px;
border: 1px solid #E1E1E1;
border-radius: 5px;
box-sizing: border-box;
background-color: white;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.color-yeelow {
color: #DDA500;
font-size: 24px;
line-height: normal;
}
.contact-section .form-group textarea {
resize: vertical;
}
.contact-section .submit-button {
display: flex;
padding: 16px 50px;
justify-content: center;
align-items: center;
color: #FFF;
text-align: center;
font-size: 14px;
font-weight: 700;
border: unset !important;
border-radius: 5px;
background: var(--text-blue);
line-height: normal;
}
.contact-section .submit-button:hover {
background-color: #0056b3;
}
.contact-section .map-placeholder {
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
position: relative;
height: 450px;
}
.contact-section .map-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Footer */
.custom-footer {
background: #003a81;
color: #fff;
padding-top: 60px;
padding-bottom: 24px;
}
.footer-inner {
max-width: 1200px;
margin: auto;
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 40px;
}
.footer-logo {
margin-bottom: 50px;
}
.footer-col h4 {
margin-bottom: 15px;
font-weight: bold;
}
.footer-col ul {
list-style: none;
padding: 0;
}
.footer-col ul li {
margin-bottom: 10px;
}
.footer-col ul li a {
color: #fff;
text-decoration: none;
}
.footer-col ul li a:hover {
text-decoration: underline;
}
.entry-content h1,
.entry-content h1 span,
.post-body h1,
.post-body h1 span
{
color: var(--text-blue) !important;
font-size: 36px !important;
font-weight: 600 !important;
}
.fs-32
{
font-size: 32px !important;
}
.team-section .container
{
overflow: hidden;
}
#teamSwiper
{
margin-top: 100px;
overflow: visible;
}
.entry-content h2,
.entry-content h2 span,
.post-body h2,
.post-body h2 span
{
color: var(--text-blue) !important;
font-size: 28px !important;
font-weight: 600 !important;
}
.container-lg {
margin: 0 auto;
max-width: 1000px;
}
.entry-content h3,
.entry-content h3 span,
.post-body h3,
.post-body h3 span
{
color: var(--text-blue) !important;
font-size: 22px !important;
font-weight: 600 !important;
}
.entry-content h4,
.entry-content h4 span,
.post-body h4,
.post-body h4 span
{
color: var(--text-blue) !important;
font-size: 20px !important;
font-weight: 600 !important;
}
.entry-content h5,
.entry-content h5 span,
.post-body h5,
.post-body h5 span
{
color: var(--text-blue) !important;
font-size: 18px !important;
font-weight: 600 !important;
}
.entry-content h6,
.entry-content h6 span,
.post-body h6,
.post-body h6 span
{
color: var(--text-blue) !important;
font-size: 16px !important;
font-weight: 600 !important;
}
.entry-content b
{
font-weight: 600;
}
.entry-content ul
{
margin-bottom: 8px;
}
.footer-right a
{
text-decoration: none;
color: #fff;
text-transform: capitalize;
}
.fs-15
{
font-size: 15px;
}
.text-justify
{
text-align: justify;
}
.entry-content ul li
{
margin-bottom: 8px;
}
.entry-content blockquote
{
max-width: 800px;
margin: 0 auto;
}
.short_content
{
text-align: justify;
}
.product-description blockquote,
.post-body blockquote,
.short_content
{
max-width: 700px;
margin: 0 auto;
}
.entry-content p
{
margin-bottom: 8px;
}
.entry-content img
{
width: 100%;
}
.entry-content img,
.product-description img
{
margin-top: 24px !important;
margin-bottom: 24px !important;
}
img.aligncenter
{
display: block;
margin: 0 auto;
}
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6
{
margin: 18px 0;
}
.entry-content
{
color: #000;
font-weight: 400;
}
.footer-social {
display: flex;
}
.footer-social a {
width: 30px;
color: #fff;
font-size: 20px;
margin-right: 10px;
}
.site-footer .footer-col p {
margin-bottom: 0;
}
.copyright {
padding-top: 24px;
margin-top: 24px;
font-size: 14px;
opacity: 0.8;
border-top: 1px solid var(--secondary-color);
}
.text-primary {
color: var(--primary-color) !important;
}
.bg-primary {
background-color: var(--primary-color) !important;
}
.btn-primary {
background-color: var(--primary-color) !important;
border-color: var(--primary-color) !important;
}
/* Định nghĩa màu phụ cho các thành phần đặc trưng */
.text-warning {
color: var(--secondary-color) !important;
}
.bg-warning-custom {
background-color: var(--secondary-color) !important;
}
.btn-secondary-custom {
background-color: var(--secondary-color) !important;
border-color: var(--secondary-color) !important;
color: var(--primary-color) !important;
}
/* --- 2. Styling cho Hero Section --- */
.main-header {
/* Đặt chiều cao tối thiểu cho phép nội dung căn giữa */
min-height: 450px;
}
.img-absolute {
display: none;
width: 177px;
max-width: 177px;
min-width: 177px;
height: 168px;
top: 30%;
margin-bottom: 0;
right: -120px;
position: absolute;
}
.section-title p {
margin-bottom: 0;
}
.about-body .main-content {
color: #000;
}
.about-body .main-content:first-child {
position: relative;
}
.about-body .stat-item {
padding: 32px 53px;
}
.about-body {
grid-template-columns: repeat(12, 1fr);
grid-template-rows: auto;
column-gap: 60px;
row-gap: 38px;
position: relative;
}
.about-body>*:nth-child(1) {
grid-column: 1/6;
grid-row: 1/5;
}
.about-body>*:nth-child(2) {
grid-column: 6/10;
grid-row: 1/5;
}
.about-body>*:nth-child(3) {
grid-column: 10/13;
grid-row: 1/2;
}
.about-body>*:nth-child(4) {
grid-column: 10/13;
grid-row: 2/3;
}
.about-body>*:nth-child(5) {
grid-column: 10/13;
grid-row: 3/4;
}
.about-body>*:nth-child(6) {
grid-column: 10/13;
grid-row: 4/5;
}
.about-body>.primary-stat,
.about-body>.primary-stat {
background: var(--text-blue);
border-radius: 12px;
}
.about-body>.primary-stat .stat-number,
.about-body>.primary-stat .stat-number {
color: #FFF;
text-align: center;
font-size: 32px;
font-style: normal;
font-weight: 600;
line-height: normal;
margin-bottom: 0;
}
.about-body>.secondary-stat,
.about-body>.secondary-stat {
background: var(--secondary-color);
border-radius: 12px;
}
.about-body>.secondary-stat .stat-number,
.about-body>.secondary-stat .stat-number {
color: var(--text-blue);
text-align: center;
font-size: 32px;
font-style: normal;
font-weight: 600;
margin-bottom: 0;
line-height: normal;
}
#courses-filter-section .search-bar input:focus {
box-shadow: unset;
}
#courses-filter-section .search-bar input::placeholder {
color: rgba(105, 105, 132, 0.70);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
#courses-filter-section .search-bar input {
padding-top: 8px;
padding-bottom: 8px;
padding-right: 40px;
border: unset !important;
background: transparent !important;
}
#courses-filter-section .search-bar {
position: relative;
background: #fff;
border-radius: 10px;
padding: 4px;
border: 1px solid rgba(0, 39, 73, 0.24);
}
.filter-tabs .nav-link {
transition: all 0.3s ease;
}
.filter-tabs .nav-link:hover {
background: var(--text-blue);
color: #fff;
}
.filter-tabs .nav-link.active {
background: var(--text-blue);
color: #fff;
}
#courses-filter-section .search-bar button {
position: absolute;
top: 6px;
right: 6px;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 6px;
background: var(--M2, #FFBF00);
}
#about-stats-section {
padding-top: 50px;
}
#about-stats-section .content-text {
color: #000;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 24px;
}
.text-right {
text-align: right;
}
.title-header .section-title {
color: var(--M1, #004AAD);
font-size: 24px;
font-style: normal;
margin-bottom: 0;
font-weight: 500;
line-height: normal;
}
.text-center
{
text-align: center !important;
}
.title-header {
margin-bottom: 24px;
position: relative;
z-index: 99;
}
.title-header .section-subtitle p {
margin-bottom: 0;
}
.title-header .section-subtitle {
margin-top: 12px;
color: #004AAD;
font-size: 24px;
font-weight: 500;
margin-bottom: 0;
}
.pre-line {
white-space: pre-line;
}
.section-title-desc {
color: var(--text-normal);
font-size: 14px;
font-weight: 400;
margin-bottom: 0;
line-height: 24px;
text-transform: capitalize;
}
.hero-title {
color: #FFF;
text-shadow: 0 3px 3px rgba(0, 0, 0, 0.40);
font-size: 40px;
line-height: 200%;
font-weight: 600;
text-transform: uppercase;
}
.hero-subtitle {
font-size: 1.5rem;
}
/* Điều chỉnh màu cho nút Đăng ký (vì nút primary trong HTML là màu xanh) */
.hero-cta-buttons .btn-secondary-custom {
color: var(--primary-color) !important;
}
/* --- 3. Styling cho Stats Section (Thống kê) --- */
.academic-excellence-section {
background-color: white;
}
.stats-block-wrapper .stat-item {
text-align: center;
padding: 20px;
}
.stat-label {
color: #FFF;
text-align: center;
font-size: 16px;
font-weight: 400;
margin-bottom: 0;
}
.stats-block-wrapper .stat-number {
font-size: 2.5rem;
line-height: 1;
}
/* Áp dụng màu vàng cho Secondary Stat */
.stats-block-wrapper .secondary-stat {
background-color: var(--secondary-color);
color: var(--primary-color);
}
/* --- 4. Styling cho Offerings Section (Dịch vụ) --- */
.offering-item p {
color: #FFF;
font-size: 14px;
text-align: left;
margin-bottom: 0;
font-weight: 500;
height: 45px
}
.offering-item {
cursor: pointer;
padding: 42px 32px;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.offering-item {
border-radius: 12px;
background: var(--text-blue);
}
.offering-item::before {
content: "";
position: absolute;
top: 0;
left: -75%;
width: 30%;
height: 100%;
background: rgba(255, 255, 255, 0.15);
transform: skewX(-20deg);
transition: all 0.5s ease;
}
.offering-item:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
cursor: pointer;
}
.offering-item:hover::before {
left: 125%;
}
.offering-item.second-box {
border-radius: 12px;
background: var(--secondary-color);
}
.tab-content .tab-pane {
color: #000;
text-align: center;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 24px;
}
.top-choice-section .section-title-desc,
.value-section .section-title-desc,
.target-goals-section .section-title-desc,
#courses-filter-section .section-title-desc {
margin-top: 16px;
}
.offering-item .offering-label {
color: #FFF;
font-size: 18px;
margin-bottom: 12px;
text-align: left;
font-style: normal;
font-weight: 700;
line-height: 24px;
}
.offering-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
/* Áp dụng màu vàng cho Secondary Box */
.secondary-box {
background-color: var(--secondary-color) !important;
color: var(--primary-color) !important;
}
/* --- 5. Styling cho Course/Article Sections (Thẻ bài viết/khóa học) --- */
.course-listing-section,
.article-listing-section {
padding-top: 20px;
padding-bottom: 20px;
}
.card-img-top {
height: 180px;
/* Chiều cao cố định cho hình ảnh thẻ */
object-fit: cover;
}
.card-title {
font-weight: 600;
}
/* Định dạng đặc trưng cho link "Xem thêm" */
.card-link {
text-decoration: none;
font-weight: bold;
}
/* ---------------------------------------------------- */
/* 1. CSS Dành cho Mục tiêu Hướng tới (Override Bootstrap) */
/* ---------------------------------------------------- */
.target-goals-section {
padding: 60px 0;
text-align: center;
background: #F4F4F4;
}
.target-goals-section .section-description {
color: #666;
max-width: 700px;
margin: 0 auto 40px;
line-height: 1.6;
}
.goals-tabs-container {
overflow: hidden;
border-radius: 12px;
border: 1px solid var(--text-blue) !important;
background: rgba(255, 255, 255, 0.00);
box-shadow: 0 2px 24px 0 rgba(0, 74, 173, 0.12);
}
.goals-tabs-container .nav-link {
color: var(--text-blue);
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
/* Header/Navigation Tabs (Sử dụng Flex để chia 3 cột) */
.target-goals-section .tabs-header {
display: flex;
border-bottom: 1px solid #eee;
/* Đảm bảo tab chiếm toàn bộ chiều rộng (ghi đè nav-pills) */
width: 100%;
padding: 0;
margin: 0;
}
.tab-content {
padding: 56px 93px;
}
.top-choice-section {
background: #004AAD;
}
.target-goals-section .tab-button {
flex-grow: 1;
border-radius: 0;
/* Xóa border-radius của nav-pills */
margin: 0;
/* Xóa margin giữa các tab của nav-pills */
padding: 20px 15px;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
background: #fff;
min-height: 100px;
border-right: 1px solid #eee;
border-bottom: none;
transition: background-color 0.3s, color 0.3s;
}
/* Loại bỏ border cuối */
.target-goals-section .tabs-header .tab-button:last-child {
border-right: none;
}
/* Style cho Tab Active */
.target-goals-section .tab-button.active {
background-color: var(--text-blue) !important;
/* Màu nền xanh đậm */
color: #fff !important;
/* Chữ màu trắng */
border-right: none;
}
/* Style icon chung */
.target-goals-section .icon svg {
width: 40px;
height: 40px;
stroke-width: 2;
}
/* Icon Active (Màu vàng cam) */
.target-goals-section .tab-button.active .icon svg path {
fill: var(--secondary-color) !important;
}
.target-goals-section .tab-button .icon svg path {
fill: var(--text-blue) !important;
}
/* Nội dung của các tab (sử dụng padding của Bootstrap p-4) */
.target-goals-section .tab-content {
line-height: 1.8;
color: #555;
font-size: 15px;
background: #fff;
}
/* ----------------------------- */
/* Styles cho phần TOP 1 - Lựa Chọn Hàng Đầu */
/* ----------------------------- */
.top-choice-section {
padding: 67px 0;
color: #fff;
text-align: center;
}
/* Header */
.top-choice-section .section-header {
max-width: 800px;
margin: 0 auto 50px;
}
.top-choice-section .section-title {
color: #fff;
}
.top-choice-section .section-description {
color: var(--light-color);
opacity: 0.85;
line-height: 1.6;
}
/* Bố cục Grid cho 6 mục */
.top-choice-section .features-grid {
display: grid;
/* 3 cột bằng nhau trên desktop */
grid-template-columns: repeat(3, 1fr);
gap: 50px;
/* Khoảng cách giữa các ô */
}
/* Mục Nội dung */
.top-choice-section .feature-item>div {
max-width: 260px
}
.top-choice-section .feature-item {
text-align: center;
color: var(--light-color);
}
.top-choice-section .feature-item:nth-child(3) {
display: flex;
justify-content: end;
}
.top-choice-section .feature-item:nth-child(6) {
display: flex;
justify-content: end;
}
.top-choice-section .feature-item:nth-child(2) {
display: flex;
justify-content: center;
}
.top-choice-section .feature-item:nth-child(5) {
display: flex;
justify-content: center;
}
/* Icon */
.top-choice-section .icon-box {
margin-bottom: 12px;
display: inline-flex;
width: 50px;
height: 50px;
aspect-ratio: 1/1;
}
.top-choice-section .icon-box svg {
width: 36px;
height: 36px;
color: var(--icon-color);
stroke: var(--icon-color);
stroke-width: 2;
}
.top-choice-section .section-title-desc {
color: #fff;
}
/* Tiêu đề mục */
.top-choice-section .feature-title {
color: var(--secondary-color);
text-align: center;
font-size: 18px;
font-weight: 700;
line-height: 24px;
}
/* Mô tả mục */
.top-choice-section .feature-text {
color: #FFF;
text-align: center;
font-size: 14px;
margin-bottom: 0;
font-weight: 500;
line-height: 24px;
}
.value-section-about .list-column {
flex: 1.2;
padding: 0;
}
.value-section-about .image-column {
flex: 1;
}
.diamond-academy-section {
padding-bottom: 50px;
padding-top: 40px;
background-color: #ffffff;
}
.diamond-academy-section .title-header .section-title {
font-weight: 600;
}
.bg-gray {
background: #F5F5F5;
}
#breadcrumbs span,
#breadcrumbs a {
text-decoration: none;
color: var(--text-blue);
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 150%;
}
#breadcrumbs {
padding: 16px 0;
margin-bottom: 0;
}
/* Header Info */
.diamond-academy-section .header-info {
display: flex;
justify-content: space-between;
align-items: flex-end;
/* Căn chỉnh thông tin tổ chức xuống cuối */
margin-bottom: 30px;
}
.diamond-academy-section .academy-title {
color: var(--primary-blue-dark);
font-size: 20px;
font-weight: 700;
margin: 0;
text-transform: uppercase;
}
.diamond-academy-section .academy-subtitle {
color: var(--primary-blue-dark);
font-size: 18px;
font-weight: 500;
margin: 5px 0 0;
}
.diamond-academy-section .organization-info {
color: var(--light-text-color);
font-size: 14px;
text-align: right;
margin: 0;
}
/* Main Content Wrapper (Flexbox 2 cột) */
.diamond-academy-section .content-wrapper {
display: flex;
gap: 40px;
}
/* Cột Văn bản */
.diamond-academy-section .text-column {
flex: 1;
/* Chiếm khoảng 60% */
max-width: 50%;
color: var(--text-color);
font-size: 15px;
line-height: 1.7;
padding-right: 20px;
}
.diamond-academy-section .text-column p {
margin-bottom: 20px;
}
/* Cột Hình ảnh */
.diamond-academy-section .image-column {
flex: 1;
/* Chiếm khoảng 40% */
max-width: 50%;
position: relative;
padding: 16px;
}
.diamond-academy-section .image-box img,
.image-container-wrapper .image-box img {
height: 100%;
object-fit: cover;
border-radius: 12px;
}
.image-container-wrapper .image-column {
padding: 14px;
height: 100%;
}
.diamond-academy-section .image-box,
.image-container-wrapper .image-box {
position: relative;
border-radius: 12px;
z-index: 999;
height: 100%;
background: linear-gradient(0deg, rgba(0, 74, 173, 0.12) 0%, rgba(0, 74, 173, 0.12) 100%), url() lightgray 50% / cover no-repeat;
}
/* --- Decoration Styles --- */
/* Khối vuông/chữ nhật nhỏ góc dưới */
.diamond-academy-section .decoration-square {
position: absolute;
width: 60px;
height: 60px;
z-index: 2;
}
.diamond-academy-section .bottom-left-yellow {
background-color: var(--secondary-yellow);
bottom: -15px;
/* Dịch xuống dưới */
left: -15px;
/* Dịch sang trái */
z-index: 3;
}
.diamond-academy-section .bottom-right-blue {
background-color: var(--primary-blue-dark);
bottom: -15px;
right: -15px;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
/* Hình vuông */
/* Tạo hiệu ứng góc cắt nếu cần, nhưng trong ảnh là hình vuông */
z-index: 3;
}
/* Thanh trang trí dài bên phải ảnh */
.diamond-academy-section .decoration-strip.right-yellow {
position: absolute;
background-color: var(--secondary-yellow);
width: 20px;
/* Chiều rộng thanh */
height: 90%;
/* Chiều cao gần bằng ảnh */
top: 5%;
right: -30px;
/* Dịch ra ngoài cùng bên phải */
z-index: 0;
/* Đặt dưới ảnh */
}
.training-methods-section {
background-color: var(--primary-blue-dark);
color: var(--text-color);
position: relative;
}
/* Main Content Wrapper (Flexbox 2 cột) */
.training-methods-section .method-content-wrapper {
display: flex;
align-items: center;
}
.method-content-wrapper .text-column {
padding: 70px 80px;
background: #004AAD;
}
.training-methods-section .method-list li p {
margin-bottom: 0;
color: #FFF;
font-size: 14px;
font-weight: 400;
line-height: normal;
}
/* Cột Văn bản/Phương pháp (Trái) */
.training-methods-section .text-column {
flex: 1;
/* Chiếm khoảng 60% */
max-width: 50%;
}
.training-methods-section .section-title {
color: #FFF;
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.training-methods-section .method-list li svg {
width: 32px;
min-width: 32px;
}
.method-content-wrapper .text-column {
padding-right: 164px;
}
/* Danh sách kiểm tra */
.training-methods-section .method-list {
list-style: none;
padding: 0;
}
.training-methods-section .method-item {
display: flex;
align-items: flex-start;
margin-bottom: 20px;
font-size: 16px;
line-height: 1.5;
}
.training-methods-section .checkbox-icon {
display: inline-flex;
justify-content: center;
align-items: center;
min-width: 25px;
/* Đảm bảo khoảng cách */
margin-right: 15px;
padding: 5px;
border-radius: 4px;
}
/* Màu cho các dấu kiểm */
.training-methods-section .check-blue {
background-color: var(--primary-blue-dark);
border: 1px solid var(--text-color);
stroke: var(--text-color);
}
.training-methods-section .check-yellow {
background-color: var(--secondary-yellow);
border: 1px solid var(--secondary-yellow);
stroke: var(--primary-blue-dark);
/* Màu dấu kiểm bên trong màu vàng */
}
/* Cột Hình ảnh/Logo (Phải) */
.training-methods-section .image-logo-column {
flex: 1;
max-width: 50%;
display: flex;
align-items: center;
justify-content: space-between;
height: 400px;
/* Chiều cao cố định cho khối này */
}
.training-methods-section .text-column,
.training-methods-section .image-logo-column {
position: relative;
}
/* Văn bản dọc */
.training-methods-section .image-logo-column .vertical-text {
position: absolute;
writing-mode: vertical-rl;
transform: rotate(180deg);
left: 0;
color: var(--text-blue);
font-size: 64px;
font-weight: 800;
display: flex;
align-items: end;
top: 20px;
width: fit-content;
justify-content: end;
font-style: normal;
line-height: 1;
z-index: 999;
text-transform: uppercase;
}
.training-methods-section .text-column .vertical-text {
position: absolute;
writing-mode: vertical-rl;
transform: rotate(180deg);
right: 0;
color: #FFF;
display: flex;
align-items: end;
top: 20px;
width: fit-content;
justify-content: end;
font-size: 88px;
font-style: normal;
line-height: 1;
font-weight: 800;
text-transform: uppercase;
}
.training-methods-section .text-column .vertical-text svg {
transform: rotate(180deg);
}
.training-methods-section .diamond-icon {
margin-top: 10px;
}
.training-methods-section .method-list li {
display: flex;
align-items: center;
margin-bottom: 25px;
gap: 24px;
}
.training-methods-section::before {
position: absolute;
content: "";
height: 100%;
width: 50%;
top: 0;
left: 0;
background: var(--text-blue);
}
/* Khung ảnh */
.training-methods-section .image-box {
position: relative;
/* Dùng flex để canh giữa ảnh trong cột */
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin-left: 140px;
height: 100%;
padding: 30px;
/* Khoảng trống cho các góc vàng/xanh */
}
.training-methods-section .main-image {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 6px;
z-index: 2;
/* Thêm các khối màu trang trí: Dùng pseudo-elements cho đơn giản */
box-shadow: 15px 15px 0 0 var(--secondary-yellow),
-15px -15px 0 0 var(--primary-blue-dark);
/* Thay đổi box-shadow để mô phỏng các góc màu trong hình */
}
.news-list-section .news-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 24px;
}
.news-card .news-body {
padding: 18px;
}
.postpage-wrapper .featured-posts-section {
padding-top: 40px;
padding-bottom: 70px;
background: #fff;
}
.news-list-section {
padding: 70px 0;
background: #F4F4F4;
}
.news-card {
background: #fff;
border-radius: 12px;
}
.news-thumb img {
width: 100%;
height: 180px;
object-fit: cover;
border-radius: 10px;
}
.news-body a {
text-decoration: none;
}
.news-body h3 {
color: var(--text-blue);
font-size: 16px;
margin-bottom: 0;
font-style: normal;
font-weight: 700;
line-height: 150%;
/* 24px */
}
.news-card .read-more {
color: var(--text-blue);
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.news-body p {
color: #000;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 150%;
}
.pagination-wrapper {
margin-top: 32px;
text-align: center;
}
.pagination-wrapper a,
.pagination-wrapper span {
margin: 0 6px;
padding: 8px 12px;
border-radius: 6px;
background: #f2f2f2;
}
.pagination-wrapper .current {
background: #007bff;
color: #fff;
}
/* =====================Page Contact==================== */
/* WRAPPER LAYOUT */
.page-contact-wrapper {
display: flex;
gap: 70px;
align-items: flex-start;
margin-top: 40px;
}
.page-contact-sub {
color: #000;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 24px;
margin-bottom: 24px;
}
/* TITLES */
.page-contact-info {
flex: 0 40%;
}
.page-contact-row p {
margin-bottom: 24px;
}
.page-contact-map {
flex: 1;
}
.page-contact-map iframe {
border-radius: 5px;
border: 1px solid #E1E1E1;
box-shadow: 0 4px 12px 0 rgba(38, 45, 118, 0.25);
}
.page-contact-title p {
margin-bottom: 0;
}
.page-contact-info-list label {
color: #000;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.page-contact-info-list .value {
color: var(--text-blue);
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.page-contact-title {
color: var(--text-blue);
font-size: 24px;
font-style: normal;
font-weight: 500;
margin-bottom: 24px;
line-height: normal;
}
.page-contact-info-list a {
text-decoration: none;
color: var(--text-blue);
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.page-contact-desc {
color: #000;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 24px;
margin-bottom: 24px;
}
/* INFO LIST */
.page-contact-info-list {
list-style: none;
padding: 0;
margin: 0;
}
.page-contact-info-list li {
display: flex;
gap: 24px;
margin-bottom: 16px;
}
.page-contact-info-list .icon {
width: 56px;
height: 56px;
border-radius: 8px;
background: #F5F5F5;
display: flex;
align-items: center;
justify-content: center;
}
/* MAP */
.page-contact-map iframe {
width: 100%;
height: 350px;
border-radius: 16px !important;
}
/* FORM INPUTS */
.page-contact-form .page-contact-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
}
.page-contact-form input::placeholder,
.page-contact-form textarea::placeholder {
font-size: 16px;
color: var(--text-blue);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.page-contact-form .btn-primary {
width: fit-content;
padding: 16px 50px !important;
}
.page-contact-form input:focus,
.page-contact-form textarea:focus {
border: 1px solid #E1E1E1;
}
.page-contact-form input,
.page-contact-form textarea {
width: 100%;
outline: unset;
border: 1px solid #E1E1E1;
padding: 14px;
border-radius: 8px;
font-size: 16px;
color: var(--text-blue);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
/* SUBMIT BUTTON */
.page-contact-submit {
margin-top: 20px;
padding: 12px 28px;
font-size: 16px;
background: #003366;
color: white;
border-radius: 8px;
border: none;
cursor: pointer;
transition: .2s;
}
.page-contact-submit:hover {
background: #001f4d;
}
.page-contact-section {
padding-top: 40px;
}
.page-contact-form-section {
padding-top: 60px;
padding-bottom: 70px;
}
/* ------------------------------------------- */
/* A. Event Detail Header (Ảnh nền và Thanh ngày) */
/* ------------------------------------------- */
.event-detail-header {
/* Đặt ảnh nền sự kiện ở đây */
background: url('path/to/event_background_image.jpg') no-repeat center center;
background-size: cover;
padding: 24px 0;
position: relative;
}
.event-content-column .info-checklist {
display: grid;
grid-template-columns: repeat(2, 1fr);
;
margin: 0;
padding: 0;
}
.event-content-column .info-checklist li {
display: flex;
align-items: center;
margin-bottom: 12px;
gap: 24px;
}
.event-content-column .info-checklist li p {
color: #000;
margin-bottom: 0;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 24px;
}
.event-detail-desc {
margin-top: 15px;
border-radius: 12px;
background: rgba(0, 0, 0, 0.24);
padding: 12px;
color: #FFF;
max-width: 500px;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 24px;
}
.event-detail-header .header-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
/* Lớp phủ đen mờ */
}
.event-detail-header .event-main-title {
color: #FFF;
text-shadow: 0 3px 3px rgba(0, 0, 0, 0.40);
font-size: 40px;
font-style: normal;
font-weight: 600;
line-height: 180%;
margin-bottom: 0;
text-transform: uppercase;
}
.event-main-bottom {
gap: 70px;
}
.event-detail-header-body .event-location {
border-radius: 12px;
padding: 12px;
background: rgba(255, 255, 255, 0.24);
}
.event-detail-header .event-stats-bar h6 {
color: #FFF;
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: 150%;
}
.event-detail-header .event-stats-bar {
display: flex;
align-items: center;
background-color: var(--text-light);
gap: 24px;
overflow: hidden;
}
.event-detail-header .event-time-box {
background-color: var(--secondary-color);
color: #000;
padding: 12.136px 22.336px 12.136px 23.164px;
text-align: center;
width: 91px;
border-radius: 9.927px;
padding: 12.136px 22.336px 12.136px 23.164px;
}
.event-detail-header .event-time-box .time {
color: #000;
font-size: 36px;
font-style: normal;
font-weight: 800;
line-height: 150%;
}
.event-detail-header .event-time-box .unit {
color: #000;
text-align: center;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 150%;
}
.event-detail-header .event-location {
flex-grow: 1;
padding: 15px 25px;
text-align: center;
}
.event-detail-header .event-location .label {
color: #FFF;
font-size: 14px;
font-style: normal;
font-weight: 500;
margin-bottom: 16px;
line-height: 24px;
}
.event-detail-header .event-location .value {
color: #FFF;
font-size: 24px;
font-style: normal;
font-weight: 800;
margin-bottom: 0;
line-height: 24px;
}
.community-swiper {
margin-bottom: 50px;
}
/* 1. Đảm bảo tất cả các slide có hiệu ứng chuyển đổi mượt mà */
.community-swiper .swiper-slide {
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
transform: scale(0.95);
aspect-ratio: 724/383;
}
/* 2. Định nghĩa phong cách cho slide đang hoạt động */
/* .swiper-slide-active là slide hiển thị đầu tiên trong nhóm 3 slide. */
/* Trong cấu hình 3 cột, để nhắm đến slide ở GIỮA, bạn cần nhắm mục tiêu là slide THỨ HAI */
/* Tức là slide thứ hai trong nhóm các slide được hiển thị. */
/* Slide GIỮA (slide thứ 2) khi hiển thị 3 cột (từ 992px trở lên) */
@media (min-width: 992px) {
.community-swiper .swiper-slide:nth-child(2).swiper-slide-visible {
opacity: 1;
transform: scale(1.05);
/* Phóng to slide chính giữa */
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
/* Thêm bóng nổi bật */
}
/* Đảm bảo slide thứ 1 và thứ 3 vẫn bị mờ */
.community-swiper .swiper-slide:nth-child(1).swiper-slide-visible,
.community-swiper .swiper-slide:nth-child(3).swiper-slide-visible {
opacity: 0.7;
transform: scale(0.95);
box-shadow: none;
}
}
.event-detail-header .event-register {
display: flex;
align-items: center;
padding-right: 20px;
}
.event-detail-header .register-btn {
background-color: var(--primary-blue-dark);
color: var(--text-light);
border: none;
padding: 10px 25px;
border-radius: 4px;
font-weight: 600;
cursor: pointer;
}
/* ------------------------------------------- */
/* B. Event Detail Body (Nội dung và Checklist) */
/* ------------------------------------------- */
.event-detail-body {
padding: 50px 0;
}
.event-detail-body .event-body-wrapper {
display: flex;
gap: 40px;
}
.event-detail-body .event-image-column {
flex: 0 45%;
}
.event-detail-body .main-event-image {
width: 100%;
position: relative;
z-index: 999;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.event-detail-body .event-content-column {
flex: 0 55%;
text-align: left;
}
.event-detail-header-body {
border-radius: 12px;
padding: 80px;
aspect-ratio: 1280/620;
background-repeat: no-repeat !important;
background-size: 100% 100%;
}
.social-links {
display: flex;
gap: 20px;
align-items: center;
margin-bottom: 24px;
color: #000;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 150%;
}
.related-posts a {
align-items: start;
display: flex;
gap: 16px;
}
.event-content-column .btn-primary {
margin-top: 12px;
}
.social-links ul {
display: flex;
gap: 10px;
padding: 0;
margin: 0;
list-style: none;
}
.event-detail-body .content-header {
color: var(--primary-blue-dark);
font-size: 24px;
margin-bottom: 15px;
}
.event-detail-body .event-description {
color: #000;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 24px;
}
.event-detail-body .info-checklist {
margin-top: 24px;
}
.event-detail-body .info-item {
display: flex;
align-items: flex-start;
margin-bottom: 15px;
}
.event-detail-body .info-item .icon-check {
color: var(--secondary-yellow);
font-weight: bold;
margin-right: 10px;
font-size: 18px;
line-height: 1.5;
}
.event-detail-body .info-item p {
color: var(--text-dark);
font-size: 15px;
margin: 0;
line-height: 1.5;
}
.event-detail-body .read-more-btn {
background-color: var(--primary-blue-dark);
color: var(--text-light);
border: none;
padding: 10px 30px;
border-radius: 4px;
font-weight: 600;
cursor: pointer;
margin-top: 15px;
}
/* ------------------------------------------- */
/* C. Past Events Grid (Sự kiện đã diễn ra) */
/* ------------------------------------------- */
.past-events-section {
padding: 70px 0;
background-color: #F4F4F4;
text-align: center;
}
.past-events-section .section-heading,
.community-activities-section .section-heading,
.reading-program-section .section-heading {
color: var(--primary-blue-dark);
font-size: 28px;
font-weight: 700;
margin-bottom: 40px;
}
.past-events-section .events-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 50px;
}
.past-events-section .event-card {
border: 1px solid var(--border-color);
border-radius: 8px;
overflow: hidden;
position: relative;
background: #fff;
border-radius: 12px;
text-align: left;
}
.past-events-section .event-thumbnail {
width: 100%;
aspect-ratio: 411/247;
border-radius: 12px;
object-fit: cover;
}
.past-events-section .card-body {
padding: 12px 24px;
}
.past-events-section .card-title {
margin-bottom: 24px;
line-height: 1;
}
.past-events-section .card-title a {
color: var(--text-blue);
font-size: 16px;
text-decoration: none;
font-style: normal;
font-weight: 700;
line-height: 150%;
/* 24px */
}
.past-events-section .card-info li {
display: flex;
gap: 10px;
margin-bottom: 15px;
align-items: center;
}
.past-events-section .card-info {
padding: 0;
margin: 0;
list-style: none;
overflow: hidden;
color: #000;
text-overflow: ellipsis;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 150%;
/* 21px */
}
.past-events-section .card-info .icon-star,
.past-events-section .card-info .icon-money {
color: var(--secondary-yellow);
margin-right: 5px;
}
/* ------------------------------------------- */
/* D. Hoạt động Cộng đồng & Chương trình Độc lập */
/* ------------------------------------------- */
.community-activities-section {
padding: 60px 0;
background-color: #f8f8f8;
text-align: center;
}
.community-activities-section .activities-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.community-activities-section .activity-card .desc p {
margin-bottom: 0;
}
.community-activities-section .activity-card .desc {
max-width: 331px;
padding: 12px;
border-radius: 12px;
background: rgba(0, 0, 0, 0.24);
color: #FFF;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 24px;
}
.community-activities-section .activity-card {
position: relative;
border-radius: 8px;
overflow: hidden;
height: 100%;
text-align: left;
}
.community-activities-section .activity-thumbnail {
width: 100%;
object-fit: cover;
aspect-ratio: 724 / 383;
}
.community-activities-section .overlay-text .title {
color: var(--White, #FFF);
font-size: 32px;
margin: 0;
max-width: 200px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.community-activities-section .overlay-text {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: var(--secondary-yellow);
color: var(--primary-blue-dark);
padding: 24px;
font-weight: 700;
font-size: 18px;
}
/* --- Chương trình Độc lập --- */
.reading-program-section {
padding: 60px 0;
background-color: #F4F4F4;
text-align: center;
}
.program-swiper {
margin-top: 50px;
}
.reading-program-section .program-card .title {
color: var(--text-blue);
font-size: 16px;
font-style: normal;
margin-bottom: 24px;
font-weight: 700;
line-height: 150%;
/* 24px */
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.reading-program-section .program-card {
background: #fff;
}
.reading-program-section .program-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.reading-program-section .program-card {
border: 1px solid var(--border-color);
border-radius: 8px;
overflow: hidden;
text-align: left;
}
.reading-program-section .program-thumbnail {
width: 100%;
aspect-ratio: 302/172;
object-fit: cover;
}
.reading-program-section .card-content {
padding: 18px;
}
.reading-program-section .card-date {
font-size: 12px;
color: #999;
margin-bottom: 5px;
}
.reading-program-section .card-description {
color: #000;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 150%;
margin-bottom: 22px;
}
.reading-program-section .card-link {
color: var(--text-blue);
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.event-catelog-section {
padding-top: 24px;
padding-bottom: 70px;
}
.event-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 30px;
margin-top: 40px;
}
.event-card {
background: #fff;
border-radius: 12px;
overflow: hidden;
display: flex;
flex-direction: column;
height: 100%;
transition: transform .2s ease, box-shadow .2s ease;
}
.event-card:hover {
transform: translateY(-3px);
}
.event-thumbnail {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.event-card .card-content {
padding: 18px;
flex: 1;
display: flex;
flex-direction: column;
}
.event-card .title {
color: var(--text-blue);
font-size: 16px;
font-style: normal;
margin-bottom: 24px;
font-weight: 700;
line-height: 150%;
/* 24px */
}
.event-card .card-description {
color: #000;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 150%;
}
.event-card .card-link {
font-weight: 600;
color: var(--text-blue);
text-decoration: none;
margin-top: 12px;
}
.event-card .card-link:hover {
text-decoration: underline;
}
/* Pagination Wrapper */
.pagination {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
justify-content: center;
margin: 24px 0;
}
/* Pagination Item */
.pagination a,
.pagination span,
.page-numbers a,
.page-numbers span {
display: flex;
width: 40px;
height: 40px;
padding: 12px;
justify-content: center;
align-items: center;
flex-shrink: 0;
border-radius: 8px;
font-size: 14px;
text-decoration: none;
transition: all 0.2s ease;
color: rgba(26, 26, 26, 0.50);
text-align: center;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px;
}
/* Hover */
.pagination a:hover,
.page-numbers a:hover {
background: #f5f5f5;
border-color: #ccc;
}
/* Active Page */
.pagination .current,
.page-numbers .current {
background: #F4F4F4;
color: var(--text-blue);
pointer-events: none;
border: unset;
text-align: center;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px;
}
/* Dấu … (dots) */
.pagination .dots,
.page-numbers .dots {
background: transparent;
border: none;
}
/* --- 2. Main Content (Bài viết) --- */
.main-content {
flex: 3;
border-radius: 8px;
}
/* Tiêu đề bài viết và thông tin meta */
.post-header h1 {
color: var(--text-blue);
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: 120%;
text-transform: capitalize;
}
.post-meta {
display: flex;
align-items: center;
margin-bottom: 40px;
margin-top: 20px;
}
.post-meta span {
margin-right: 24px;
}
.main-content .post-body {
color: #000;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px;
/* 171.429% */
}
/* Icon (Sử dụng Font Awesome) */
.post-meta i {
margin-right: 5px;
color: #1abc9c;
}
/* Hình ảnh chính */
.post-image img {
width: 100%;
height: auto;
border-radius: 6px;
margin-bottom: 30px;
}
/* Nội dung văn bản */
.post-body p {
margin-bottom: 20px;
color: #555;
text-align: justify;
}
/* --- 3. Tags và Chia sẻ --- */
.post-section-title {
font-size: 1.1em;
font-weight: bold;
color: #333;
margin-bottom: 10px;
}
.tag-list {
list-style: none;
display: flex;
flex-wrap: wrap;
margin-bottom: 20px;
padding: 0;
gap: 8px;
}
.tag-list li a {
display: block;
padding: 5px 12px;
background-color: #f0f0f0;
color: #666;
text-decoration: none;
border-radius: 20px;
font-size: 0.85em;
transition: background-color 0.2s;
}
.tag-list li a:hover {
background-color: #e0e0e0;
}
/* Tag nổi bật (LearnPress) */
.tag-list li a.highlight {
background-color: #1abc9c;
/* Màu xanh lá/xanh da trời đặc trưng */
color: white;
font-weight: bold;
}
.social-share {
display: flex;
align-items: center;
padding: 15px 0;
border-top: 1px solid #eee;
margin-top: 20px;
border-bottom: 1px solid #eee;
/* Đường kẻ dưới phần share */
}
.social-share span {
font-weight: bold;
margin-right: 15px;
}
.social-share a {
color: #666;
font-size: 1.2em;
margin-right: 12px;
transition: color 0.2s;
}
.social-share a:hover {
color: #1abc9c;
}
/* --- 4. Bài viết liên quan (Related Posts) --- */
.related-posts {
margin-top: 30px;
display: flex;
gap: 40px;
justify-content: space-between;
}
.related-post-item {
flex: 1;
text-align: left;
text-decoration: none;
color: #333;
transition: opacity 0.2s;
}
.related-post-item:hover {
opacity: 0.8;
}
.related-post-item img {
width: 90px;
min-width: 90px;
aspect-ratio: 1/1;
object-fit: cover;
border-radius: 5px;
}
.related-post-item span {
color: #000;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 24px;
text-transform: capitalize;
}
/* --- 5. Bình luận (Comments) --- */
.comments-section {
margin-top: 40px;
}
.comments-header {
font-size: 1.5em;
font-weight: bold;
margin-bottom: 20px;
border-bottom: 2px solid #eee;
padding-bottom: 10px;
}
.comment-item {
display: flex;
padding: 20px 0;
border-bottom: 1px solid #eee;
}
.comment-avatar img {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 15px;
object-fit: cover;
}
.comment-body {
flex-grow: 1;
}
.comment-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 5px;
}
.comment-author {
font-weight: bold;
color: #333;
}
.comment-date {
font-size: 0.8em;
color: #999;
}
.comment-text {
font-size: 0.9em;
color: #555;
}
/* --- 6. Sidebar (Widget Area) --- */
.sidebar {
flex: 1;
}
.sidebar-widget {
background-color: white;
padding: 0 20px;
margin-bottom: 30px;
}
.widget-title {
color: var(--text-blue);
font-size: 16px;
font-style: normal;
font-weight: 600;
margin-bottom: 20px;
line-height: normal;
text-transform: capitalize;
}
/* Widget Category */
.category-list {
list-style: none;
padding: 0;
}
.sidebar-widget .recent-post-item img {
border-radius: 5px;
max-width: 90px;
aspect-ratio: 90/90;
}
.category-list li {
display: flex;
justify-content: space-between;
color: var(--Dark_gray, #555);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 150%;
margin-bottom: 10px;
}
.category-list li:last-child {
border-bottom: none;
margin-bottom: 0;
}
.category-list li a {
text-decoration: none;
color: #666;
transition: color 0.2s;
}
.category-list li a:hover {
color: #1abc9c;
}
.category-list li span {
color: #999;
font-size: 0.9em;
}
/* Widget Recent Posts */
.recent-post-item {
display: flex;
margin-bottom: 16px;
gap: 15px;
text-decoration: none;
color: #333;
align-items: start;
}
.recent-post-item:hover .recent-post-title {
color: var(--text-blue);
}
.recent-post-image img {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 4px;
margin-right: 10px;
}
.recent-post-title {
color: #000;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 24px;
text-transform: capitalize;
}
/* Widget Tags (Sử dụng lại .tag-list) */
.sidebar-tags .tag-list {
margin-bottom: 0;
padding: 0;
}
.main-layout {
display: grid;
grid-template-columns: 1fr 320px;
/* chính + sidebar */
gap: 40px;
margin-top: 40px;
margin-bottom: 60px;
}
.sidebar {
width: 100%;
}
/* =================================================== */
/* 1. SECTION: UNLOCK YOUR CREATIVE POTENTIAL (Vàng) */
/* Tiền tố: .sec1- */
/* =================================================== */
.sec1-creative-banner {
background-color: #E2A900;
/* Màu vàng */
padding: 100px 20px 100px;
text-align: center;
color: #333;
}
.sec1-content-wrapper {
max-width: 965px;
margin: 0 auto;
padding: 0 50px;
}
.sec1-lightning-icon {
border-radius: 6px;
background: var(--secondary-color);
}
.sec1-title-box {
position: relative;
width: fit-content;
display: flex;
margin-bottom: 20px;
padding: 14px 30px 14px 20px;
justify-content: center;
align-items: center;
gap: 14px;
border-radius: 11px;
border: 1px solid var(--White-95, #F1F1F3);
background: var(--White-99, #FCFCFD);
}
.sec1-title-box .icon-position {
position: absolute;
width: 39px;
height: 43px;
top: -25px;
left: -25px;
}
.sec1-lightning-icon {
width: 48px;
height: 48px;
max-width: 48px;
min-width: 48px;
color: #ffc93c;
}
.sec1-title-box h2 p {
margin-bottom: 0;
}
.sec1-title-box h2 {
color: var(--text-blue);
text-align: center;
font-size: 48px;
font-style: normal;
font-weight: 600;
line-height: 150%;
/* 72px */
}
.events-classes-section
{
overflow: hidden;
}
.sec1-subtitle {
color: #FFF;
text-align: center;
font-size: 32px;
font-style: normal;
font-weight: 500;
line-height: 150%;
/* 48px */
}
.sec1-description {
color: #FFF;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 500;
margin-bottom: 40px;
line-height: 24px;
/* 150% */
;
}
.course-item:hover {
transform: translateY(-3px);
}
@media (max-width: 576px) {
.sec1-title-box h2,
.sec1-title-box h2 p {
font-size: 16px;
margin-bottom: 0;
}
.sec1-subtitle {
font-size: 1.6em;
}
.sec1-buttons {
flex-direction: column;
gap: 15px;
}
}
/* =================================================== */
/* 2. SECTION: COURSE ROADMAP (Lộ Trình) */
/* Tiền tố: .sec2- */
/* =================================================== */
.sec2-course-roadmap {
background-color: #F4F4F4;
padding: 80px 20px;
padding-bottom: 50px;
text-align: center;
}
.sec4-faq-section .section-title,
.sec4-content-wrapper .section-title-desc {
color: #fff;
}
.sec3-community-grid {
padding-bottom: 50px;
background-color: #F4F4F4;
}
.sec2-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin: 0 auto 40px;
}
.sec2-card {
background-color: white;
padding: 32px;
border-radius: 10px;
position: relative;
border-radius: 9.618px;
border: 1px solid #E1E1E1;
background: #ff9900;
}
.sec2-card-number {
color: var(--text-blue);
text-align: right;
font-size: 64px;
margin-bottom: 24px;
font-style: normal;
font-weight: 700;
}
.sec2-card h3 {
color: var(--text-blue);
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 150%;
}
.sec2-card p {
color: #fff;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 24px;
margin-bottom: 24px;
}
.sec2-card-link-arrow {
display: inline-block;
text-decoration: none;
transition: color 0.3s;
padding: 16px;
border-radius: 5px;
border: 0.802px solid #E1E1E1;
background: #FCFCFD;
}
.sec2-card:hover .sec2-card-link-arrow {
color: #ffc93c;
/* Thay đổi màu khi hover */
}
.sec2-footer {
text-align: center;
}
.sec2-btn-consult {
background-color: #1a5cbf;
color: white;
padding: 10px 40px;
text-decoration: none;
border-radius: 5px;
font-weight: bold;
transition: background-color 0.3s;
}
.sec2-btn-consult:hover {
background-color: #144996;
}
@media (max-width: 992px) {
.sec2-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.sec2-grid {
grid-template-columns: 1fr;
}
.sec2-card {
padding-bottom: 50px;
}
}
/* =================================================== */
/* 3. SECTION: COMMUNITY GRID (Hoạt động cộng đồng) */
/* Tiền tố: .sec3- */
/* =================================================== */
.sec3-card-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.sec3-card {
padding: 24px;
transition: transform 0.3s;
border-radius: 12px;
border: 1px solid var(--White-95, #F1F1F3);
background: #FFF;
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.25);
}
.sec3-card:hover {
transform: translateY(-5px);
}
.sec3-card-img-wrapper {
position: relative;
aspect-ratio: 577/380;
margin-bottom: 12px;
}
.sec3-card-img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
/* Phần trang trí màu vàng/xanh (Deco Element) */
.sec3-card-deco-element {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 1;
}
.sec3-card-content-area {
text-align: left;
}
.sec3-card-content-area h3 {
color: var(--text-blue);
font-size: 16px;
margin-bottom: 0;
font-style: normal;
font-weight: 700;
line-height: 150%;
}
.sec3-card-content-area p {
color: #000;
font-size: 14px;
font-weight: 400;
margin-bottom: 24px;
line-height: 150%;
}
.sec3-card-read-more {
text-decoration: none;
display: inline-block;
text-align: center;
width: 100%;
padding: 18px 24px;
border-radius: 8px;
border: 1px solid #F1F1F3;
background: #F7F7F8;
color: var(--text-blue);
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 150%;
/* 24px */
}
/* =================================================== */
/* 4. SECTION: FAQ ACCORDION (Tùy biến Bootstrap) */
/* Tiền tố: .sec4- */
/* =================================================== */
.sec4-faq-section {
background-color: #1a5cbf;
/* Nền xanh đậm */
padding: 80px 20px;
color: white;
/* Màu chữ mặc định cho header */
}
/* --- Tùy chỉnh Accordion của Bootstrap --- */
/* Khung ngoài của mỗi Item */
.accordion-item.sec4-custom-item {
border: none;
/* Xóa border mặc định của Bootstrap */
border-radius: 8px;
margin-bottom: 15px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
background-color: white;
/* Nền trắng cho item */
}
.accordion-button:focus {
box-shadow: none;
}
/* Tiêu đề (Button) */
.accordion-button {
color: var(--text-blue);
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px;
padding: 16px 32px;
border-bottom: 0.803px solid #F1F1F3;
}
/* Tiêu đề khi đang mở (Expanded) */
.accordion-button:not(.collapsed) {
color: var(--text-blue);
/* Màu xanh khi mở */
background-color: #F4F4F4;
/* Nền xám nhạt khi mở */
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
/* Mũi tên (Icon) */
.accordion-button::after {
/* Thay đổi icon mặc định của Bootstrap nếu cần */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%231a5cbf' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M1 8h14M8 1v14'/%3E%3C/svg%3E");
padding: 10px;
border-radius: 6.42px;
}
.accordion-item:first-of-type>.accordion-header .accordion-button {
background: #fff;
}
.accordion-button {
border-radius: 10px;
}
.accordion-button:not(.collapsed) {
box-shadow: unset;
}
/* Mũi tên khi đang mở (Thay đổi thành dấu X nếu muốn, như mẫu ảnh) */
.accordion-button:not(.collapsed)::after {
/* Đây là cách thay đổi icon thành dấu trừ hoặc dấu X */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23e74c3c' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 4l8 8M12 4L4 12'/%3E%3C/svg%3E");
transform: rotate(180deg);
/* Giữ nguyên hoặc xoay nếu muốn */
}
/* Nội dung */
.accordion-body.sec4-custom-body {
padding: 24px 32px 24px 32px;
}
.accordion-body.sec4-custom-body p {
color: #000;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 150%;
/* 21px */
}
/* =================================================== */
/* 5. SECTION: CONTACT FORM BANNER */
/* Tiền tố: .sec5- */
/* =================================================== */
.sec5-contact-form-section .sec5-content-wrapper {
position: relative;
overflow: hidden;
border-radius: 8px;
background: linear-gradient(270deg, #FFBD42 0.05%, var(--M2, #FFBF00) 97.84%);
}
.sec5-contact-form-section {
padding-top: 50px;
padding-bottom: 60px;
}
.sec5-content-wrapper {
display: flex;
gap: 40px;
position: relative;
z-index: 10;
}
/* --- Cột Trái (Info) --- */
.sec5-info-column {
flex: 1;
/* Chiếm khoảng 50% */
display: flex;
justify-content: center;
align-items: center;
color: white;
background: url(../images/elip_svg.png);
background-repeat: no-repeat;
background-position: center;
}
.sec5-info-box {
text-align: left;
max-width: 396px;
}
.sec5-info-title {
color: #FFF;
font-size: 36px;
font-style: normal;
font-weight: 600;
line-height: 44px;
margin-bottom: 40px;
letter-spacing: 0.3px;
}
.sec5-info-stat {
font-size: 14px;
color: #fff;
font-weight: 500;
margin-bottom: 20px;
opacity: 0.8;
}
/* Avatar học viên */
.sec5-student-avatars {
display: flex;
align-items: center;
}
.sec5-avatar {
width: 45px;
height: 45px;
border-radius: 50%;
border: 3px solid #ffc93c;
/* Border trùng màu nền */
margin-right: -10px;
/* Chồng lên nhau */
object-fit: cover;
}
.sec5-other-count {
margin-left: 20px;
color: #FFF;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 32px;
/* 228.571% */
letter-spacing: 0.3px;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: none;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
}
.sec2-card-text-content {
text-align: left;
}
/* --- Cột Phải (Form) --- */
.sec5-form-column {
flex: 1;
/* Chiếm khoảng 50% */
border-radius: 12px;
margin: 25px 55px;
}
.sec5-form-column .form-control::placeholder {
color: #000;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.sec5-form-column .form-control:focus {
box-shadow: unset;
}
.sec5-form-column .form-control {
padding: 15.944px 15px 19.056px 17.5px;
border: unset;
border-radius: 5px;
border: 1px solid #E1E1E1;
color: #000;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.sec5-form-column .wpcf7-spinner {
display: none;
}
.sec5-form-column form .button p {
margin-bottom: 0;
}
.sec5-form-column form p {
margin-bottom: 24px;
}
.sec5-contact-form {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.sec5-input-group {
padding: 0;
}
.sec5-full-width {
width: 100%;
}
.sec5-half-width {
width: calc(50% - 7.5px);
/* Trừ đi 1/2 khoảng gap */
}
.sec5-input-group input,
.sec5-input-group textarea {
width: 100%;
padding: 12px 15px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 1em;
color: #333;
transition: border-color 0.3s;
}
.sec5-input-group input:focus,
.sec5-input-group textarea:focus {
border-color: #1a5cbf;
outline: none;
}
.sec5-input-group textarea {
resize: vertical;
min-height: 120px;
}
/* Nút Gửi */
.sec5-submit-btn {
width: 150px;
margin-top: 10px;
padding: 12px 20px;
background-color: #1a5cbf;
/* Màu xanh nổi bật */
color: white;
font-size: 1.1em;
font-weight: bold;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.3s, transform 0.2s;
margin-left: auto;
/* Đẩy nút sang phải */
}
.product-detail {
padding: 40px 0;
}
.sec5-submit-btn:hover {
background-color: #144996;
transform: translateY(-1px);
}
.product-title {
margin-bottom: 12px;
color: var(--text-blue);
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: 120%;
/* 28.8px */
text-transform: capitalize;
}
.product-single-body {
display: flex;
gap: 60px;
/* khoảng cách giữa các phần */
}
.product-info {
flex: 5;
/* chiếm 3 phần */
}
.product-image {
flex: 3;
/* chiếm 4 phần */
}
.product-resources {
flex: 4;
/* chiếm 5 phần */
}
.product-meta {
color: #000;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 150%;
text-transform: capitalize;
}
.product-description p {
margin-bottom: 0;
}
.product-description {
margin-bottom: 32px;
color: #000;
font-size: 14px;
text-align: justify;
font-style: normal;
font-weight: 400;
line-height: 150%;
/* 21px */
}
.product-price .original-price {
color: rgba(0, 0, 0, 0.50);
font-size: 16px !important;
font-style: normal;
font-weight: 500;
line-height: normal;
text-decoration-line: line-through;
}
.product-price .discount {
padding: 6px 12px;
color: #DD0004;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
border-radius: 62px;
background: rgba(221, 0, 4, 0.10);
}
.product-price .current-price {
color: #DD0004;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.product-actions .btn-primary {
font-size: 16px;
font-weight: 700;
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.25);
line-height: 150%;
}
.btn-outline-primary {
padding: 16px 32px;
border-radius: 5px;
background: var(--M2, #FFBF00);
border: none;
color: #fff;
font-size: 16px;
font-weight: 700;
line-height: 150%;
position: relative;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
transition: box-shadow .25s ease, transform .25s ease, background-color .25s ease;
}
/* vệt sáng */
.btn-outline-primary::before {
content: "";
position: absolute;
top: 0;
left: -60%;
width: 40%;
height: 100%;
background: linear-gradient(
120deg,
transparent,
rgba(255, 255, 255, 0.25),
transparent
);
transform: skewX(-20deg);
}
/* hover */
.btn-outline-primary:hover {
background-color: var(--secondary-color);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
transform: translateY(-1px);
cursor: pointer;
}
/* chạy shine */
.btn-outline-primary:hover::before {
left: 120%;
transition: left .55s ease;
}
.product-resources {
flex: 0 0 30%
}
.product-resources h4 {
margin-bottom: 20px;
color: var(--text-blue);
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: normal;
text-transform: capitalize;
}
.product-resources .list-group li {
border-bottom: unset;
padding: 0;
margin-bottom: 10px;
}
.product-resources .list-group li a {
color: var(--Dark_gray, #555);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 150%;
/* 24px */
text-transform: capitalize;
}
/* 1. Viền vàng cho Input "Tên khóa học" */
.custom-yellow-border {
border-color: #ffc107 !important;
/* Màu vàng của Bootstrap */
box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
/* Hiệu ứng ring vàng */
}
#registerModal
{
z-index: 9999;
}
#registerModal .btn-close-modal {
color: var(--text-blue);
font-size: 14px;
font-style: normal;
font-weight: 500;
position: absolute;
line-height: 150%;
/* 21px */
}
.text-yeeloow {
color: var(--secondary-color);
}
.image-container-wrapper {
position: relative;
height: 100%;
/* Đảm bảo nó lấp đầy chiều cao của cột */
min-height: 400px;
/* Chiều cao tối thiểu nếu hình ảnh không load */
}
.alert.alert-warning a
{
font-weight: 600;
color: var(--text-blue);
}
#registerModal .modal-body textarea::placeholder,
#registerModal .modal-body input::placeholder {
color: #000;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
#registerModal .modal-body textarea:focus,
#registerModal .modal-body input:focus {
box-shadow: unset;
}
#registerModal .modal-body textarea {
height: 150px;
border-radius: 5px;
border: 1px solid #E1E1E1;
background: #FFF;
display: flex;
padding: 15.944px 15.5px 19.056px 17.5px;
align-items: center;
align-self: stretch;
}
#registerModal .wpcf7-spinner {
display: none;
}
#registerModal .modal-body select:focus
{
box-shadow: unset;
}
#registerModal .modal-body select
{
border-radius: 5px;
border: 1px solid #E1E1E1;
background: #FFF;
display: flex;
height: 50px;
align-items: center;
align-self: stretch;
}
#registerModal .modal-body input:not([type="submit"]) {
border-radius: 5px;
border: 1px solid #E1E1E1;
background: #FFF;
display: flex;
height: 50px;
padding: 15.944px 15.5px 19.056px 17.5px;
align-items: center;
align-self: stretch;
}
#registerModal .modal-body {
padding: 24px 80px;
padding-bottom: 50px;
}
#registerModal .title-header {
margin-bottom: 50px;
}
#registerModal .section-subtitle {
margin-top: 0;
margin-bottom: 12px;
}
#registerModal .section-title {
margin-bottom: 12px;
font-weight: 700;
}
.image-placeholder {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
/* Giữ hình ảnh ở phía trên */
padding: 14px;
/* Khoảng cách để thấy nền xanh */
}
.woocommerce .woocommerce-form input,
.woocommerce .woocommerce-form input::placeholder,
.woocommerce-ResetPassword .woocommerce-Input {
color: #000 !important;
font-size: 14px !important;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.woocommerce-form-login__submit,
.woocommerce-Button.button {
display: flex;
padding: 16px 50px !important;
justify-content: center;
align-items: center;
border-radius: 5px !important;
background: var(--M1, #004AAD) !important;
color: #FFF !important;
text-align: center;
font-size: 14px !important;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.woocommerce-page .woocommerce h2 {
color: var(--M1, #004AAD);
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.woocommerce-page .woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme {
display: flex;
align-items: center;
gap: 10px;
}
.woocommerce-page .woocommerce .woocommerce-form label {
color: #000;
margin-bottom: 8px;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.woocommerce-ResetPassword p,
.woocommerce-form-register p {
color: #000;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.woocommerce-privacy-policy-text {
display: none !important;
}
.woocommerce-page .woocommerce .woocommerce-form input,
.woocommerce-ResetPassword .woocommerce-Input {
display: flex;
height: 50px;
padding: 15.944px 15px 19.056px 17.5px !important;
border-radius: 5px;
border: 1px solid #E1E1E1 !important;
background: #FFF;
align-items: center;
align-self: stretch;
}
#user_login:focus {
box-shadow: unset !important;
border: unset !important;
}
.woocommerce-page .woocommerce .woocommerce-form {
min-width: 600px;
margin: 0 auto;
}
.woocommerce-LostPassword a {
color: var(--text-blue) !important;
font-size: 14px;
}
.gap-menu-header {
gap: 32px;
}
.woocommerce-form-row.woocommerce-form-row--first.form-row.form-row-first {
width: 100% !important;
}
.woocommerce-MyAccount {
display: flex;
flex-wrap: wrap;
gap: 30px;
}
/* Sidebar navigation */
.woocommerce-MyAccount-navigation {
background: #f9f9f9;
border: 1px solid #e1e1e1;
border-radius: 12px;
padding: 20px;
margin-bottom: 30px;
}
.woocommerce-MyAccount-navigation ul {
list-style: none;
padding: 0;
margin: 0;
}
.woocommerce-MyAccount-navigation li {
margin-bottom: 10px;
}
.woocommerce-MyAccount-navigation li a {
display: block;
padding: 12px 18px;
background: #fff;
border: 1px solid #ddd;
border-radius: 8px;
color: #333;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
}
.woocommerce-MyAccount-navigation li a:hover {
background: var(--text-blue);
color: #fff;
border-color: var(--text-blue);
}
.woocommerce-MyAccount-navigation li.is-active a {
background: var(--text-blue);
color: #fff;
border-color: var(--text-blue);
}
/* Nội dung chính */
.woocommerce-MyAccount-content {
background: #fff;
border: 1px solid #e1e1e1;
border-radius: 12px;
padding: 30px;
}
.woocommerce-notices-wrapper .woocommerce-info {
background: #eaf4ff;
color: #3178c6;
border-left: 4px solid var(--text-blue);
padding: 15px 20px;
border-radius: 8px;
margin-bottom: 20px;
font-size: 15px;
}
.woocommerce-form-row label {
color: #000;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.woocommerce-form-row {
width: 100% !important;
}
.edit-account label {
text-align: left;
}
.edit-account input {
display: flex;
height: 50px;
padding: 15.944px 15px 19.056px 17.5px !important;
align-items: center;
align-self: stretch;
border-radius: 5px;
border: 1px solid #E1E1E1 !important;
background: #FFF;
}
.woocommerce-Address-title a {
width: 100%;
}
.woocommerce-Address-title {
text-align: center;
}
.woocommerce {
width: 100%;
}
/* Chào mừng người dùng */
.woocommerce-MyAccount-content p strong {
color: var(--text-blue);
}
/* Link trong nội dung */
.woocommerce-MyAccount-content a {
color: var(--text-blue);
text-decoration: none;
transition: color 0.3s;
}
.woocommerce-MyAccount-content a:hover {
text-decoration: underline;
color: #1a5fb4;
}
.nav-section.menu-primary {
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
.mb-50 {
margin-bottom: 50px;
}
.event-image-wrap {
position: relative;
}
.event-date-badge {
position: absolute;
top: 12px;
right: 12px;
border-radius: 100px;
background: var(--M1, #004AAD);
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
color: #fff;
display: inline-flex;
padding: 5px 24px;
justify-content: center;
align-items: center;
gap: 10px;
z-index: 2;
}
.event-date-badge small {
font-size: 11px;
font-weight: 400;
opacity: 0.85;
}
.community-prev.swiper-button-prev,
.community-next.swiper-button-next {
color: var(--secondary-color);
display: flex;
width: 49.231px;
height: 50px;
padding: 6.667px;
justify-content: center;
align-items: center;
gap: 81.667px;
border-radius: 83.333px;
border: 0.833px solid #FFF;
background: rgba(0, 0, 0, 0.24);
backdrop-filter: blur(8.333333015441895px);
}
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after,
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
font-size: 24px !important;
}
.community-next.swiper-button-next {
right: 60px !important;
}
.community-prev.swiper-button-prev {
left: 60px !important;
}
/* ================= COMMENTS ================= */
.comments-area {
margin-top: 60px;
font-family: inherit;
}
/* TITLE */
.comments-title {
color: #000;
font-size: 20px;
font-style: normal;
margin-bottom: 12px;
font-weight: 600;
line-height: normal;
text-transform: capitalize;
}
.comments-title span {
color: #555;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 150%;
/* 24px */
}
/* LIST */
.comment-list {
list-style: none;
padding: 0;
margin: 0;
}
.comment-list>li {
border-bottom: 1px solid #eee;
padding-top: 20px;
margin-top: 30px;
border-top: 1px solid var(--Light_grey, #EAEAEA);
}
/* COMMENT ITEM */
.comment-item {
display: flex;
gap: 16px;
}
.comment-avatar img {
width: 48px;
height: 48px;
border-radius: 50%;
}
/* CONTENT */
.comment-content {
flex: 1;
}
.comment-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
}
.comment-author {
color: var(--Black, #000);
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 150% */
text-transform: capitalize;
}
.comment-date {
color: rgba(0, 0, 0, 0.70);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 171.429% */
}
.comment-text p
{
margin-bottom: 0;
}
.comment-text {
color: var(--Dark_gray, #555);
font-size: 14px;
margin-bottom: 8px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 171.429% */
}
/* REPLY */
.comment-reply a {
color: var(--Black, #000);
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 150% */
text-transform: capitalize;
text-decoration: none;
}
.comment-reply a:hover {
text-decoration: underline;
}
/* NESTED COMMENT */
.comment-list .children {
list-style: none;
padding-left: 64px;
margin-top: 20px;
}
/* PAGINATION */
.comment-pagination {
display: flex;
justify-content: center;
margin: 35px 0;
}
.comment-pagination .page-numbers {
display: inline-flex;
gap: 6px;
}
.comment-pagination a,
.comment-pagination span {
width: 32px;
height: 32px;
border-radius: 6px;
border: 1px solid #ddd;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: #333;
text-decoration: none;
}
.comment-pagination .current {
background: #0d6efd;
color: #fff;
border-color: #0d6efd;
}
/* ================= COMMENT FORM ================= */
.comment-respond {
margin-top: 50px;
}
.comment-respond h3 {
font-size: 18px;
font-weight: 600;
margin-bottom: 20px;
}
/* GRID FORM */
.comment-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
.comment-form-comment {
grid-column: 1 / -1;
}
.comment-form input,
.comment-form textarea {
width: 100%;
padding: 10px 16px;
border-radius: 8px;
border: 1px solid var(--Grey, #9D9D9D);
font-size: 14px;
outline: none;
color: #000;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 24px;
}
.comment-form input::placeholder,
.comment-form textarea::placeholder {
color: #000;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 24px;
}
.comment-form input:focus,
.comment-form textarea:focus {
border-color: #0d6efd;
}
/* SUBMIT */
.comment-form .btn-submit {
display: flex;
width: fit-content;
padding: 16px 50px;
justify-content: center;
align-items: center;
border-radius: 5px;
background: var(--M1, #004AAD);
color: #fff;
border: none;
cursor: pointer;
font-size: 14px;
}
.comment-form .btn-submit:hover {
opacity: 0.9;
}
/* LOGGED IN TEXT */
.comment-form-cookies-consent,
.logged-in-as {
grid-column: 1 / -1;
font-size: 13px;
color: #777;
}
/* MOBILE */
@media (max-width: 768px) {
.comment-item {
flex-direction: column;
}
.comment-list .children {
padding-left: 32px;
}
.comment-form {
grid-template-columns: 1fr;
}
}
.social-bar-fixed {
padding: 10px;
border-radius: 24px 0 0px 24px;
background: rgba(255, 255, 255, 0.24);
backdrop-filter: blur(35px);
position: fixed;
right: 0px;
bottom: 20%;
transform: translateY(50%);
display: flex;
flex-direction: column;
gap: 10px;
z-index: 1000;
}
.social-bar-icon {
color: white;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2em;
text-decoration: none;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
/* Quy tắc màu cụ thể cho các icon dọc */
.social-bar-icon.facebook {
background-color: #3b5998;
}
.social-bar-icon.instagram {
/* Gradient color */
background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.social-bar-icon.tiktok {
background-color: #000000;
}
.social-bar-icon.whatsapp {
background-color: #25d366;
}
.social-bar-icon.telegram {
background-color: #0088cc;
}
.entry-content .emoji
{
margin: 0 !important;
}
.product-description.fw-bold > *
{
font-weight: 600 !important
}
.card-image-wrapper {
width: 100%;
aspect-ratio: 16 / 9;
position: relative;
overflow: hidden;
background: #000;
}
.card-image-wrapper iframe {
width: 560px; /* kích thước native của YouTube */
height: 315px;
max-width: 100%;
max-height: 100%;
border: 0;
display: block;
margin: auto;
}