body, p, span, a, input, textarea, button, h1, h2, h3, h4, h5, h6 { font-family: var(--dci-font) !important; } p.has-text-align-justify, div.has-text-align-justify, .has-text-align-justify, [style*="text-align: justify"], [style*="text-align:justify"] { text-align: justify !important; text-justify: inter-word !important; } #wpadminbar #wp-admin-bar-et-builder-shortcode-framework { display: none !important; } #main-footer { display: none !important; } #top-header, #main-header { background-color: #ffffff !important; } .dci-hotline-badge { display: inline-block; color: var(--dci-navy) !important; font-weight: 700; font-size: 16px; margin-left: 20px; } .dci-hero-banner-section { background-image: linear-gradient(135deg, rgba(var(--dci-navy-rgb), 0.70) 0%, rgba(var(--dci-navy-rgb), 0.50) 50%, rgba(10, 14, 90, 0.85) 100%), url('https://demo.dci.edu.vn/wp-content/plugins/dci-customization/assets/images/dci-header-banner.webp') !important; background-size: cover !important; background-position: center center !important; background-color: var(--dci-navy) !important; padding: 140px 0 120px 0 !important; position: relative !important; } .dci-heading-section, .dci-page-heading-section, body:not(.home):not(.dci-trang-chu) .et_pb_section_0:first-of-type { background-image: linear-gradient(135deg, rgba(var(--dci-navy-rgb), 0.88) 0%, rgba(var(--dci-blue-rgb), 0.82) 100%), url('https://demo.dci.edu.vn/wp-content/plugins/dci-customization/assets/images/dci-header-banner.webp') !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; background-color: var(--dci-navy) !important; position: relative !important; box-shadow: inset 0 -15px 30px rgba(0, 0, 0, 0.2) !important; overflow: hidden !important; } .dci-heading-section::before, .dci-page-heading-section::before, body:not(.home):not(.dci-trang-chu) .et_pb_section_0:first-of-type::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 85% 40%, rgba(var(--dci-sky-rgb), 0.22) 0%, transparent 60%); pointer-events: none; z-index: 1; } .dci-heading-section .et_pb_row, .dci-page-heading-section .et_pb_row, body:not(.home):not(.dci-trang-chu) .et_pb_section_0:first-of-type .et_pb_row { position: relative; z-index: 2; } .dci-heading-section h1, .dci-page-heading-section h1, body:not(.home):not(.dci-trang-chu) .et_pb_section_0:first-of-type h1 { color: #ffffff !important; text-shadow: 0 3px 15px rgba(0, 0, 0, 0.5) !important; letter-spacing: 0.5px !important; } .dci-heading-section p, .dci-page-heading-section p, body:not(.home):not(.dci-trang-chu) .et_pb_section_0:first-of-type p { text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important; } .dci-featured-bar-section { position: relative !important; z-index: 99 !important; padding: 0 !important; background: transparent !important; } .dci-featured-bar-row { max-width: 1240px !important; margin: 0 auto !important; margin-top: -80px !important; padding: 0 !important; display: flex !important; flex-wrap: wrap !important; box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important; } .dci-featured-bar-row > .et_pb_column { padding: 0 !important; margin: 0 !important; flex: 1 1 20% !important; max-width: 20% !important; } @media (max-width: 991px) { .dci-featured-bar-row { margin-top: 0 !important; } .dci-featured-bar-row > .et_pb_column { flex: 1 1 100% !important; max-width: 100% !important; } } .dci-featured-card { height: 100% !important; min-height: 380px !important; margin: 0 !important; border-radius: 0 !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; align-items: center !important; text-align: center !important; padding: 40px 20px !important; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important; } .dci-featured-card:hover { filter: brightness(1.1) saturate(1.2) !important; transform: translateY(-8px) scale(1.02) !important; z-index: 2 !important; box-shadow: 0 15px 30px rgba(0,0,0,0.2) !important; } .dci-bg-blue { background-color: #626ce1 !important; } .dci-bg-cyan { background-color: var(--dci-sky) !important; } .dci-bg-lblue { background-color: #2098df !important; } .dci-bg-navy { background-color: var(--dci-navy) !important; } .dci-bg-green { background-color: #415eb3 !important; } .dci-intro-section { position: relative !important; overflow: hidden !important; padding: 80px 0 !important; } .dci-intro-section::after { content: ""; position: absolute; right: 5%; top: 10%; height: 80%; width: 35%; background-image: url('https://demo.dci.edu.vn/wp-content/uploads/dci-assets/shape2.png'); background-repeat: no-repeat; background-position: right center; background-size: contain; z-index: 0; pointer-events: none; opacity: 0.6; animation: dci-floating-shape 5s ease-in-out infinite alternate; } @keyframes dci-floating-shape { 0% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(20px) rotate(2deg); } 100% { transform: translateY(0px) rotate(0deg); } } .dci-stats-section { background-color: var(--dci-nen) !important; padding: 60px 0 !important; } .dci-stat-box { text-align: center !important; padding: 20px 10px !important; transition: transform 0.3s ease !important; } .dci-stat-box:hover { transform: translateY(-5px) !important; } .dci-stat-number { color: var(--dci-nhan) !important; font-size: 48px !important; font-weight: 700 !important; line-height: 1.1em !important; margin-bottom: 8px !important; font-family: var(--dci-font) !important; } .dci-stat-title { color: var(--dci-navy) !important; font-size: 15px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; font-family: var(--dci-font) !important; } .dci-sky-banner-section { background-image: url('https://demo.dci.edu.vn/wp-content/uploads/dci-assets/home_banner-02-scaled.jpg') !important; background-size: cover !important; background-position: center !important; background-color: var(--dci-navy) !important; padding: 90px 0 !important; text-align: center !important; position: relative !important; } .dci-sky-subtitle-wrap { display: flex; align-items: center; justify-content: center; margin-bottom: 12px; } .dci-sky-subtitle { display: inline-flex; align-items: center; justify-content: center; gap: 15px; color: rgba(255, 255, 255, 0.85) !important; font-size: 15px !important; font-weight: 500 !important; text-transform: uppercase !important; letter-spacing: 3px !important; } .dci-sky-subtitle::before, .dci-sky-subtitle::after { content: ""; display: inline-block; width: 45px; height: 1px; background: rgba(255, 255, 255, 0.5); } .dci-sky-title { color: #ffffff !important; font-size: 32px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; margin-bottom: 45px !important; line-height: 1.3em !important; } .dci-sky-item { text-align: center !important; padding: 15px 10px !important; transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important; } .dci-sky-item:hover { transform: translateY(-8px) !important; } .dci-sky-item img { width: 85px !important; max-width: 85px !important; height: auto !important; display: block !important; margin: 0 auto 18px auto !important; transition: transform 0.4s ease !important; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.15)); } .dci-sky-item:hover img { transform: scale(1.1) !important; } .dci-sky-item h4 { color: #ffffff !important; font-size: 18px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; margin: 0 !important; } .dci-courses-section .et_pb_blurb { transition: transform 0.35s ease, box-shadow 0.35s ease !important; } .dci-courses-section .et_pb_blurb:hover { transform: translateY(-8px) !important; box-shadow: 0 15px 35px rgba(var(--dci-navy-rgb), 0.12) !important; } .dci-courses-section .et_pb_blurb .et_pb_main_blurb_image img { transition: transform 0.4s ease !important; } .dci-courses-section .et_pb_blurb:hover .et_pb_main_blurb_image img { transform: scale(1.03) !important; } .dci-teachers-section { padding: 80px 0 !important; position: relative !important; overflow: hidden !important; } .dci-teachers-section::after { content: ""; position: absolute; right: 0; top: 20%; height: 70%; width: 30%; background-image: url('https://demo.dci.edu.vn/wp-content/uploads/dci-assets/shape.png'); background-repeat: no-repeat; background-size: contain; background-position: right center; z-index: 0; pointer-events: none; opacity: 0.5; animation: dci-teachers-shape 6s ease-in-out infinite alternate; } @keyframes dci-teachers-shape { 0% { transform: translateY(0) translateX(0); } 50% { transform: translateY(15px) translateX(-10px); } 100% { transform: translateY(0) translateX(0); } } .dci-teachers-section .et_pb_row { display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; position: relative !important; z-index: 1 !important; } .dci-teachers-section .et_pb_column { display: flex !important; flex-direction: column !important; padding: 0 !important; box-sizing: border-box !important; } .dci-instructor-card { background: #ffffff !important; border-radius: 0 !important; box-shadow: 0 5px 20px rgba(204, 204, 204, 0.25) !important; transition: all 0.35s cubic-bezier(0.46, 0.03, 0.52, 0.96) !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; width: 100% !important; overflow: hidden !important; margin-bottom: 30px !important; } .dci-instructor-card:hover { transform: translateY(-8px) !important; box-shadow: 0 15px 35px rgba(var(--dci-navy-rgb), 0.15) !important; } .dci-instructor-img { width: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; display: block !important; background: var(--dci-nen) !important; } .dci-instructor-img img { width: 100% !important; height: auto !important; display: block !important; margin: 0 !important; border-radius: 0 !important; transition: transform 0.5s ease !important; } .dci-instructor-card:hover .dci-instructor-img img { transform: scale(1.04) !important; } .dci-instructor-info { padding: 22px 15px !important; background: #ffffff !important; text-align: center !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: center !important; min-height: 145px !important; flex: 1 1 auto !important; box-sizing: border-box !important; } .dci-instructor-name { color: var(--dci-navy) !important; font-size: 18px !important; font-weight: 700 !important; margin: 0 0 6px 0 !important; line-height: 1.3em !important; text-align: center !important; } .dci-instructor-position { color: var(--dci-nhan) !important; font-size: 14px !important; font-weight: 600 !important; display: block !important; margin: 0 0 8px 0 !important; line-height: 1.4em !important; text-align: center !important; } .dci-instructor-desc { color: var(--dci-chu-phu) !important; font-size: 13px !important; line-height: 1.5em !important; margin: 0 !important; text-align: center !important; } .dci-testimonials-section { padding: 60px 0 40px 0 !important; background-color: #ffffff !important; } .dci-testimonials-section .et_pb_row { display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; } .dci-testimonials-section .et_pb_column { display: flex !important; flex-direction: column !important; padding: 0 !important; box-sizing: border-box !important; } .dci-testimonial-card { background: #ffffff !important; border-radius: 0 !important; box-shadow: 0 5px 15px rgba(204, 204, 204, 0.25) !important; transition: transform 0.35s ease, box-shadow 0.35s ease !important; margin-bottom: 30px !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; width: 100% !important; box-sizing: border-box !important; overflow: hidden !important; } .dci-testimonial-card:hover { transform: translateY(-8px) !important; box-shadow: 0 15px 30px rgba(var(--dci-navy-rgb), 0.15) !important; } .dci-testimonial-body { padding: 25px 20px 20px 20px !important; flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; min-height: 140px !important; } .dci-testimonial-author { color: var(--dci-navy) !important; font-size: 16px !important; font-weight: 700 !important; text-transform: uppercase !important; margin: 0 0 12px 0 !important; line-height: 1.3em !important; } .dci-testimonial-text { color: var(--dci-chu-phu) !important; font-size: 14px !important; line-height: 1.6em !important; margin: 0 !important; } .dci-testimonial-img { width: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; display: block !important; } .dci-testimonial-img img { width: 100% !important; height: auto !important; display: block !important; margin: 0 !important; border-radius: 0 !important; transition: transform 0.5s ease !important; } .dci-testimonial-card:hover .dci-testimonial-img img { transform: scale(1.04) !important; } .dci-testimonial-footer { padding: 15px 20px !important; background: #ffffff !important; border-top: 1px solid #f0f0f0 !important; text-align: left !important; } .dci-testimonial-link { color: var(--dci-chu-phu) !important; font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; text-decoration: none !important; transition: color 0.3s ease !important; } .dci-testimonial-link:hover { color: var(--dci-sky) !important; } .et_pb_button { transition: all 0.3s ease !important; } .et_pb_button:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 15px rgba(0,0,0,0.15) !important; } .dci-modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); z-index: 999999; align-items: center; justify-content: center; padding: 20px; } .dci-modal-overlay.active { display: flex; } .dci-modal-content { background: #ffffff; width: 100%; max-width: 900px; max-height: 90vh; overflow-y: auto; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.3); position: relative; display: flex; flex-wrap: wrap; } .dci-modal-close { position: absolute; top: 15px; right: 20px; font-size: 24px; background: none; border: none; cursor: pointer; color: #333; z-index: 10; } .dci-modal-info { flex: 1 1 45%; background: var(--dci-navy); color: #ffffff; padding: 35px 25px; border-top-left-radius: 12px; border-bottom-left-radius: 12px; } .dci-modal-info h3 { color: #ffffff; font-size: 22px; font-weight: 700; margin-bottom: 20px; } .dci-modal-info p { color: rgba(255,255,255,0.85); font-size: 14px; margin-bottom: 15px; } .dci-modal-info a { color: var(--dci-sky); text-decoration: none; } .dci-modal-form { flex: 1 1 55%; padding: 35px 30px; background: #ffffff; } .dci-modal-form h2 { color: var(--dci-navy); font-size: 24px; font-weight: 700; margin-bottom: 20px; } .dci-form-group { margin-bottom: 18px; } .dci-form-group label { display: block; font-size: 14px; font-weight: 600; color: #333; margin-bottom: 6px; } .dci-form-control { width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; box-sizing: border-box; } .dci-form-control:focus { border-color: var(--dci-navy); outline: none; } .dci-btn-submit { background: var(--dci-cta); color: #ffffff; border: none; padding: 14px 30px; font-size: 16px; font-weight: 700; border-radius: 6px; cursor: pointer; width: 100%; transition: background 0.3s; } .dci-btn-submit:hover { background: var(--dci-cta-hover); } .dci-alert-success { padding: 12px; background: #d4edda; color: #155724; border-radius: 6px; margin-bottom: 15px; display: none; } @media (max-width: 768px) { .dci-modal-info, .dci-modal-form { flex: 0 0 100%; border-radius: 0; } }