/* ==========================================================================
   Course Template (Khóa học) — CSS
   Prefix: ctpl-  |  Sửa màu/biến số ở :root cho phù hợp brand
   ========================================================================== */

.ctpl-course {
	--ctpl-blue: #2f6fed;
	--ctpl-blue-dark: #16305e;
	--ctpl-purple: #7c3aed;
	--ctpl-orange: #f9703c;
	--ctpl-text: #1c2733;
	--ctpl-text-muted: #64748b;
	--ctpl-border: #e6e9ef;
	--ctpl-bg-soft: #f6f9fd;
	--ctpl-radius: 14px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var(--ctpl-text);
	line-height: 1.6;
}

.ctpl-course * { box-sizing: border-box; }
.ctpl-course img { max-width: 100%; display: block; }

.ctpl-container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px;
}

/* ---------------- HERO ---------------- */
.ctpl-hero {
	    padding: 48px 0 90px;
    position: relative;
    background-image: url(/wp-content/uploads/2026/09/Gradient-BG-Image-1.png);
    background-repeat: no-repeat;
    width: 100%;
    background-size: cover;
    height: 270px;
}

.ctpl-hero-inner {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 40px;
	align-items: start;
}

.ctpl-breadcrumb {
	font-size: 12px;
	font-weight: 500;
	color: #007CFF;
	margin-bottom: 18px;
}
.ctpl-breadcrumb a { color: #007CFF; }
.ctpl-breadcrumb a:hover { color: var(--ctpl-blue); }
.ctpl-crumb-sep { margin: 0 6px;
	color: #007CFF;
font-weight:600;
	font-size:12px;
		line-height:12px;
}
.ctpl-crumb-current { color: var(--ctpl-blue); }

.ctpl-title {
    font-size: 32px;
    font-weight: 600;
    color: #1A1A1A;
    margin: 20px 0;
    line-height: 44px;
}

.ctpl-short-desc {
	color: #445269;
    font-size: 14px;
    max-width: 560px;
    margin: 0;
    line-height: 20px;
}

/* ---------------- SIDEBAR CARD ---------------- */
.ctpl-sidebar { position: relative; }

.ctpl-sidebar-card {
	background: #fff;
	border-radius: var(--ctpl-radius);
	box-shadow: 0 20px 45px rgba(20, 40, 90, .14);
	overflow: hidden;
	margin-bottom: -70px; /* poke into content below, like the reference */
}

.ctpl-sidebar-visual {
    padding: 0;
    position: relative;
    height: 230px;
}

.ctpl-sidebar-badge {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	color: var(--ctpl-blue-dark);
	font-size: 14px;
}
.ctpl-sidebar-badge img { width: 22px; height: 22px; object-fit: contain; }

.ctpl-sidebar-name {
	font-size: 20px;
	font-weight: 800;
	color: #0f1b2d;
	margin: 6px 0 10px;
	max-width: 60%;
}
.ctpl-sidebar-name b, .ctpl-sidebar-name strong { color: var(--ctpl-blue); }

.ctpl-sidebar-illustration {
	position: absolute;
	width: 100%;
	border-radius: 10px 10px 0 0;
	height:220px
}

.ctpl-sidebar-body { padding: 20px; }

.ctpl-sidebar-heading {
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
    margin: 0 0 14px;
    color: #1A1A1A;
}

.ctpl-sidebar-info {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	border-top: 1px solid var(--ctpl-border);
	padding-top: 14px;
}
.ctpl-sidebar-info li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: #404040;
	padding: 6px 0;
}

