/* CSS các trang ngành & chuyên ngành – lấy từ daihoc.fpt.edu.vn (2026-11-02T11:26:43.068Z) */
img[data-dominant-color]:not(.has-transparency) { background-color: var(--dominant-color); }
.fa, .fa-brands, .fa-classic, .fa-regular, .fa-solid, .fab, .far, .fas { --_fa-family: var(--fa-family,var(--fa-style-family,"Font Awesome 7 Free")); -webkit-font-smoothing: antialiased; display: var(--fa-display,inline-block); font-family: var(--_fa-family); font-feature-settings: normal; font-style: normal; font-synthesis: none; font-variant: normal; font-weight: var(--fa-style,900); line-height: 1; text-align: center; text-rendering: auto; width: var(--fa-width,1.25em); }
:is(.fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands, .fa-classic, .fa)::before { content: var(--fa)/""; }
@supports not (content:""/""){:is(.fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands, .fa-classic, .fa)::before { content: var(--fa); }}
.fa-add, .fa-plus { --fa: "\+"; }
.fa-minus, .fa-subtract { --fa: "\f068"; }
.fa-solid { --fa-style: 900; }
.container { max-width: 1252px; padding-left: 15px; padding-right: 15px; margin: 0px auto; }
a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style-type: none; }
.md { display: flex !important; }
.sm { display: none !important; }
img { width: auto; height: 100%; object-fit: cover; max-width: 100%; }
section:not(.hero) { padding: 80px 0px; }
.banner { position: relative; }
.banner img { width: 100%; height: 100%; }
.overview-detail-banner h1 { position: absolute; top: 50%; transform: translate(-50%, -50%); left: 50%; max-width: 1252px; width: 100%; padding-left: 15px; padding-right: 15px; color: var(--cl-primary); font-size: 54px; font-weight: 700; }
.title-large-2 { font-size: 44px; font-weight: 700; }
.future-btn { margin-top: 24px; background-color: var(--cl-primary); color: rgb(255, 255, 255); display: flex; width: fit-content; border-radius: 8px; gap: 16px; align-items: center; padding: 12px 24px; font-weight: 700; cursor: pointer; transition: 0.3s; }
.future-video { position: relative; }
.future-video .intro-image { width: 100%; height: 100%; max-height: 315px; border-radius: 8px; object-fit: cover; }
.future-video-decor { position: absolute; right: -80px; top: -36px; z-index: -1; max-height: 315px; }
.news { position: relative; }
.news h2 { margin-bottom: 40px; }
.overview-detail-train { position: relative; }
.news > img, .overview-detail-train > img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: -1; }
.news-slider-wrapper { position: relative; margin-top: 40px; }
.news-slider-wrapper.has-navigation { padding-top: 60px; }
.news-slider-wrapper .swiper { overflow: hidden; }
.news-slider-desktop { display: block; }
.news-slider-mobile { display: none !important; }
.news-slider-wrapper .swiper-wrapper { display: flex; align-items: stretch; }
.news-slider-wrapper .swiper-slide { height: auto; flex-shrink: 0; display: flex; width: 100% !important; }
.news-slider-wrapper .swiper-button-next, .news-slider-wrapper .swiper-button-prev { width: 48px; height: 48px; background: rgb(255, 255, 255); border: 1px solid rgb(224, 224, 224); border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 8px; transition: 0.3s; top: 0px; margin-top: 25%; z-index: 10; }
.news-slider-wrapper .swiper-button-next:hover, .news-slider-wrapper .swiper-button-prev:hover { background: var(--cl-primary); border-color: var(--cl-primary); box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 12px; }
.news-slider-wrapper .swiper-button-next:hover::after, .news-slider-wrapper .swiper-button-prev:hover::after { color: rgb(255, 255, 255); }
.news-slider-wrapper .swiper-button-next::after, .news-slider-wrapper .swiper-button-prev::after { font-size: 18px; font-weight: 700; color: var(--cl-primary); transition: color 0.3s; }
.news-slider-wrapper .swiper-button-next { right: 0px; }
.news-slider-wrapper .swiper-button-prev { left: 0px; }
@media screen and (max-width: 1024px){.news-slider-wrapper.has-navigation { padding-top: 60px; }}
@media screen and (max-width: 1024px){.news-slider-wrapper .swiper-button-next { right: 0px; }}
@media screen and (max-width: 1024px){.news-slider-wrapper .swiper-button-prev { left: 0px; }}
@media screen and (max-width: 1024px){.news-slider-wrapper.has-navigation { padding-top: 0px; }}
@media screen and (max-width: 1024px){.news-slider-wrapper .swiper-button-next, .news-slider-wrapper .swiper-button-prev { width: 40px; height: 40px; top: 14%; }}
@media screen and (max-width: 1024px){.news-slider-wrapper .swiper-button-next::after, .news-slider-wrapper .swiper-button-prev::after { font-size: 16px; }}
@media screen and (max-width: 1024px){.news-slider-desktop { display: none !important; }}
@media screen and (max-width: 1024px){.news-slider-mobile { overflow: hidden; display: block !important; }}
@media screen and (max-width: 1024px){.news-slider-mobile .swiper-wrapper { display: flex; width: 100%; }}
@media screen and (max-width: 1024px){.news-slider-mobile .swiper-slide { min-width: 100%; flex-shrink: 0; display: block; box-sizing: border-box; width: 100% !important; }}
.news-item-mobile { position: relative; overflow: hidden; border: 1px solid rgb(204, 204, 204); background: rgb(255, 255, 255); transition: transform 0.3s, box-shadow 0.3s; height: 100%; }
.news-item-mobile:hover { transform: translateY(-4px); box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; }
.news-item-mobile .news-item-link { display: block; text-decoration: none; color: inherit; height: 100%; position: relative; }
.news-item-mobile .news-item-image { position: relative; width: 100%; height: 100%; min-height: 350px; overflow: hidden; }
.news-item-mobile .news-item-image::before { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); transition: 0.3s; z-index: 1; }
.news-item-mobile:hover .news-item-image::before { background-color: transparent; }
.news-item-mobile .news-item-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.news-item-mobile:hover .news-item-image img { transform: scale(1.05); }
.news-item-mobile .news-item-content { position: absolute; bottom: 0px; left: 0px; width: 94%; padding: 16px 20px; background: rgba(255, 255, 255, 0.83); color: rgb(17, 17, 17); z-index: 2; display: flex; flex-direction: column; gap: 1px; margin: 10px; border-radius: 8px; }
.news-item-mobile .news-date { color: rgb(17, 17, 17); font-size: 14px; }
.news-slider-mobile .swiper-pagination { position: relative; bottom: auto; top: auto; margin-top: 20px; text-align: center; z-index: 10; }
.news-grid-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 0px; align-items: stretch; }
.news-column-main { display: flex; flex-direction: column; height: 100%; }
.news-item-featured { position: relative; overflow: hidden; border: 1px solid rgb(204, 204, 204); height: 100%; min-height: 500px; }
.news-item-featured .news-item-link { display: block; height: 100%; text-decoration: none; color: inherit; }
.news-item-featured .news-item-image { position: relative; width: 100%; height: 100%; min-height: 500px; overflow: hidden; }
.news-item-featured .news-item-image::before { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); transition: 0.3s; z-index: 1; }
.news-item-featured:hover .news-item-image::before { background-color: transparent; }
.news-item-featured .news-item-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.news-item-featured:hover .news-item-image img { transform: scale(1.05); }
.news-item-featured .news-item-content { position: absolute; bottom: 0px; left: 0px; width: 100%; padding: 16px; background: rgba(255, 255, 255, 0.83); color: rgb(17, 17, 17); z-index: 2; border-top-left-radius: 8px; border-top-right-radius: 8px; }
.news-item-featured .news-date { color: rgb(17, 17, 17); font-size: 14px; margin-bottom: 8px; display: block; }
.news-column-sidebar { display: flex; flex-direction: column; gap: 0px; height: 100%; }
.news-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0px; align-items: stretch; }
.news-row:first-child { flex: 1 1 0%; min-height: 0px; }
.news-item-small { position: relative; overflow: hidden; border: 1px solid rgb(204, 204, 204); background: rgb(255, 255, 255); transition: transform 0.3s, box-shadow 0.3s; height: 100%; }
.news-item-small:hover { transform: translateY(-4px); box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; }
.news-item-small .news-item-link { display: block; text-decoration: none; color: inherit; height: 100%; position: relative; }
.news-item-small .news-item-image { position: relative; width: 100%; height: 100%; min-height: 200px; overflow: hidden; }
.news-item-small .news-item-image::before { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); transition: 0.3s; z-index: 1; }
.news-item-small:hover .news-item-image::before { background-color: transparent; }
.news-item-small .news-item-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.news-item-small:hover .news-item-image img { transform: scale(1.05); }
.news-item-small .news-item-content { position: absolute; bottom: 0px; left: 0px; width: 100%; padding: 16px; background: rgba(255, 255, 255, 0.83); color: rgb(17, 17, 17); z-index: 2; border-top-left-radius: 8px; border-top-right-radius: 8px; display: flex; flex-direction: column; gap: 6px; }
.news-item-small .news-date { color: rgb(17, 17, 17); font-size: 13px; margin-bottom: 4px; }
.news-item-full-width { grid-column: 1 / -1; }
.news-item-full-width .news-item-image { height: 300px; }
@media screen and (max-width: 1024px){.news-grid-layout { grid-template-columns: 1fr; gap: 32px; }}
@media screen and (max-width: 1024px){.news-item-featured { min-height: 400px; }}
@media screen and (max-width: 1024px){.news-item-featured .news-item-image { min-height: 400px; }}
@media screen and (max-width: 1024px){.news-row { grid-template-columns: 1fr; gap: 20px; }}
@media screen and (max-width: 1024px){.news-item-full-width { grid-column: 1; }}
@media screen and (max-width: 768px){.news-grid-layout { gap: 24px; }}
@media screen and (max-width: 768px){.overview-detail-major .title-common { display: block; }}
@media screen and (max-width: 768px){.news-item-featured { min-height: 300px; }}
@media screen and (max-width: 768px){.news-item-featured .news-item-image { min-height: 300px; }}
@media screen and (max-width: 768px){.news-item-featured .news-item-content { padding: 24px 16px; }}
@media screen and (max-width: 768px){.news-item-small .news-item-image { height: 180px; min-height: 180px; }}
@media screen and (max-width: 768px){.news-item-small .news-item-content { padding: 14px 16px; }}
.breadcrumb { display: flex; align-items: center; padding: 24px 0px; gap: 24px; }
.breadcrumb span { display: flex; align-items: center; }
.breadcrumb span:first-child { width: 24px; height: 24px; flex-shrink: 0; }
.breadcrumb p { font-size: 16px; font-weight: 400; color: rgb(9, 9, 11); }
.title-common { display: flex; justify-content: center; align-items: flex-end; gap: 12px; }
.title-common h2 { font-size: 44px; font-weight: 700; flex-shrink: 0; max-width: 100%; }
.title-common h2 strong { color: var(--cl-primary); font-weight: 700; }
.title-common-decor-right, .title-common-decor-left { flex: 1 1 0%; display: flex; align-items: center; gap: 8px; position: relative; }
.title-common-decor-right img, .title-common-decor-left img { max-width: 160px; }
.title-common-decor-left img { transform: rotateY(180deg); }
.title-common-decor-right::before { content: ""; position: relative; width: 100%; height: 1px; background-color: rgb(204, 204, 204); display: block; }
.title-common-decor-left::after { content: ""; position: relative; width: 100%; height: 1px; background-color: rgb(204, 204, 204); display: block; }
.intro-title { font-size: 44px; font-weight: 700; position: relative; margin-bottom: 12px; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.intro-title span:nth-child(2) { flex-shrink: 0; color: rgb(30, 30, 30); }
.intro-title span strong { color: var(--cl-primary); font-weight: 700; }
.intro-title span:not(:nth-child(2)) { flex: 1 1 0%; max-width: 100%; width: 100%; display: flex; align-items: flex-end; }
.intro-title span:not(:nth-child(2)) img { width: 100%; }
.overview-train .intro-title { text-align: center; margin-bottom: 40px; }
.overview-train .intro-title strong { color: var(--cl-primary); }
.tab-5 .overview-train-tab { display: grid; grid-template-columns: repeat(5, 1fr); padding-right: 20px; }
.tab-5 .overview-train-tab-item, .tab-6 .overview-train-tab-item { padding: 5px 10px 10px 50px; }
.tab-5 .overview-train-tab-item::before, .tab-6 .overview-train-tab-item::before { transform: scaleX(1.14) translateX(12px) scaleY(1.4); }
.tab-5 .overview-train-tab-item.active::before, .tab-6 .overview-train-tab-item.active::before { transform: scaleX(1.14) translateX(12px) scaleY(1.45); }
.tab-5 .overview-train-tab-item p, .tab-6 .overview-train-tab-item p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.overview-train-tab { display: grid; grid-template-columns: repeat(4, 1fr); padding-right: 30px; }
.overview-train-tab-item { position: relative; padding: 10px 20px 10px 80px; display: flex; flex-direction: column; justify-content: center; font-size: 14px; min-height: 80px; cursor: default; }
.overview-train-tab-item::before { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-image: url("../../../../../../../../themes/fpt-university/assets/images/train-border-gray.svg"); background-repeat: no-repeat; background-size: 100% 100%; background-position: center center; transform: scaleX(1.09) translateX(12px); }
.overview-train-tab-item.active { z-index: 10 !important; }
.overview-train-tab-item.active::before { background-image: url("../../../../../../../../themes/fpt-university/assets/images/train-border-active.svg"); transform: scaleX(1.2) translateX(12px) translateY(-6px) scaleY(1.1); }
.overview-train-tab-item:nth-child(1) { z-index: 4; }
.overview-train-tab-item:nth-child(2) { z-index: 3; }
.overview-train-tab-item:nth-child(3) { z-index: 2; }
.overview-train-tab-item:nth-child(4) { z-index: 1; }
.overview-train-tab-item.active > div span { background-color: var(--cl-primary); }
.overview-train-tab-item.active h3 { color: rgb(0, 0, 0); }
.overview-train-content { padding-right: 30px; }
.overview-train-tab-item * { z-index: 1; }
.overview-train-tab-item > div { display: flex; align-items: center; gap: 8px; }
.overview-train-tab-item > div span { background-color: rgb(36, 36, 36); border-radius: 2px; color: rgb(255, 255, 255); text-transform: uppercase; padding: 1px 8px; font-weight: 600; }
.overview-train-tab-item > div p { color: rgb(112, 112, 112); }
.overview-train-tab-item h3 { color: rgb(112, 112, 112); font-weight: 700; font-size: 14px; padding: 2px 0px; line-height: 1.4; }
.train-content-tab { padding: 32px; box-shadow: rgba(0, 0, 0, 0.06) 0px 4px 20px 0px; background-color: rgb(255, 255, 255); display: none; }
.train-content-tab.active { display: block; }
.train-content-top { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 32px; }
.train-content-top-item > div { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.train-content-top-item > div > span { width: 24px; height: 24px; flex-shrink: 0; }
.train-content-top-item > div > h4 { font-size: 18px; font-weight: 700; }
.train-content-top-item ul { font-size: 16px; color: rgb(117, 117, 117); padding-left: 12px; list-style: inside disc; }
.train-content-note { display: flex; align-items: center; gap: 8px; background-color: rgb(255, 249, 246); padding: 12px; }
.train-content-note span { display: flex; align-items: center; gap: 12px; color: rgb(0, 0, 0); white-space: nowrap; }
.train-content-note span strong { font-size: 18px; line-height: 1; display: inline-block; white-space: nowrap !important; }
.train-content-note p { color: rgb(117, 117, 117); line-height: 1; }
.major-detail-intro-wrapper { margin-top: 28px; max-width: 100%; }
.major-intro-card { position: relative; background: rgb(255, 255, 255); border-top: 1px solid rgba(243, 112, 33, 0.3); border-right: 1px solid rgba(243, 112, 33, 0.3); border-bottom: 1px solid rgba(243, 112, 33, 0.3); border-image: none; border-left: 3px solid var(--cl-primary); border-radius: 12px; padding: 20px 24px; box-shadow: rgba(0, 0, 0, 0.06) 0px 12px 28px; overflow: hidden; }
.major-intro-card::after { content: ""; position: absolute; right: 16px; bottom: 12px; width: 220px; height: 90px; background-image: repeating-linear-gradient(135deg, rgba(243, 112, 33, 0.18) 0px, rgba(243, 112, 33, 0.18) 2px, transparent 2px, transparent 8px); opacity: 0.6; pointer-events: none; }
.major-intro-description { color: rgb(112, 112, 112); font-size: 16px; line-height: 1.6; }
.major-intro-description p { color: rgb(112, 112, 112); font-weight: 400; line-height: 1.4; }
.major-intro-meta { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 14px; }
.major-intro-meta-item { display: flex; flex-direction: column; gap: 4px; min-width: 120px; }
.major-intro-meta-label { color: rgb(111, 111, 111); }
.major-intro-meta-value { font-weight: 700; color: var(--cl-primary); letter-spacing: 0.3px; }
.major-detail-intro-main { margin-top: 60px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.major-detail-intro-content div { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.major-detail-intro-content div p { color: rgb(112, 112, 112); font-weight: 400; line-height: 1.4; }
.major-detail-intro-img { position: relative; padding: 10px; }
.major-detail-intro-img img { border-radius: 8px; width: 100%; height: 100%; aspect-ratio: 4 / 3; }
.major-detail-intro-img::before { content: ""; position: absolute; top: -10px; left: -10px; background-image: url("../../../../../../../../themes/fpt-university/assets/images/major-detail-intro-decor-1.svg"); background-size: cover; background-position: center center; background-repeat: no-repeat; width: 80px; height: 150px; z-index: 1; }
.major-detail-intro-img::after { content: ""; position: absolute; bottom: -10px; right: -15px; background-image: url("../../../../../../../../themes/fpt-university/assets/images/major-detail-intro-decor-2.svg"); background-size: cover; background-position: center center; background-repeat: no-repeat; width: 130px; height: 160px; z-index: 1; }
@media (max-width: 768px){.major-detail-intro-wrapper { margin-top: 20px; }}
@media (max-width: 768px){.major-intro-card { padding: 16px; }}
@media (max-width: 768px){.major-intro-card::after { width: 140px; height: 60px; opacity: 0.4; }}
@media (max-width: 768px){.major-intro-meta { gap: 16px; }}
section.major-detail-feature { padding-top: 90px; background-color: rgb(250, 250, 250); position: relative; }
.major-detail-feature::before { position: absolute; top: 0px; left: 0px; content: ""; background-image: url("../../../../../../../../themes/fpt-university/assets/images/major-detail-feature-decor.svg"); background-size: contain; background-position: center top; background-repeat: no-repeat; width: 100%; height: 100%; z-index: 1; }
.major-detail-feature .container { z-index: 10; position: relative; }
.major-detail-feature-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 40px; margin-top: 40px; }
.major-detail-feature-list .feature-item { background-image: url("../../../../../../../../themes/fpt-university/assets/images/major-detail-feature-item-decor.png"); background-size: 99% 99%; background-position: center center; background-repeat: no-repeat; padding: 24px; border-radius: 8px; display: flex; flex-direction: column; }
.major-detail-feature-list .feature-item > span { width: 48px; height: 48px; margin-bottom: 24px; display: block; }
.major-detail-feature-list .feature-item > span img { width: 100%; object-fit: contain; }
.major-detail-feature-list .feature-item > div img { display: block; object-fit: contain; object-position: left center; max-height: 20px; margin-bottom: 8px; }
.major-detail-feature-list .feature-item > div h3 { font-size: 18px; font-weight: 700; color: rgb(36, 36, 36); margin-bottom: 8px; flex: 0 0 auto; }
.major-detail-feature-list .feature-item > div p { color: rgb(112, 112, 112); font-weight: 400; line-height: 1.4; }
.major-detail-career, .major-detail-train, .major-detail-explore { background-image: url("../../../../../../../../themes/fpt-university/assets/images/info-img.svg"); background-size: cover; background-position: center top; background-repeat: no-repeat; }
.major-detail-career-desc { color: rgb(61, 61, 61); margin-top: 12px; }
.career-item { font-size: 18px; font-weight: 700; color: rgb(36, 36, 36); display: flex; gap: 8px; line-height: 1.4; }
.career-item p { padding-bottom: 20px; border-bottom: 1px solid rgb(204, 204, 204); flex: 1 1 0%; }
.career-item::before { content: ""; background-image: url("../../../../../../../../themes/fpt-university/assets/images/major-detail-career-icon-list.svg"); background-size: 100% auto; background-position: center center; background-repeat: no-repeat; width: 16px; height: 16px; margin-top: 4px; flex-shrink: 0; }
.career-list-job { display: flex; flex-direction: column; gap: 20px; }
.career-left-list-job-bottom-btn { display: flex; align-items: center; gap: 12px; margin-left: 24px; padding-top: 30px; }
.career-list-swiper-btn.swiper-button-prev, .career-list-swiper-btn.swiper-button-next { position: static; border-radius: 50%; }
.career-left-list-job-bottom-btn div { width: 40px; height: 40px; border-radius: 50%; background-color: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 12px 0px; display: flex; align-items: center; justify-content: center; color: rgb(33, 33, 33); font-size: 20px; cursor: pointer; transition: 0.3s; }
.career-left-list-job-bottom-btn div:hover { background-color: var(--cl-primary); color: rgb(255, 255, 255); }
.career-img-svg-feature { display: flex; width: 100%; overflow: hidden; flex-wrap: nowrap; }
.career-img-svg-feature .frame-box { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }
.career-img-svg-feature .frame-box img { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; mask-image: url("../../../../../../../../themes/fpt-university/assets/images/frame_major_feature_2.png"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain; }
.career-img-svg-feature .frame-box::after { content: ""; position: absolute; inset: 0px; background: url("../../../../../../../../themes/fpt-university/assets/images/frame_major_feature.png") center center / contain no-repeat; pointer-events: none; }
.row-block { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; }
.career-col-md-6 { -webkit-box-flex: 0; max-width: 50%; flex: 0 0 auto; width: 50%; }
.major-detail-explore-list { margin-top: 60px; gap: 32px; display: grid !important; grid-template-columns: repeat(4, 1fr) !important; }
.major-detail-explore-item { border-radius: 8px; overflow: hidden; border: 1px solid rgb(204, 204, 204); }
.major-detail-explore-item-img img { aspect-ratio: 4 / 3; width: 100%; }
.major-detail-explore-item > div:last-child { padding: 16px 24px; display: flex; flex-direction: column; gap: 4px; background: rgb(255, 255, 255); }
.major-detail-explore-item > div:last-child h3 { font-size: 18px; font-weight: 700; color: rgb(36, 36, 36); margin-bottom: 4px; }
.major-detail-explore-item > div:last-child p { color: rgb(112, 112, 112); -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; }
.major-detail-explore-item > div:last-child a { display: flex; width: fit-content; min-width: 142px; gap: 10px; align-items: center; background-color: var(--cl-primary); padding: 8px 16px; border-radius: 8px; color: rgb(255, 255, 255); margin-top: 10px; min-height: 40px; }
.major-detail-explore h2 { text-align: center; }
.major-detail-explore-swiper { padding-bottom: 60px !important; }
@media (min-width: 1025px){.major-detail-explore-swiper .swiper-button-next, .major-detail-explore-swiper .swiper-button-prev { display: none !important; }}
.major-detail-explore-swiper .swiper-pagination, .overview-detail-share-swiper .swiper-pagination { position: static; margin-top: 16px; display: flex; justify-content: center; }
@media screen and (max-width: 1024px){.major-detail-explore-list { gap: 16px; display: flex !important; }}
@media screen and (max-width: 1024px){.major-detail-explore-item { width: 100%; }}
section.major-detail-explore { padding-bottom: 140px; padding-top: 16px; }
.overview-detail-intro-main { margin-top: 60px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.overview-detail-intro-content { display: flex; flex-direction: column; gap: 20px; }
.overview-detail-intro-content p { color: rgb(61, 61, 61); line-height: 1.6; }
.overview-detail-intro-main .future-video-decor { right: -15px; }
.overview-detail-intro-main .future-video { padding-right: 40px; }
.overview-detail-intro .title-common { justify-content: flex-start; }
.overview-detail-major { position: relative; }
.overview-detail-major h2 { text-align: center; }
.overview-detail-major::after { content: ""; position: absolute; bottom: -150px; right: 0px; background-image: url("../../../../../../../../themes/fpt-university/assets/images/overview-detail-major-decor.svg"); background-size: 100% auto; background-position: center center; background-repeat: no-repeat; width: 100%; height: 100%; max-width: 600px; max-height: 600px; }
.overview-detail-major .feature-item > div a { background-color: var(--cl-primary); color: rgb(255, 255, 255); padding: 8px 16px; border-radius: 8px; width: fit-content; min-height: 40px; align-items: center; font-weight: 600; visibility: hidden; opacity: 0; transform: translateY(20px); transition: 0.4s; margin-top: auto; display: flex; gap: 8px; margin-bottom: 20px; }
.overview-detail-major .feature-item:hover > div a { visibility: visible; opacity: 1; transform: translateY(0px); }
.overview-detail-major .feature-item > div a img { width: 14px; height: 14px; flex-shrink: 0; }
.overview-detail-major .feature-item > div p { -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; display: none; }
.overview-detail-major .feature-item { overflow: hidden; min-height: 292px; justify-content: space-between; }
.overview-detail-major .feature-item > div { transform: translateY(calc(100% - 155px)); transition: 0.3s; display: flex; flex-direction: column; flex: 1 1 0%; }
.overview-detail-train-item-top { display: flex; align-items: center; border: 1px solid rgb(217, 217, 217); padding: 16px 32px; position: relative; cursor: pointer; min-height: 62px; background: rgb(255, 255, 255); }
.overview-detail-train-item-top::before { content: ""; position: absolute; top: -20px; left: -21px; width: 40px; height: 40px; border-right: 1px solid rgb(217, 217, 217); background: rgb(255, 255, 255); transform: rotate(45deg); }
.overview-detail-train-item { position: relative; }
.overview-detail-train-item-top::after { content: ""; position: absolute; bottom: -20px; right: -21px; width: 40px; height: 40px; border-left: 1px solid rgb(217, 217, 217); background: rgb(255, 255, 255); transform: rotate(45deg); }
.ovevriew-detail-train-list { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 40px; }
.overview-detail-train-item-top h3 { flex: 1 1 0%; padding-left: 24px; border-left: 6px solid var(--cl-primary); font-size: 18px; font-weight: 700; line-height: 1.2; }
.overview-detail-train-item-top span i { font-size: 24px; color: var(--cl-primary); }
.overview-detail-train-item-top span i:last-child { display: none; }
.overview-detail-train-item-content { position: relative; width: calc(100% - 60px); margin: 0px auto; background: rgb(255, 255, 255); border-width: 0px 1px 1px; border-style: none solid solid; border-color: currentcolor rgb(217, 217, 217) rgb(217, 217, 217); border-image: none; backdrop-filter: blur(8px); box-shadow: rgba(0, 0, 0, 0.1) 2px 2px 12px 0px; color: rgb(112, 112, 112); line-height: 1.4; max-height: 0px; overflow: hidden; opacity: 0; padding: 0px 32px; transition: max-height 0.3s, opacity 0.3s, padding 0.3s; z-index: 10; }
.overview-detail-share { background: rgb(245, 245, 245); }
.overview-detail-share .title-common { justify-content: flex-start; }
.overview-detail-share-list { margin-top: 40px; }
.overview-detail-share-swiper:not(.swiper-initialized) .overview-detail-share-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.overview-detail-share-swiper.swiper { overflow: hidden; }
.overview-detail-share-swiper .swiper-wrapper { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; }
.overview-detail-share-item { display: flex; flex-direction: column; height: auto; transition: opacity 0.3s, transform 0.3s; }
.overview-detail-share-item > img { margin-bottom: 12px; object-fit: contain; min-height: 255px; max-height: 300px; }
.overview-detail-share-item-content > div { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.overview-detail-share-item-content > div h3 { font-size: 24px; font-weight: 700; }
.overview-detail-share-item-content > div span { background-color: var(--cl-primary); padding: 4px 8px; border-radius: 2px; color: rgb(255, 255, 255); text-transform: uppercase; font-size: 14px; font-weight: 600; }
.overview-detail-share-item-content > p { color: rgb(112, 112, 112); -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; margin-bottom: 8px; line-height: 1.4; }
.campus-news-btn { display: flex; align-items: center; gap: 16px; justify-content: center; padding: 12px 24px; border-radius: 8px; background-color: var(--cl-primary); color: rgb(255, 255, 255); width: fit-content; margin: 24px auto 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; cursor: pointer; font-family: inherit; font-size: 16px; }
.swiper-button-next, .swiper-button-prev { background: rgb(255, 255, 255); width: 40px !important; height: 40px !important; border-radius: 50% !important; flex-shrink: 0 !important; display: flex !important; }
.swiper-button-next::after, .swiper-button-prev::after { color: rgb(0, 0, 0); font-weight: 700; font-size: 16px !important; }
@media screen and (min-width: 1024px){.major-detail-explore-swiper { padding-top: 60px !important; padding-left: 40px !important; padding-right: 40px !important; }}
@media screen and (min-width: 1024px){.major-detail-explore-item:nth-child(1) { transform: rotate(-3deg) translateY(20px); }}
@media screen and (min-width: 1024px){.major-detail-explore-item:nth-child(2) { transform: rotate(1deg); }}
@media screen and (min-width: 1024px){.major-detail-explore-item:nth-child(3) { transform: rotate(-2deg) translateY(50px); }}
@media screen and (min-width: 1024px){.major-detail-explore-item:nth-child(4) { transform: rotate(3deg); }}
@media screen and (min-width: 1440px){section.major-detail-feature { padding-top: 140px; }}
@media screen and (max-width: 1280px){.overview-train-tab-item { padding-left: 60px; }}
@media screen and (max-width: 1023px){.overview-detail-banner h1 { font-size: 36px; }}
@media screen and (max-width: 1023px){.major-detail-feature-list { grid-template-columns: 1fr 1fr; }}
@media screen and (max-width: 1023px){.title-large-2, .local-top h2 { font-size: 36px; }}
@media screen and (max-width: 1023px){.future-video .intro-image { aspect-ratio: 4 / 3; max-height: 100%; }}
@media screen and (max-width: 1023px){.intro-title { font-size: 32px; }}
@media screen and (max-width: 1023px){.overview-tab, .admission-tab { display: flex; overflow: auto hidden; }}
@media screen and (max-width: 1023px){.overview-train-tab { min-width: 1000px; padding: 10px 0px; }}
@media screen and (max-width: 1023px){.overview-train-tab-item.active::before { transform: scaleX(1.1) translateX(12px) translateY(-3px) scaleY(1.1); }}
@media screen and (max-width: 1023px){.overview-train-tab-item * { font-size: 12px !important; }}
@media screen and (max-width: 1023px){.train-content-note { flex-wrap: wrap; }}
@media screen and (max-width: 1023px){.train-content-top-item * { font-size: 14px !important; }}
@media screen and (max-width: 1023px){.train-content-note * { font-size: 14px !important; }}
@media screen and (max-width: 1023px){.overview-train-tab-item::before { transform: scaleX(1.09) translateX(12px) scaleY(1.2); }}
@media screen and (max-width: 767px){.tab-5 .overview-train-tab { display: grid; grid-template-columns: repeat(5, 1fr); padding-right: 20px; padding-top: 10px; overflow-y: hidden; }}
@media screen and (max-width: 767px){.tab-5 .overview-train-tab-item, .tab-6 .overview-train-tab-item { padding: 5px 10px 10px 50px; margin-top: 10px; width: 15.625rem; }}
@media screen and (max-width: 767px){.tab-5 .overview-train-tab-item::before, .tab-6 .overview-train-tab-item::before { padding-top: 3px; }}
@media screen and (max-width: 767px){.tab-5 .overview-train-tab-item.active::before, .tab-6 .overview-train-tab-item.active::before { transform: scaleX(1.14) translateX(12px) scaleY(1.3); }}
@media screen and (max-width: 767px){.overview-detail-banner h1 { font-size: 18px; }}
@media screen and (max-width: 767px){.banner img { min-height: 125px; }}
@media screen and (max-width: 767px){.sm { display: flex !important; }}
@media screen and (max-width: 767px){.md { display: none !important; }}
@media screen and (max-width: 767px){section:not(.hero) { padding: 24px 0px; }}
@media screen and (max-width: 767px){.title-large-2, .local-top h2 { font-size: 24px; }}
@media screen and (max-width: 767px){.future-video-decor { right: -10px; }}
@media screen and (max-width: 767px){.news h2 { margin-bottom: 20px; }}
@media screen and (max-width: 767px){.overview-hero { display: flex; flex-direction: column-reverse; justify-content: flex-start; }}
@media screen and (max-width: 767px){.overview-hero .container { margin-left: 0px; }}
@media screen and (max-width: 767px){.breadcrumb { width: 100%; gap: 12px; padding: 12px 0px; }}
@media screen and (max-width: 767px){.breadcrumb span:first-child { width: 16px; height: 16px; }}
@media screen and (max-width: 767px){.breadcrumb p { font-size: 14px; }}
@media screen and (max-width: 767px){.intro-title { font-size: 24px; }}
@media screen and (max-width: 767px){.intro-title { gap: 4px; margin-bottom: 0px; text-align: left !important; }}
@media screen and (max-width: 767px){.intro-title span:first-child { display: none; }}
@media screen and (max-width: 767px){.train-content-top { grid-template-columns: 1fr; }}
@media screen and (max-width: 767px){.overview-train-content { padding-right: 0px; }}
@media screen and (max-width: 767px){.overview-train-tab-item * { font-size: 14px !important; }}
@media screen and (max-width: 767px){.overview-train-tab-item { padding-left: 45px; }}
@media screen and (max-width: 767px){.train-content-tab { padding: 32px 16px; }}
@media screen and (max-width: 767px){.news-slider { padding-bottom: 40px !important; }}
@media screen and (max-width: 767px){.future-btn { width: 100%; justify-content: center; }}
@media screen and (max-width: 767px){.major-detail-intro-main { display: flex; flex-direction: column-reverse; gap: 24px; margin-top: 24px; }}
@media screen and (max-width: 767px){.title-common h2 { flex-shrink: 1; font-size: 24px; }}
@media screen and (max-width: 767px){.title-common-decor-right img, .title-common-decor-left img { max-width: 50px; }}
@media screen and (max-width: 767px){.major-detail-intro-img { padding: 14px; }}
@media screen and (max-width: 767px){.major-detail-intro-img::before { left: 0px; top: 0px; width: 45px; height: 85px; }}
@media screen and (max-width: 767px){.major-detail-intro-img::after { right: 0px; bottom: 0px; width: 70px; height: 90px; }}
@media screen and (max-width: 767px){.major-detail-intro-content div p, .major-intro-description p, .major-intro-meta-item { font-size: 14px; }}
@media screen and (max-width: 767px){.breadcrumb { gap: 10px; }}
@media screen and (max-width: 767px){.breadcrumb p { -webkit-line-clamp: 1; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; white-space: normal; }}
@media screen and (max-width: 767px){.breadcrumb p:not(:nth-child(5)) { max-width: 120px; }}
@media screen and (max-width: 767px){.major-detail-feature-list { grid-template-columns: 1fr 1fr; gap: 16px; }}
@media screen and (max-width: 767px){.major-detail-feature-list .feature-item > div > img { display: none; }}
@media screen and (max-width: 767px){.major-detail-feature-list .feature-item > span { width: 32px; height: 32px; margin-bottom: 32px; flex: 1 1 0%; }}
@media screen and (max-width: 767px){.major-detail-feature-list .feature-item > div h3 { font-size: 14px; }}
@media screen and (max-width: 767px){.major-detail-feature-list .feature-item > div p { font-size: 12px; }}
@media screen and (max-width: 767px){.major-detail-feature-list .feature-item { padding: 12px; display: block; }}
@media screen and (max-width: 767px){.major-detail-feature::before { background-size: contain; }}
@media screen and (max-width: 767px){section.major-detail-feature { padding-top: 50px; }}
@media screen and (max-width: 767px){.career-item p { font-size: 14px; padding-bottom: 16px; }}
@media screen and (max-width: 767px){.major-detail-explore-list { margin-top: 20px; }}
@media screen and (max-width: 767px){.major-detail-explore-list { gap: 0px; display: flex !important; }}
@media screen and (max-width: 767px){.overview-detail-major .feature-item { min-height: 160px; }}
@media screen and (max-width: 767px){.overview-detail-major .feature-item > div a { background: transparent; min-height: auto; width: 24px; height: 24px; padding: 2px; }}
@media screen and (max-width: 767px){.overview-detail-major .feature-item > div a img { margin: 0px; }}
@media screen and (max-width: 767px){.overview-detail-major::after { display: none; }}
@media screen and (max-width: 767px){.major-detail-feature-list .feature-item { background-size: 97% 97%; }}
@media screen and (max-width: 767px){.major-detail-feature-list .feature-item > div p { display: -webkit-box; }}
@media screen and (max-width: 767px){.overview-detail-major .feature-item > div a span { display: none; }}
@media screen and (max-width: 767px){.overview-detail-major .feature-item > div { transform: translateY(0px); }}
@media screen and (max-width: 767px){.overview-detail-intro-main { display: flex; flex-direction: column-reverse; gap: 20px; margin-top: 20px; }}
@media screen and (max-width: 767px){.overview-detail-major .feature-item > div h3 { font-size: 12px; }}
@media screen and (max-width: 767px){.ovevriew-detail-train-list { grid-template-columns: 1fr; gap: 12px; }}
@media screen and (max-width: 767px){.overview-detail-intro .title-common-decor-right img { max-width: 80px; }}
@media screen and (max-width: 767px){.overview-detail-intro-main .future-video { padding: 20px 30px 0px 0px; }}
@media screen and (max-width: 767px){.overview-detail-intro-main .future-video-decor { top: 0px; right: 0px; }}
@media screen and (max-width: 767px){.future-video .intro-image { aspect-ratio: 16 / 9; }}
@media screen and (max-width: 767px){.overview-detail-major h2 { text-align: left; }}
@media screen and (max-width: 767px){.overview-detail-train-item-top h3 { font-size: 14px; padding-left: 10px; border-width: 3px; }}
@media screen and (max-width: 767px){.overview-detail-train-item-top { padding: 20px; }}
@media screen and (max-width: 767px){.overview-detail-train-item-top::before { width: 25px; height: 25px; top: -13px; left: -16px; }}
@media screen and (max-width: 767px){.overview-detail-train-item-top::after { width: 25px; height: 25px; bottom: -13px; right: -16px; }}
@media screen and (max-width: 767px){.overview-detail-train-item-top span i { font-size: 20px; }}
@media screen and (max-width: 767px){.overview-detail-train-item-content { position: static; opacity: 1; visibility: visible; display: none; transform: none; width: calc(100% - 16px); padding: 12px; font-size: 14px; }}
@media screen and (max-width: 767px){.overview-detail-train-item.active .overview-detail-train-item-content, .overview-detail-train-item:first-child { display: block; }}
@media screen and (max-width: 767px){.overview-detail-share-swiper { overflow: hidden; padding-bottom: 40px !important; }}
@media screen and (max-width: 767px){.overview-detail-share-list.swiper-wrapper { gap: 0px; display: flex !important; }}
@media screen and (max-width: 767px){.overview-detail-share-item.swiper-slide { flex-shrink: 0; min-width: 100%; width: 100% !important; }}
@media screen and (max-width: 767px){.ovevriew-detail-train-list { overflow: hidden; }}
.title-common-decor-left, .title-common-decor-right { flex: 1 1 0%; display: flex; align-items: center; }
.title-common-decor-left { justify-content: flex-end; }
.title-common-decor-right { justify-content: flex-start; }
.title-common-decor-left img, .title-common-decor-right img { max-width: 100%; height: auto; }
@media screen and (max-width: 767px){.career-col-md-6 { flex: 0 0 auto; width: 100%; max-width: 100%; }}
@media screen and (max-width: 767px){.career-img-svg-feature { width: 100%; margin-bottom: 20px; margin-top: 20px; }}
@media screen and (max-width: 767px){.career-img-svg-feature img { width: 100%; }}
@media screen and (max-width: 767px){.career-img-svg-feature::before { background-image: url("../../../../../../../../themes/fpt-university/assets/images/frame_major_feature.png"); }}
@media screen and (max-width: 767px){.title-common-decor-left img, .title-common-decor-right img { max-width: 80px; }}
@media screen and (max-width: 374px){.title-common-decor-left img, .title-common-decor-right img { max-width: 60px; }}
@media screen and (max-width: 767px){.overview-detail-banner h1 { position: absolute; top: 50%; transform: translate(-50%, -50%); left: 50%; max-width: 1252px; width: 100%; padding-left: 15px; padding-right: 15px; color: var(--cl-primary); font-size: 54px; font-weight: 700; }}
@media screen and (max-width: 1023px){.title-common-decor-right { width: 100%; }}
.campus-news-footer { display: flex; justify-content: center; align-items: center; }
.campus-news-btn { display: inline-flex; align-items: center; gap: 12px; padding: 14px 36px; background-color: var(--cl-primary); color: rgb(255, 255, 255); font-weight: 700; font-size: 16px; border-radius: 8px; text-decoration: none; transition: 0.3s; box-shadow: rgba(255, 106, 0, 0.25) 0px 4px 16px; }
.campus-news-btn:hover { background-color: rgb(216, 95, 26); transform: translateY(-3px); box-shadow: rgba(255, 106, 0, 0.4) 0px 8px 24px; gap: 16px; }
.campus-news-btn img { width: 20px; height: 20px; transition: transform 0.3s; }
.campus-news-btn:hover img { transform: translateX(4px); }
@media screen and (max-width: 768px){.campus-news-btn { width: 100%; justify-content: center; padding: 12px 24px; font-size: 14px; }}
@media screen and (max-width: 768px){.campus-news-btn img { width: 16px; height: 16px; }}
.swiper { margin-left: auto; margin-right: auto; position: relative; overflow: clip; list-style: none; padding: 0px; z-index: 1; display: block; }
.swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; transition-timing-function: var(--swiper-wrapper-transition-timing-function,initial); box-sizing: content-box; }
.swiper-android .swiper-slide, .swiper-ios .swiper-slide, .swiper-wrapper { transform: translate3d(0px, 0px, 0px); }
.swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; display: block; }
.swiper-button-next, .swiper-button-prev { position: absolute; top: var(--swiper-navigation-top-offset,50%); width: calc(var(--swiper-navigation-size)/ 44 * 27); height: var(--swiper-navigation-size); margin-top: calc(0px - (var(--swiper-navigation-size)/ 2)); z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--swiper-navigation-color,var(--swiper-theme-color)); }
.swiper-button-prev, .swiper-rtl .swiper-button-next { left: var(--swiper-navigation-sides-offset,10px); right: auto; }
.swiper-button-next, .swiper-rtl .swiper-button-prev { right: var(--swiper-navigation-sides-offset,10px); left: auto; }
.swiper-button-next::after, .swiper-button-prev::after { font-family: swiper-icons; font-size: var(--swiper-navigation-size); letter-spacing: 0px; font-variant: initial; line-height: 1; text-transform: none !important; }
.swiper-button-prev::after, .swiper-rtl .swiper-button-next::after { content: "prev"; }
.swiper-button-next::after, .swiper-rtl .swiper-button-prev::after { content: "next"; }
.swiper-pagination { position: absolute; text-align: center; transition: opacity 0.3s; transform: translate3d(0px, 0px, 0px); z-index: 10; }
@media (max-width: 767px){.overview-hero .breadcrumb { display: none; }}