:root { --main-color: #C00000; --sec-color: #fb4141; --thir-color: #6e6e6e; --four-color: #fbad37; --hover-color: black; --footer-color: #fff; --animate-delay: 0.5s; }
.box__product--name { font-size: 20px; color: var(--main-color); margin-bottom: 10px; }
.box__product--price { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 10px; }
.box__product--regular, .box__product--null { font-size: 18px; color: var(--main-color); }
.box__product--sale { font-size: 15px; color: var(--sec-color); text-decoration: line-through; }
.box__product--null:hover { color: var(--sec-color); }
.title-pro-detail { color: var(--main-color); }
.section-tin-tuc .box__tintuc { align-items: unset; }
.section-tin-tuc .box__tintuc--name { font-size: 17px; }
.left-pro-detail, .right-pro-detail { flex: 0 0 50%; max-width: 50%; }
.share-box { background: unset; padding: unset; }
.section-tin-tuc .box__tintuc--btn { position: absolute; bottom: 0; right: 0; padding: 5px 10px; background: var(--main-color); color: #fff; }
.titleMain p { text-align: center; }
.gioithieu .d-flex { justify-content: space-between; }

/* Text Hide */
.text-split { overflow: hidden; text-overflow: ellipsis; white-space: normal; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 3; }

/* 7/6/24 */
.box__product { border: 1px solid var(--main-color); margin: 15px 0; }
.box__product--content { box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15); background: #fff; }
.box__product--content article { max-height: 70%; overflow: hidden; position: relative; }
.box__product--content article::after { content: ''; width: 100%; height: 20px; bottom: 0; left: 0; position: absolute; background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); }

/* 15/6/24 */
.ul-tabs-pro-detail { position: relative; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; list-style: none; margin-bottom: 20px; margin-top: 0; padding: 0; }
.ul-tabs-pro-detail li { font-size: 16px; color: #222222; display: flex; justify-content: center; align-items: center; position: relative; height: 40px; padding: 0 20px; margin: 0px 5px 10px 5px; border-radius: 20px; cursor: pointer; }
.ul-tabs-pro-detail li.active, .ul-tabs-pro-detail li:hover { color: #fff; background: var(--main-color); }
.content-tabs-pro-detail { display: none; position: relative; }
.content-tabs-pro-detail.active { display: block; }

/* 27/6/24 */
.ul-news li { color: #fff; font-size: 12px; }

/* 9/8/24 */
.box__product button { position: absolute; bottom: 0; right: 0; padding: 10px 15px; background: var(--main-color); color: #fff; text-transform: capitalize; border-top-left-radius: 25px; transition: .3s; }
.box__product button:hover { background: black; }

.box_thongbao_kh {width: 100%;display: inline-block;vertical-align: top;padding: 30px 5%;text-align: center;
background: #F0F0F0;font-size: 18px;color: #DD0601;}

/* Header */

.logo-header { width: 20%; }
.logo-header img { max-height: 65px; }
.button-study { width: 120px; }
.button-study a { width: 100%; background: var(--main-color); display: inline-block; text-align: center; padding: 8px 10px; border-radius: 7px; border: 2px solid var(--main-color); color: #fff; font-weight: 600; transition: all 0.5s; }
.button-study a:hover { background: #fff; color: var(--main-color); }
.button-login { width: 20%; }
.user-head { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.user-head a { background: #fff; display: inline-block; text-align: center; padding: 6px 6px; border-radius: 7px; border: 2px solid var(--main-color); color: var(--main-color); font-weight: 500; transition: all 0.5s; font-size: 13px; }
.user-head a:hover { background: var(--main-color); color: #fff; }

/* Slide */
.menu-slide { max-width: 1600px; margin: 0px auto 2rem; }

/* Khoahoc noibat */
.khoahoc-nb { padding: 2rem 0; }
.tit-desk { margin-bottom: 2rem; }
.tit-desk h2 { margin: 0; font-size: 28px; font-weight: 700; text-transform: capitalize; display: flex; justify-content: flex-start; align-items: center; font-family: "Chivo", sans-serif; }
.tit-desk h2 img { height: 25px; margin-right: 5px; }
.course-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: 1280px; margin: 0 auto 2rem; }
.course-card { background: #fff; border: 1px solid #d9d9d9; border-radius: 14px; overflow: hidden; position: relative; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); transition: 0.25s ease; }
.course-card:hover { border: 1px solid var(--main-color); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); }
.thumb { height: 170px; position: relative; overflow: hidden; padding: 14px; }
.pic-khoahoc { position: relative; overflow: hidden; }
.hot-badge { position: absolute; top: 8px; right: -30px; background: #ef2f2f; color: #fff; font-weight: 700; font-size: 12px; padding: 6px 32px; transform: rotate(45deg); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); letter-spacing: 0.5px; }
.teacher { width: 72px; min-width: 72px; height: 112px; border-radius: 10px; background: linear-gradient(180deg, #f8f8f8, #dcdcdc); display: flex; align-items: center; justify-content: center; color: #222; font-size: 12px; font-weight: 700; border: 1px solid rgba(255, 255, 255, 0.4); }
.thumb-text { flex: 1; padding-left: 12px; }
.thumb-brand { font-size: 10px; text-transform: uppercase; opacity: 0.95; margin-bottom: 8px; font-weight: 700; letter-spacing: 0.6px; }
.thumb-title-big { font-size: 24px; font-weight: 800; line-height: 1.1; margin-bottom: 8px; }
.thumb-sub { font-size: 13px; opacity: 0.95; font-style: italic; }
.course-card .card-body { padding: 12px 10px 12px; }
.title-khoahoc { font-size: 16px; line-height: 25px; font-weight: 600; margin-bottom: 5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.teacher-name { font-size: 14px; color: #333; margin-bottom: 12px; }
.teacher-name span { color: #1f1f1f; font-weight: 500; }
.tags { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #fff; line-height: 1; }
.tag.video { background: var(--four-color); }
.tag.live { background: var(--main-color); }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; row-gap: 10px; column-gap: 10px; margin-bottom: 16px; }
.info-item { display: flex; align-items: center; gap: 6px; font-size: 15px; color: #4a4a4a; }
.info-item .icon { width: 18px; height: 18px; color: var(--sec-color); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.price-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; min-height: 28px; }
.new-price { font-size: 16px; font-weight: 700; color: var(--main-color); }
.old-price { font-size: 14px; color: #c4c4c4; text-decoration: line-through; }
.discount { margin-left: auto; background: var(--sec-color); color: #fff; font-weight: 700; border-radius: 5px; padding: 4px 9px; font-size: 12px; }
.course-card .btn { width: 100%; height: 38px; border: 1.5px solid var(--main-color); color: var(--main-color); background: #fff; border-radius: 6px; font-size: 15px; font-weight: 700; cursor: pointer; transition: 0.2s ease; }
.course-card .btn:hover { background: var(--main-color); color: #fff; }
.view-all { text-align: center; }
.view-all a { display: inline-block; cursor: pointer; padding: 10px 2rem; color: var(--main-color); font-size: 15px; text-transform: capitalize; font-weight: 600; border-radius: 2rem; background: #fbecec; transition: all 0.4s; }
.view-all a:hover { background: var(--main-color); color: #fff; }

/* lotrinhhoc */
.lotrinh-full { padding: 2rem 0; }
.tit-desk2 { text-align: center; margin-bottom: 2rem; }
.tit-desk2 h2 { display: inline-block; padding: 0 3rem; position: relative; font-size: 32px; text-transform: uppercase; font-weight: 700; margin-bottom: 5px; font-family: "Chivo", sans-serif; }
.tit-desk2 h2:before { content: ''; width: 28px; height: 28px; background: url(../images/destination.png) no-repeat; background-size: auto 100%; position: absolute; top: calc(50% - 14px); left: 0; }
.tit-desk2 h2:after { content: ''; width: 28px; height: 28px; background: url(../images/destination.png) no-repeat; background-size: auto 100%; position: absolute; top: calc(50% - 14px); right: 0; transform: scaleX(-1); }
.tit-desk2 p { margin-bottom: 0; color: var(--main-color); font-weight: 500; text-transform: capitalize; letter-spacing: 2px; }
.ul-tabs-lotrinh { padding: 0; list-style: none; display: flex; justify-content: center; align-items: stretch; gap: 10px; width: 100%; margin-bottom: 2rem; position: relative; z-index: 2 }
.ul-tabs-lotrinh li { cursor: pointer; padding: 8px 2rem; color: var(--main-color); font-size: 15px; text-transform: capitalize; font-weight: 600; border-radius: 2rem; display: flex; align-items: center; justify-content: center; background: #fbecec; }
.ul-tabs-lotrinh li.active, .ul-tabs-lotrinh li:hover { background: var(--main-color); color: #fff }
.content-tabs-lotrinh { display: none }
.content-tabs-lotrinh.active { display: block }

/* Partner - Feedback */
.Partner-Feedback { padding: 2rem 0; }
.Partner-Feedback .widthBox { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; }
.BoxPartner { width: calc((100% - 2rem)/2); }
.BoxFeedback { width: calc((100% - 2rem)/2); }
.img_partner { width: calc(100% - 10px); margin: 3px auto; background: #fff; border: 1px solid #d9d9d9; border-radius: 14px; overflow: hidden; position: relative; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); transition: 0.25s ease; }
.img_partner:hover { border: 1px solid var(--main-color); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); }
.img_partner img { margin: 0px auto; }
.item-feedback { width: 100%; text-align: center; position: relative; }
.pic-feedback { width: 130px; margin: 0px auto; border-radius: 50%; overflow: hidden; border: 5px solid var(--main-color); position: relative; z-index: 2; }
.info-feedback { background: #fbecec; padding: 5rem 1rem 1rem; border-radius: 10px; position: relative; z-index: 1; margin-top: -65px; }
.name-feedback { text-transform: uppercase; font-family: "Chivo", sans-serif; font-weight: 600; font-size: 20px; margin-bottom: 10px; }
.desc-feedback { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; line-height: 23px; }

/* Bangvang */
.Goldenboard { padding: 2rem 0; }
.cont_golden { padding: 2rem 0 4rem; }
.cont_golden .slick-current .item-bangvang { width: 100%; transform: scale(1.0); }
.item-bangvang { width: 100%; margin: 0rem auto 0; transition: all 0.5s; text-align: center; }
.pic-bangvang { border-radius: 1rem; overflow: hidden; margin-bottom: 1rem; border: 5px solid var(--main-color); }
.pic-bangvang img { transition: all 0.5s; }
.info-bangvang { text-align: center; }
.name-bangvang { color: var(--main-color); text-transform: uppercase; font-size: 20px; font-weight: 600; }
.desc-bangvang { font-size: 15px; line-height: 25px; }
.cont_golden .slick-prev, .cont_golden .slick-next { top: auto; bottom: 0; width: 37px; height: 37px; border: 2px solid var(--main-color); color: var(--main-color); border-radius: 10px; transform: translate(0, 0%); }
.cont_golden .slick-prev:hover, .cont_golden .slick-next:hover { background: var(--main-color); }
.cont_golden .slick-prev:hover:before, .cont_golden .slick-next:hover:before { color: #fff; }
.cont_golden .slick-prev { left: calc(50% - 42px); }
.cont_golden .slick-next { right: calc(50% - 42px); }
.cont_golden .slick-prev:before, .cont_golden .slick-next:before { font-family: var(--fa-style-family, "Font Awesome 6 Pro"); color: var(--main-color); font-size: 15px; }
.cont_golden .slick-prev:before { content: '\f177'; }
.cont_golden .slick-next:before { content: '\f178'; }
.item-bangvang:hover .pic-bangvang img { transform: scale(1.1); }

/* Giaovien */
.Giaovien { padding: 2rem 0; }
.Boxgiaovien { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.pic-giaovien { width: 40%; }
.pic-giaovien img { }
.content-giaovien { width: 56%; }

/* Footer */
footer#footer { background: #fbecec; }
.footerArticle { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; padding: 3rem 0 1rem; }
.item-footer:nth-child(1) { width: 30%; }
.item-footer:nth-child(2) { width: 20%; }
.item-footer:nth-child(3) { width: 25%; }
.item-footer:nth-child(4) { width: 20%; text-align: center; }
.logo-footer { margin-bottom: 1rem; }
.logo-footer img { max-height: 100px; }
.footer-info { margin: 0; padding: 0; list-style: none; }
.footer-info li { margin-bottom: 10px; font-size: 15px; }
.footer-info li i { font-size: 16px; font-weight: 700; color: var(--main-color); }
.footer-info li a { color: #000; }
.title-footer { font-size: 18px; font-family: "Chivo", sans-serif; color: var(--main-color); text-transform: uppercase; margin-bottom: 1rem; }
.list-footer { list-style: none; padding: 0; margin: 0; }
.list-footer li { margin-bottom: 10px; }
.list-footer li a { text-transform: capitalize; font-weight: 500; }
.list-footer li a:hover { color: var(--main-color); }
.social-footer { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 5px; }
.footerPowered { background: var(--main-color); color: #fff; font-size: 12px; padding: 10px 0; }
.footerPowered .widthBox { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.footer-copyright { width: 35%; text-align: left; }
.footer-info-bottom { width: 63%; text-align: right; }

/* Khoa hoc detail */
.Box-ListPro { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; gap: 1rem; margin-bottom: 2rem; }
.box_load_ContentDetail {
	width: 100%;display: inline-block;vertical-align: top;margin-bottom: 20px;
	background: #FFF;position: relative;
}
.box_load_ContentDetail .icon-exit {
	width: 30px;height: 30px;line-height: 30px;text-align: center;
	background: #DD0601;color: #FFF;cursor: pointer;font-size: 16px;
	position: absolute;top: 5px;right: 5px;border-radius: 4px;
}

.box_load_ContentDetail.box_active {
	position: fixed;width: 100%;
	left:0px;top:7%;margin: 0px;
	z-index: 999999;

}

.box_load_ContentDetail.box_active .box_show_noidung {
	padding-top: 45px;height: 100%;
	background: #F2F2F2;border: solid 1px #1D2D63;
}

.box_show_noidung {
	width: 100%;display: inline-block;vertical-align: top;padding: 15px 4%;border: solid 2px #CCC;border-radius: 10px;
	margin-bottom: 20px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.title_detail_noidung {width: 100%;display: inline-block;vertical-align: top;margin-bottom: 20px;
font-size: 18px;font-weight: bold;;color: #DD0601;text-align: center;}

.box_show_noidung embed {
	overflow-y: scroll;
}

/*.List-ProLeft, .List-ProRight { min-height: 500px; }*/
.List-ProLeft { width: calc(60% - 0.5rem); display: flex; flex-direction: column; }
.lesson-video { width: 100%; line-height: 0; border-radius: 1rem 1rem 0 0; overflow: hidden; }
.lesson-video iframe { width: 100%; height: 400px; display: block; }
.lesson-info { background: #fbecec; padding: 1rem; border-radius: 0 0 1rem 1rem; overflow: hidden; flex: 1; }
.lesson-info h2 { font-size: 18px; font-weight: 600; color: var(--main-color); margin-bottom: 10px; }
.lesson-desc { line-height: 1.6; }
.List-ProRight { width: calc(40% - 0.5rem); display: flex; flex-direction: column; }
.lesson-right-title { margin: 0 0 20px; font-size: 20px; font-weight: 700; color: var(--main-color); text-transform: capitalize; }
.boxLession { height: 500px; overflow-y: auto; overflow-x: hidden; padding-right: 5px; }
.lesson-accordion { display: flex; flex-direction: column; gap: 14px; }
.lesson-item { border: 1px solid #ebe9e9; border-radius: 10px; overflow: hidden; background: #fff; transition: all 0.45s ease; }
.lesson-item.active { border: 1px solid var(--main-color); box-shadow: rgb(192 0 0 / 27%) 0px 3px 3px 0px; }
.lesson-item-head { display: flex; align-items: center; gap: 12px; padding: 10px; cursor: pointer; background: #fff; }
.lesson-item-number { width: 34px; height: 34px; border-radius: 50%; background: #fbecec; color: var(--main-color); font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lesson-item-name { flex: 1; font-size: 16px; font-weight: 600; color: #222; text-transform: capitalize; }
.lesson-item-icon { font-size: 18px; color: #666; transition: transform 0.45s ease; flex-shrink: 0; }
.lesson-item.active .lesson-item-icon { transform: rotate(90deg); }
.lesson-item-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s ease, opacity 0.35s ease, border-color 0.45s ease; opacity: 0; border-top: 1px solid transparent; }
.lesson-item.active .lesson-item-body { grid-template-rows: 1fr; opacity: 1; border-top: 1px solid #f0f0f0; }
.lesson-item-body-inner { overflow: hidden; padding: 0 16px; }
.lesson-item.active .lesson-item-body-inner { padding: 10px 16px 16px 16px; }
.lesson-post-list { list-style: none; padding: 0; margin: 0; }
.lesson-post-list li { padding: 6px 0; border-bottom: 1px dashed #e8e8e8; }
.lesson-post-list li:last-child { border-bottom: 0; }
.lesson-post-link { color: #333; text-decoration: none; font-size: 14px; line-height: 1.5; display: block; padding-left: 15px; position: relative; transition: color 0.3s ease; }
.lesson-post-link:before { content: "\f111"; position: absolute; left: 0; top: calc(50% - 3px); color: var(--main-color); font-size: 6px; font-weight: 700; font-family: var(--fa-style-family, "Font Awesome 6 Pro"); }
.lesson-post-link:hover { color: var(--main-color); }
.lesson-empty { padding: 12px 0; color: #888; font-size: 15px; }
.lesson-lock-popup { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; z-index: 9999; opacity: 0; visibility: hidden; transition: 0.3s; }
.lesson-lock-popup.show { opacity: 1; visibility: visible; }
.lesson-lock-box { width: 360px; background: #fff; border-radius: 20px; padding: 30px 20px; position: relative; text-align: center; animation: popupZoom .3s; }
.lesson-lock-close { position: absolute; right: 15px; top: 10px; font-size: 26px; cursor: pointer; color: #999; }
.lesson-lock-content img { width: 160px; margin-bottom: 1rem; }
.lesson-lock-content p { text-transform: capitalize; font-size: 18px; margin-bottom: 10px; font-weight: 600; }
.lesson-lock-content a { color: var(--main-color); font-weight: 600; text-transform: capitalize; text-decoration: none; }
.lesson-lock-content a:hover { text-decoration: underline; }
@keyframes popupZoom {
    from { transform: scale(.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.Content-ListPro { }
.content-detail-List { margin-bottom: 1rem; }
.title-content-detail { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 10px; color: var(--main-color); font-weight: 700; text-transform: uppercase; font-size: 20px; margin-bottom: 1rem; }
.title-content-detail img { height: 30px; }

/* Tailieu */
.banner-tailieu { background: #C00000; background: linear-gradient(90deg, rgba(192, 0, 0, 1) 0%, rgba(2, 58, 146, 1) 100%); padding: 2rem 0; margin-bottom: 2rem; }
.banner-tailieu .widthBox { display: flex; justify-content: space-between; align-items: center; gap: 0 1rem; flex-direction: row-reverse; }
.logo-2 { }
.logo-2 img { max-height: 70px; }
.tit-banner { color: #fff; }
.tit-banner h2 { font-family: "Chivo", sans-serif; font-weight: 700; font-size: 36px; margin-bottom: 10px; }
.tit-banner p { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: 5px; }
.list-tailieu { margin-bottom: 2rem; }
.list-tailieu ul { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap: 5px 1rem; }
.list-tailieu ul li { }
.list-tailieu ul li a { padding: 7px 0; display: inline-block; border-bottom: 2px solid #ffffff00; font-weight: 600; text-transform: capitalize; transition: all 0.3s; font-size: 15px; }
.list-tailieu ul li:hover a, .list-tailieu ul li a.active { border-bottom: 2px solid var(--main-color); color: var(--main-color); }
.item-tailieu { width: calc((100% - 1rem)/2); background: #fff; border: 1px solid #d9d9d9; border-radius: 14px; overflow: hidden; position: relative; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); transition: 0.25s ease; padding: 10px; }
.item-tailieu a { display: flex; justify-content: flex-start; align-items: center; gap: 10px; }
.Box-Tailieu { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; gap: 1rem; }
.pic-tailieu { width: 70px; }
.info-tailieu { width: calc(100% - 80px); }
.name-tailieu { font-size: 16px; text-transform: capitalize; font-weight: 600; margin-bottom: 1rem; }
.view-date { display: flex; justify-content: flex-start; align-items: center; color: #8f8f8f; gap: 0 1rem; }
.item-tailieu:hover { border: 1px solid var(--main-color); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); }
.item-tailieu:hover h3 { color: var(--main-color); }
.item-tailieu a { color: #000; }
.Boxinfo-news-detail { }
.info-news-detail { width: calc(100% - 110px); }
.box-news-detail { border: 1px solid #d9d9d9; border-radius: 14px; overflow: hidden; position: relative; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); transition: 0.25s ease; padding: 10px; display: flex; justify-content: flex-start; align-items: center; gap: 10px; margin-bottom: 1rem; }
.box-news-detail:hover { border: 1px solid var(--main-color); }
.pic-news-detail { border-radius: 14px; overflow: hidden; margin-bottom: 1rem; }
.icon-news-detail { width: 100px; }
.name-news-detail { font-size: 20px; font-weight: 600; margin-bottom: 10px; }
.pdf-wrap { overflow: hidden; box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px; border-radius: 10px; padding: 10px; }
.pdf-toolbar { display: flex; justify-content: flex-end; align-items: center; padding: 10px 0px; background: none; }
.pdf-download { display: inline-block; padding: 8px 14px; background: #fff; border: 1px solid var(--main-color); border-radius: 4px; color: var(--main-color); text-decoration: none; font-weight: 500; transition: all 0.5s; }
.pdf-download:hover { background: var(--main-color); color: #fff; }
.pdf-frame { display: block; width: 100%; height: 700px; border: none; }
.lession-top-detail { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; gap: 1rem; margin-bottom: 1rem; }
.lession-detail-left { width: calc(60% - 0.5rem); display: flex; flex-direction: column; }
.lession-detail-right { width: calc(40% - 0.5rem); display: flex; flex-direction: column; }
.lession-name-detail h3 { color: var(--main-color); }
.lession-name-detail { margin: 0 0 20px; }
.lession-name-detail h2 { font-size: 22px; font-weight: 700; text-transform: capitalize; color: var(--main-color); position: relative; padding-bottom: 8px; }
.lession-name-detail h2:before { content: ''; width: 30px; height: 3px; background: var(--main-color); position: absolute; bottom: 0; left: 0; }
.lession-desc-detail ul { padding: 0; margin: 0; list-style: none; }

.lession-detail-left .video-container {width: 100%;display: inline-block;vertical-align: top;border: solid 2px #DDD;
}
.lession-detail-left .video-container iframe {width: 100% !important;display: inline-block;vertical-align: top;}

/*khoa hoc cua toi*/
.khoahoccuatoi { margin-top: 20px; }
.khoahoccuatoi h2 { font-size: 34px; font-weight: 500; margin-bottom: 20px; color: #222; }
.khoahoc-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px 6px 6px; margin-bottom: 16px; background: #fff; border: 1px solid #d9d9d9; border-radius: 10px; overflow: hidden; position: relative; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); transition: 0.25s ease; flex-wrap: wrap; cursor: pointer; }
.khoahoc-item:hover { border: 1px solid var(--main-color); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); }
.khoahoc-thumb { width: 150px; border-radius: 7px; overflow: hidden; }
.khoahoc-thumb img { width: 100%; display: block; }
.khoahoc-info { width: calc(100% - 270px); }
.khoahoc-info h3 { font-size: 16px !important; font-weight: 600 !important; text-transform: uppercase !important; color: #111; margin-bottom: 0px !important; }
.khoahoc-info .giangvien { margin: 0; }
.progress-wrap { margin-bottom: 10px; }
.progress-bar { width: 220px; height: 20px; background: #fff; border-radius: 4px; overflow: hidden; position: relative; border: 1px solid #ddd; }
.progress-bar span { display: block; height: 100%; background: #28a745; }
.progress-text { font-size: 18px; color: #111; margin-top: 4px; }
.thoigian { font-size: 24px; color: #222; margin: 0; }
.khoahoc-action { width: 100px; }
.khoahoc-action a { width: 100%; display: inline-block; background: #fff; color: var(--main-color); padding: 6px 10px; text-align: center; border-radius: 7px; font-weight: 600; font-size: 13px; text-transform: capitalize; border: 2px solid var(--main-color); transition: all 0.4s; }
.khoahoc-action a:hover { background: var(--main-color); color: #fff; }
.khoahoc-action .btn { min-width: 170px; text-align: center; padding: 12px 20px; border-radius: 4px; color: #fff; text-decoration: none; font-size: 24px; font-weight: 500; }
.khoahoc-action .btn-green { background: #28a745; }
.khoahoc-action .btn-blue { background: #0d6efd; }
@media (max-width:1100px) {
    .course-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:991px) {
    .Box-ListPro { flex-direction: column; }
    .List-ProLeft, .List-ProRight { width: 100%; min-height: auto; }
    .lesson-video iframe { height: 260px; }
    .boxLession { height: auto;}
    .item-footer:nth-child(1) { width: 100%; text-align: center; margin-bottom: 1rem; }
    .item-footer:nth-child(2), .item-footer:nth-child(3), .item-footer:nth-child(4) { width: calc((100% - 2rem)/3); }
    .footerArticle { padding: 2rem 0 1rem; }
    footer#footer { padding-bottom: 56px; }
    .footer-copyright { width: 100%; text-align: center; margin-bottom: 5px; }
    .footer-info-bottom { width: 100%; text-align: center; }
}
@media (min-width:769px) {
    .item-bangvang { transform: scale(0.8); }
}
@media (max-width:768px) {
    .item-bangvang { transform: scale(1.0); width: calc(100% - 10px) !important; }
    .pic-giaovien { width: 100%; text-align: center; margin-bottom: 1rem; }
    .content-giaovien { width: 100%; }
    .BoxPartner { width: 100%; margin-bottom: 1rem; }
    .BoxFeedback { width: 100%; }
    .img_partner a { text-align: center; }
    .tit-desk h2 { justify-content: center; }
    .lession-detail-left, .lession-detail-right {width: 100%;padding: 10px;}
    .khoahoc-thumb {width: 100%;display: inline-block;vertical-align: top;text-align: center;}
    .khoahoc-thumb img {max-width: 270px;display: inline-block;vertical-align: top;}
    .khoahoc-info {width: 100%;}
	.box_show_noidung {padding: 10px 5px;}

}
@media (max-width:640px) {
    .course-list { grid-template-columns: 1fr; }
    .item-footer:nth-child(2), .item-footer:nth-child(3), .item-footer:nth-child(4) { width: 100%; text-align: center; }
}
@media (max-width:525px) {
    .tit-desk h2 { font-size: 24px; }
    .tit-desk2 h2 { font-size: 26px; }
    .tit-desk2 p { font-size: 12px; }
    .name-bangvang { font-size: 16px; }
    .desc-bangvang { font-size: 14px; }
    .name-feedback { font-size: 17px; }
}