/* =====================================================
   SC EXCELLENCE — VỀ CHÚNG TÔI — about-page.css
   Prefix  : cdet-about-  (main), cdet-footer- (footer)
   Token   : dùng --cdet-* đã khai báo trong tokens file
   Paste   : flatsome-child/style.css hoặc enqueue riêng
   ===================================================== */

/* ---- Shared utilities trong scope page này ---- */
.cdet-about-eyebrow {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cdet-primary);
	margin-bottom: 16px;
}
.cdet-about-eyebrow--center { text-align: center; }

.cdet-about-section-title {
	font-size: 28px;
	font-weight: 700;
	color: var(--cdet-text);
	margin: 0 0 20px;
	line-height: 1.25;
}

/* ==============================================
   1. HERO
   ============================================== */
.cdet-about-hero__content { padding-right: 20px; }

.cdet-about-breadcrumb {
	font-size: 12px;
	color: var(--cdet-text-light);
	margin-bottom: 16px;
	display: block;
}
.cdet-about-breadcrumb span { color: var(--cdet-text-muted); }

.cdet-about-hero__title {
	font-size: 48px;
	font-weight: 700;
	color: var(--cdet-text);
	line-height: 1.1;
	margin: 0 0 16px;
}

.cdet-about-hero__subtitle {
	font-size: 22px;
	font-weight: 600;
	color: var(--cdet-primary);
	margin: 0 0 20px;
}

.cdet-about-hero__desc {
	font-size: 15px;
	color: var(--cdet-text-muted);
	line-height: 1.7;
	margin: 0 0 32px;
	max-width: 520px;
}

.cdet-about-hero__cta-group {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
}

/* Nút primary */
.cdet-about-btn-primary {
	background: var(--cdet-primary) !important;
	color: #fff !important;
	font-weight: 600;
	font-size: 14px;
	padding: 14px 28px !important;
	border-radius: var(--cdet-radius-sm);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: none !important;
}
.cdet-about-btn-primary:hover {
	background: var(--cdet-navy-dark) !important;
	box-shadow: none !important;
}

/* Nút outline */
.cdet-about-btn-outline {
	background: transparent !important;
	color: var(--cdet-primary) !important;
	font-weight: 600;
	font-size: 14px;
	padding: 12px 24px !important;
	border-radius: var(--cdet-radius-sm);
	border: 1.5px solid var(--cdet-primary) !important;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.cdet-about-btn-outline:hover {
	background: var(--cdet-primary) !important;
	color: #fff !important;
	box-shadow: none !important;
}

/* Visual col: ảnh + badge */
.cdet-about-hero__visual { position: relative; }
.cdet-about-hero__img { border-radius: var(--cdet-radius-lg); box-shadow: 0 20px 60px rgba(0,0,0,0.15); width: 100%; }
.cdet-about-hero__badge {
	position: absolute;
	top: -12px;
	right: -12px;
	background: #fff;
	padding: 8px 14px;
	border-radius: var(--cdet-radius-md);
	box-shadow: var(--cdet-shadow-hover);
}
.cdet-about-hero__badge span {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cdet-text-light);
}

/* ==============================================
   2. INTRO STATS
   ============================================== */
.cdet-about-intro__img { border-radius: var(--cdet-radius-lg); box-shadow: var(--cdet-shadow-hover); width: 100%; }
.cdet-about-intro__content { padding-left: 24px; }
.cdet-about-intro__desc { font-size: 14px; color: var(--cdet-text-muted); line-height: 1.7; margin: 0 0 32px; }

/* Stats row override: chỉ áp dụng trong .cdet-about-stats-row */
.cdet-about-stats-row { margin-top: 0 !important; }

.cdet-about-stat { text-align: left; padding: 0 !important; }
.cdet-about-stat .col-inner { padding: 0 !important; }
.cdet-about-stat__icon { color: var(--cdet-primary); margin-bottom: 8px; }
.cdet-about-stat__icon svg { display: block; }
.cdet-about-stat__number { font-size: 26px; font-weight: 700; color: var(--cdet-primary); margin: 0; }
.cdet-about-stat__label { font-size: 11px; color: var(--cdet-text-light); font-weight: 500; margin: 4px 0 0; white-space: nowrap; }

/* ==============================================
   3. VISION / MISSION
   ============================================== */
.cdet-about-vm-card {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	background: var(--cdet-bg-gray);
	border: 1px solid var(--cdet-border);
	border-radius: var(--cdet-radius-lg);
	padding: 40px;
	height: 100%;
}
.cdet-about-vm-card__icon {
	flex-shrink: 0;
	color: var(--cdet-primary);
}
.cdet-about-vm-card__title {
	font-size: 22px;
	font-weight: 700;
	color: var(--cdet-text);
	margin: 0 0 12px;
}
.cdet-about-vm-card__desc {
	font-size: 13px;
	color: var(--cdet-text-muted);
	line-height: 1.7;
	margin: 0;
}

/* ==============================================
   4. CORE VALUES
   ============================================== */