.ctpl-icon {
	width: 18px;
	height: 18px;
	flex: none;
	display: inline-block;
	background-color: #7c93b8;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}
.ctpl-icon-book { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h11a3 3 0 013 3v13H7a3 3 0 01-3-3V4z'/%3E%3Cpath d='M4 17a3 3 0 003 3h11' fill='none' stroke='%23fff' stroke-width='0'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h11a3 3 0 013 3v13H7a3 3 0 01-3-3V4z'/%3E%3C/svg%3E"); }
.ctpl-icon-calendar { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9h18M8 3v4M16 3v4' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3C/svg%3E"); }
.ctpl-icon-user { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E"); }
.ctpl-icon-flag { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3v18M5 4h13l-3 4 3 4H5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3v18M5 4h13l-3 4 3 4H5'/%3E%3C/svg%3E"); }
.ctpl-icon-badge { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='5'/%3E%3Cpath d='M8 13l-2 8 6-3 6 3-2-8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='5'/%3E%3Cpath d='M8 13l-2 8 6-3 6 3-2-8'/%3E%3C/svg%3E"); background-color: var(--ctpl-blue); width: 15px; height: 15px; }

.ctpl-price-row {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 16px;
}
.ctpl-old-price { color: #9aa7b8; text-decoration: line-through; font-size: 14px; }
.ctpl-price { color: #F5623D; font-size: 20px; font-weight: 500; 
line-height:30px;
}

/* ---------------- BUTTONS ---------------- */
.ctpl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 22px;
	border-radius: 999px;
	font-weight: 500;
	font-size: 15px;
	border: none;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.ctpl-btn-gradient {
background: linear-gradient(90deg, #4ECBEE 0%, #4C53F2 100%);
	color: #fff;
}
.ctpl-btn-gradient:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(47,111,237,.38); }
.ctpl-btn-gradient:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.ctpl-btn-block { width: 100%; }
.ctpl-arrow { transition: transform .15s ease; }
.ctpl-btn:hover .ctpl-arrow { transform: translateX(3px); }

/* ---------------- MAIN CONTENT ---------------- */
.ctpl-main { padding-top: 50px; }

.ctpl-section { padding: 46px 0;
	border-bottom: 1px solid #D3D3D3;
    width: 58%;
}
section#ctpl-dang-ky, section.ctpl-section.ctpl-sectionfaqq {
    width: 100%;
}
.ctpl-section:last-of-type { border-bottom: none; }

.ctpl-h2 {
	font-size: 24px;
	font-weight: 800;
	color: #0f1b2d;
	margin: 0 0 18px;
}
.ctpl-h3 {
	font-size: 17px;
	font-weight: 700;
	color: var(--ctpl-blue);
	margin: 26px 0 12px;
}
.ctpl-center { text-align: center; }
.ctpl-section-lead { color: var(--ctpl-text-muted); margin: -8px 0 20px; }

.ctpl-eyebrow {
	text-align: center;
	color: var(--ctpl-orange);
	font-weight: 700;
	letter-spacing: .12em;
	font-size: 12px;
	margin: 0 0 8px;
}

/* checklist with round check icon */
.ctpl-checklist { list-style: none; margin: 0; padding: 0; }
.ctpl-checklist li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 9px 0;
	font-size: 15.5px;
	color: #33445c;
}
.ctpl-check {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	border-radius: 50%;
	background: var(--ctpl-blue);
	position: relative;
}
.ctpl-check::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 3px;
	width: 6px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.ctpl-checklist-plain li { padding-left: 0; }
.ctpl-checklist-plain li::before { content: "•"; margin-right: 10px; color: var(--ctpl-blue); }

.ctpl-dashlist { list-style: none; margin: 0; padding: 0; }
.ctpl-dashlist li {
	position: relative;
	padding: 8px 0 8px 20px;
	color: #33445c;
	font-size: 15.5px;
}
.ctpl-dashlist li::before {
	content: "•";
	position: absolute;
	left: 0;
	top: 8px;
	color: #9aa7b8;
}

/* ---------------- ACCORDION (curriculum + FAQ) ---------------- */
.ctpl-accordion { display: flex; flex-direction: column; gap: 12px; }

.ctpl-acc-item {
	border: 1px solid var(--ctpl-border);
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
}

.ctpl-acc-head {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background: none;
	border: none;
	padding: 16px 20px;
	cursor: pointer;
	text-align: left;
	font: inherit;
}
.ctpl-acc-title { font-weight: 700; color: #0f1b2d; font-size: 15.5px; }

.ctpl-acc-meta { display: flex; align-items: center; gap: 14px; flex: none; }
.ctpl-acc-sessions { color: var(--ctpl-text-muted); font-size: 14px; }

.ctpl-acc-chevron {
	width: 12px; height: 12px;
	border-right: 2px solid #7c93b8;
	border-bottom: 2px solid #7c93b8;
	transform: rotate(0deg);
	transition: transform .2s ease;
}
.ctpl-acc-item.is-open .ctpl-acc-chevron {
    transform: rotate(0deg);
    background: #D3D3D3;
}
.ctpl-acc-chevron-round {
	    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: #007CFF;
    position: relative;
}
.ctpl-acc-chevron-round::before {
	content: "";
	position: absolute;
	left: 50%; top: 50%;
	width: 8px; height: 8px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: translate(-50%,-65%) rotate(45deg);
	transition: transform .2s ease;
}
.ctpl-acc-item.is-open .ctpl-acc-chevron-round::before { transform: translate(-50%,-35%) rotate(225deg); }

.ctpl-acc-panel-inner {
	padding: 0 20px 20px;
	display: flex;
	gap: 20px;
	align-items: flex-start;
}
.ctpl-acc-panel { background: var(--ctpl-bg-soft); }
.ctpl-acc-panel .ctpl-acc-panel-inner { padding-top: 18px; }
.ctpl-acc-image { width: 220px; border-radius: 10px; flex: none; }
.ctpl-acc-desc { margin: 0; color: #404040; font-size: 16px; 
line-height:24px;
}

/* ---------------- INSTRUCTORS ---------------- */
.ctpl-instructors { display: flex; flex-direction: column; gap: 16px; }

.ctpl-instructor-card {
	border: 1px solid var(--ctpl-border);
	border-radius: 12px;
	padding: 20px;
}

.ctpl-instructor-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.ctpl-instructor-photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.ctpl-instructor-name-block { flex: 1; }
.ctpl-instructor-name { font-weight: 700; font-size: 15.5px; margin: 0; color: #0f1b2d; }
.ctpl-instructor-position { margin: 2px 0 0; font-size: 13px; color: var(--ctpl-text-muted); }

.ctpl-instructor-social { display: flex; gap: 8px; flex: none; }
.ctpl-social {
	width: 30px; height: 30px;
	border-radius: 50%;
	background: var(--ctpl-bg-soft);
	position: relative;
	display: inline-block;
}
.ctpl-social::after {
	content: "";
	position: absolute; left: 50%; top: 50%;
	width: 13px; height: 13px;
	background-color: var(--ctpl-blue);
	transform: translate(-50%,-50%);
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center; mask-position: center;
	-webkit-mask-size: contain; mask-size: contain;
}
.ctpl-social-fb::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 9h3V5h-3c-2.2 0-4 1.8-4 4v2H8v4h2v6h4v-6h3l1-4h-4V9c0-.6.4-1 1-1z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 9h3V5h-3c-2.2 0-4 1.8-4 4v2H8v4h2v6h4v-6h3l1-4h-4V9c0-.6.4-1 1-1z'/%3E%3C/svg%3E"); }
.ctpl-social-li::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='9' width='4' height='12'/%3E%3Ccircle cx='5' cy='4' r='2'/%3E%3Cpath d='M11 9h4v2c1-1.5 2.5-2.3 4.5-2.3 3 0 4.5 2 4.5 5.8V21h-4v-6c0-1.6-.6-2.7-2-2.7-1.1 0-1.8.8-2 1.6-.1.3-.1.7-.1 1.1V21h-4V9z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='9' width='4' height='12'/%3E%3Ccircle cx='5' cy='4' r='2'/%3E%3Cpath d='M11 9h4v2c1-1.5 2.5-2.3 4.5-2.3 3 0 4.5 2 4.5 5.8V21h-4v-6c0-1.6-.6-2.7-2-2.7-1.1 0-1.8.8-2 1.6-.1.3-.1.7-.1 1.1V21h-4V9z'/%3E%3C/svg%3E"); }
.ctpl-social-mail::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 6l9 7 9-7' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3C/svg%3E"); }

.ctpl-instructor-bio { color: #445269; font-size: 14.5px; margin: 0 0 12px; }

.ctpl-instructor-tags { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.ctpl-tag { display: inline-flex; align-items: center; gap: 6px; color: var(--ctpl-blue); font-size: 13.5px; font-weight: 600; }

/* ---------------- SIGNUP + TESTIMONIAL ---------------- */
.ctpl-signup-section { background: var(--ctpl-bg-soft); }

.ctpl-signup-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	margin-top: 30px;
}

.ctpl-form {
	background: #fff;
	border: 1px solid var(--ctpl-border);
	border-radius: var(--ctpl-radius);
	padding: 26px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.ctpl-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: #33445c; flex: 1; }
.ctpl-field input {
	font: inherit;
	font-weight: 400;
	padding: 11px 14px;
	border: 1px solid var(--ctpl-border);
	border-radius: 8px;
	background: #f9fafc;
}
.ctpl-field input:focus { outline: none; border-color: var(--ctpl-blue); background: #fff; }
.ctpl-field-row { display: flex; gap: 14px; }
.ctpl-form-note { font-size: 12px; color: var(--ctpl-text-muted); margin: 0; }
.ctpl-form-msg { margin: 0; font-size: 13.5px; font-weight: 600; min-height: 18px; }
.ctpl-form-msg.is-success { color: #16a34a; }
.ctpl-form-msg.is-error { color: #dc2626; }

.ctpl-testimonial {
	background: linear-gradient(135deg, var(--ctpl-blue-dark), #1e3a8a);
	border-radius: var(--ctpl-radius);
	padding: 30px;
	color: #fff;
	position: relative;
	display: flex;
	flex-direction: column;
}
.ctpl-testimonial-track { position: relative; min-height: 220px; }
.ctpl-testimonial-slide { display: none; }
.ctpl-testimonial-slide.is-active { display: block; }
.ctpl-quote-mark { font-size: 46px; opacity: .35; line-height: 1; display: block; }
.ctpl-testimonial-logo { height: 22px; width: auto; position: absolute; top: 30px; right: 30px; filter: brightness(0) invert(1); opacity: .85; }
.ctpl-testimonial-quote { font-size: 17px; font-style: italic; line-height: 1.6; margin: 6px 0 24px; }
.ctpl-testimonial-person { display: flex; align-items: center; gap: 12px; }
.ctpl-testimonial-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.ctpl-testimonial-name { margin: 0; font-weight: 700; font-size: 14.5px; }
.ctpl-testimonial-role { margin: 2px 0 0; font-size: 13px; color: #b9c6ea; }

.ctpl-slider-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 22px; }
.ctpl-slider-btn {
	width: 34px; height: 34px;
	border-radius: 50%;
	border: none;
	background: var(--ctpl-orange);
	color: #fff;
	font-size: 15px;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
}
.ctpl-slider-count { font-size: 13.5px; color: #cdd8ef; }

/* ---------------- ARCHIVE / COURSE CARD GRID ---------------- */
.ctpl-cards-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.ctpl-card {
	display: block;
	background: #fff;
	border: 1px solid var(--ctpl-border);
	border-radius: var(--ctpl-radius);
	overflow: hidden;
	transition: box-shadow .15s ease, transform .15s ease;
}
.ctpl-card:hover { box-shadow: 0 16px 34px rgba(20,40,90,.14); transform: translateY(-3px); }

.ctpl-card-media {
	position: relative;
	background: linear-gradient(135deg, #eaf2ff, #f7fbff);
	overflow: hidden;
}
.ctpl-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ctpl-card-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 4px 10px rgba(20,40,90,.18);
	display: flex;
	align-items: center;
	justify-content: center;
}
.ctpl-card-badge img { width: 20px; height: 20px; object-fit: contain; }

.ctpl-card-body { padding: 24px; }

.ctpl-card-title {
	font-size: 20px;
    font-weight: 600;
    color: rgba(26, 26, 26, 1);
    margin: 0 0 20px;
	line-height:30px;
	height:60px;
}

.ctpl-card-desc {
    font-size: 14px;
    color: rgba(64, 64, 64, 1);
    margin: 0 0 14px;
    line-height: 20px;
}

.ctpl-card-meta {
	    list-style: none;
    margin: 0 0 16px;
    padding: 10px 0 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-bottom: 1px solid rgba(211, 211, 211, 1);
    padding-bottom: 14px;
}
.ctpl-card-meta li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: rgba(64, 64, 64, 1);
}

.ctpl-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.ctpl-card-price {
    color: rgba(245, 98, 61, 1);
    font-weight: 500;
    font-size: 24px;
    line-height: 30px;
}
.ctpl-btn-sm { padding: 9px 16px; font-size: 14px; 
    line-height: 16px;
}
.ctpl-btn-outline {
	background: #fff;
	color: var(--ctpl-blue);
	border: 1.5px solid var(--ctpl-blue);
	box-shadow: none;
}
.ctpl-btn-outline:hover { background: var(--ctpl-bg-soft); }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 900px) {
	.ctpl-hero-inner { grid-template-columns: 1fr; }
	.ctpl-sidebar-card { margin-bottom: 0; }
	.ctpl-main { padding-top: 40px; }
	.ctpl-signup-grid { grid-template-columns: 1fr; }
	.ctpl-field-row { flex-direction: column; }
	.ctpl-cards-grid { grid-template-columns: repeat(2, 1fr); }
	.ctpl-acc-panel-inner { flex-direction: column; }
	.ctpl-acc-image { width: 100%; }
}

@media (max-width: 560px) {
	.ctpl-title { font-size: 26px; }
	.ctpl-cards-grid { grid-template-columns: 1fr; }
}