.cdet-about-value-col { text-align: center; }
.cdet-about-value { display: flex; flex-direction: column; align-items: center; }
.cdet-about-value__icon {
	color: var(--cdet-primary);
	margin-bottom: 16px;
}
.cdet-about-value__title { font-size: 18px; font-weight: 700; margin: 0 0 8px; }
.cdet-about-value__desc { font-size: 12px; color: var(--cdet-text-light); line-height: 1.6; padding: 0 12px; margin: 0; }

.cdet-about-values__tagline {
	text-align: center;
	color: var(--cdet-primary);
	font-size: 18px;
	font-weight: 700;
	font-style: italic;
	margin: 32px 0 0;
}

/* ==============================================
   5. DIFFERENTIATORS — 5 cols layout
   ============================================== */

/* Override Flatsome col để ra đúng 5 cột trên desktop */
@media screen and (min-width: 850px) {
	.cdet-about-diff-row > .col {
		flex-basis: 20% !important;
		max-width: 20% !important;
	}
}

.cdet-about-diff-card {
	background: #fff;
	border-radius: var(--cdet-radius-lg);
	box-shadow: 0 1px 6px rgba(0,0,0,0.06);
	padding: 32px 20px !important;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.cdet-about-diff-card:hover {
	box-shadow: var(--cdet-shadow-hover);
	transform: translateY(-2px);
}
.cdet-about-diff-card .col-inner { padding: 0 !important; }

.cdet-about-diff-card__icon {
	color: var(--cdet-primary);
	margin-bottom: 20px;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cdet-about-diff-card__title { font-size: 13px; font-weight: 700; margin: 0 0 10px; }
.cdet-about-diff-card__desc { font-size: 11px; color: var(--cdet-text-light); line-height: 1.6; margin: 0; }

/* ==============================================
   6. EXPERT TEAM — grayscale + hover
   ============================================== */
.cdet-about-expert { text-align: center; }
.cdet-about-expert .col-inner { padding-bottom: 0 !important; }

/* Ảnh expert: áp filter grayscale, hover tắt */
.cdet-about-expert__img {
	width: 100%;
	border-radius: var(--cdet-radius-lg);
	overflow: hidden;
	margin-bottom: 16px;
	filter: grayscale(100%);
	transition: filter 0.4s ease;
}
.cdet-about-expert:hover .cdet-about-expert__img { filter: grayscale(0); }

.cdet-about-expert__name { font-size: 17px; font-weight: 700; color: var(--cdet-text); margin: 0 0 4px; }
.cdet-about-expert__role { font-size: 12px; font-weight: 600; color: var(--cdet-primary); margin: 0 0 8px; }
.cdet-about-expert__desc { font-size: 11px; color: var(--cdet-text-light); margin: 0 0 14px; }

.cdet-about-expert__social { display: flex; justify-content: center; gap: 10px; }
.cdet-about-expert__social-link {
	color: var(--cdet-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s;
}
.cdet-about-expert__social-link:hover { opacity: 0.7; }

/* ==============================================
   7. TRAINING METHOD
   ============================================== */
.cdet-about-method__content { padding-right: 16px; }
.cdet-about-method__steps { display: flex; flex-direction: column; gap: 32px; margin-top: 32px; }

.cdet-about-step { display: flex; align-items: flex-start; gap: 16px; }
.cdet-about-step__num {
	width: 40px;
	height: 40px;
	background: var(--cdet-primary);
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 13px;
	flex-shrink: 0;
}
.cdet-about-step__title { font-size: 15px; font-weight: 700; color: var(--cdet-text); margin: 0 0 4px; }
.cdet-about-step__desc { font-size: 12px; color: var(--cdet-text-light); line-height: 1.6; margin: 0; }

.cdet-about-method__img-col { padding-left: 16px; }
.cdet-about-method__img { border-radius: var(--cdet-radius-lg); box-shadow: 0 16px 48px rgba(0,0,0,0.12); width: 100%; }

/* ==============================================
   8. TIMELINE — dashed line giữa
   ============================================== */
.cdet-about-timeline__row { position: relative; }

/* Đường dashed kết nối các mốc trên desktop */
@media screen and (min-width: 850px) {
	.cdet-about-timeline__row::before {
		content: '';
		position: absolute;
		top: 24px; /* canh giữa icon circle */
		left: 0;
		right: 0;
		height: 0;
		border-top: 2px dashed rgba(0, 74, 173, 0.25);
		z-index: 0;
	}
}

.cdet-about-timeline-item { text-align: center; position: relative; z-index: 1; }
.cdet-about-timeline-item .col-inner { background: var(--cdet-bg-gray); padding: 0 16px !important; }

.cdet-about-timeline-item__icon {
	width: 48px;
	height: 48px;
	background: var(--cdet-primary);
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20px;
	border: 4px solid var(--cdet-bg-gray);
	position: relative;
	z-index: 2;
}
.cdet-about-timeline-item__year { font-size: 22px; font-weight: 700; color: var(--cdet-text); margin: 0 0 8px; }
.cdet-about-timeline-item__title { font-size: 13px; font-weight: 700; color: var(--cdet-primary); margin: 0 0 12px; }
.cdet-about-timeline-item__desc { font-size: 11px; color: var(--cdet-text-light); line-height: 1.6; margin: 0; }

/* ==============================================
   9. COMMUNITY CTA
   ============================================== */
.cdet-about-community__box {
	background: var(--cdet-primary);
	border-radius: 20px;
	padding: 48px 56px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	position: relative;
	overflow: hidden;
}

/* Vòng trang trí nền */
.cdet-about-community__deco {
	position: absolute;
	width: 300px;
	height: 300px;
	background: #60a5fa;
	opacity: 0.1;
	border-radius: 50%;
	pointer-events: none;
}
.cdet-about-community__deco--br { bottom: -80px; right: -80px; }
.cdet-about-community__deco--tl { top: -80px; left: -80px; }

.cdet-about-community__content { max-width: 560px; position: relative; z-index: 1; }
.cdet-about-community__title { font-size: 26px; font-weight: 700; color: #fff; margin: 0 0 12px; }
.cdet-about-community__desc { font-size: 13px; color: rgba(255,255,255,0.85); line-height: 1.6; margin: 0 0 28px; }

.cdet-about-community__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	color: var(--cdet-primary) !important;
	font-weight: 700;
	font-size: 14px;
	padding: 14px 24px;
	border-radius: var(--cdet-radius-sm);
	text-decoration: none;
	transition: background 0.2s;
}
.cdet-about-community__btn:hover { background: #f1f5f9; }

.cdet-about-community__qr { position: relative; z-index: 1; flex-shrink: 0; }
.cdet-about-community__qr-wrap {
	background: #fff;
	padding: 10px;
	border-radius: var(--cdet-radius-md);
	box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.cdet-about-community__qr-img { display: block; }

/* ==============================================
   10. FOOTER
   ============================================== */
.cdet-footer { color: #fff; }
.cdet-footer .col-inner { padding-bottom: 0 !important; }

.cdet-footer__logo {
	font-size: 22px;
	font-weight: 800;
	color: #fff;
	margin-bottom: 16px;
	display: block;
}
.cdet-footer__logo span { font-weight: 300; }

.cdet-footer__brand-desc {
	font-size: 12px;
	color: rgba(255,255,255,0.7);
	line-height: 1.7;
	margin: 0 0 20px;
}

.cdet-footer__social { display: flex; gap: 12px; }
.cdet-footer__social-link {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid rgba(96,165,250,0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 11px;
	font-style: italic;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.2s, border-color 0.2s;
}
.cdet-footer__social-link:hover {
	background: #fff;
	color: var(--cdet-primary);
	border-color: #fff;
}

.cdet-footer__nav-title { font-size: 13px; font-weight: 700; color: #fff; margin: 0 0 20px; }

.cdet-footer__nav-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.cdet-footer__nav-list li { margin: 0; }
.cdet-footer__nav-list a { font-size: 12px; color: rgba(255,255,255,0.75); text-decoration: none; transition: color 0.2s; }
.cdet-footer__nav-list a:hover { color: #fff; text-decoration: underline; }

.cdet-footer__contact-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.cdet-footer__contact-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 12px;
	color: rgba(255,255,255,0.75);
}
.cdet-footer__contact-list li svg { flex-shrink: 0; margin-top: 1px; opacity: 0.8; }

.cdet-footer__bottom {
	border-top: 1px solid rgba(30,58,138,0.6);
	margin-top: 48px;
	padding-top: 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 11px;
	color: rgba(147,197,253,0.8);
}
.cdet-footer__bottom-links { display: flex; gap: 24px; }
.cdet-footer__bottom-links a { color: rgba(147,197,253,0.8); text-decoration: none; }
.cdet-footer__bottom-links a:hover { color: #fff; }

/* ==============================================
   RESPONSIVE
   ============================================== */
@media (max-width: 849px) {
	.cdet-about-hero__title { font-size: 32px; }
	.cdet-about-hero__subtitle { font-size: 18px; }
	.cdet-about-hero__content { padding-right: 0; }
	.cdet-about-intro__content { padding-left: 0; margin-top: 24px; }
	.cdet-about-intro__desc { max-width: 100%; }
	.cdet-about-vm-card { padding: 28px; }
	.cdet-about-method__content { padding-right: 0; margin-bottom: 32px; }
	.cdet-about-method__img-col { padding-left: 0; }
	.cdet-about-community__box { flex-direction: column; padding: 36px 28px; }
	.cdet-about-community__qr { display: none; } /* ẩn QR trên mobile */
}

@media (max-width: 549px) {
	.cdet-about-hero__title { font-size: 28px; }
	.cdet-about-hero__desc { font-size: 14px; }
	.cdet-about-hero__badge { display: none; }
	.cdet-about-vm-card { flex-direction: column; gap: 16px; }
	.cdet-about-value__title { font-size: 16px; }
	.cdet-about-diff-card { padding: 24px 16px !important; }
	.cdet-about-timeline-item__year { font-size: 18px; }
	.cdet-footer__bottom { flex-direction: column; text-align: center; }
	.cdet-footer__bottom-links { justify-content: center; }
}