.dci-events-wrapper { background-color: var(--dci-nen); padding-bottom: 80px; font-family: var(--dci-font) ; } .dci-events-header { 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; color: #ffffff; padding: 85px 20px 65px 20px; text-align: center; position: relative; } .dci-events-header::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 25px; background: var(--dci-nen); border-top-left-radius: 30px; border-top-right-radius: 30px; } .dci-events-header-inner { max-width: 860px; margin: 0 auto; } .dci-badge-pill { display: inline-flex; align-items: center; gap: 8px; background: rgba(var(--dci-sky-rgb), 0.2); color: var(--dci-sky); border: 1px solid var(--dci-sky); padding: 6px 18px; border-radius: 30px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 18px; } .dci-events-main-title { color: #ffffff !important; font-size: 36px; font-weight: 800; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.5px; } .dci-events-subtitle { color: rgba(255, 255, 255, 0.85); font-size: 16px; line-height: 1.6; } .dci-events-container { max-width: 1240px; margin: 0 auto; padding: 0 20px; } .dci-events-filter-bar { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-bottom: 40px; } .dci-filter-btn { background: #ffffff; color: var(--dci-navy); border: 1px solid var(--dci-vien); padding: 10px 24px; border-radius: 25px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 6px rgba(0,0,0,0.04); } .dci-filter-btn:hover, .dci-filter-btn.active { background: var(--dci-navy); color: #ffffff; border-color: var(--dci-navy); box-shadow: 0 6px 15px rgba(var(--dci-navy-rgb), 0.2); transform: translateY(-2px); } .dci-events-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 30px; } .dci-event-card { background: #ffffff; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06); display: flex; flex-direction: column; justify-content: space-between; transition: all 0.35s ease; border: 1px solid #f0f3f8; } .dci-event-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(var(--dci-navy-rgb), 0.15); border-color: var(--dci-sky); } .dci-event-card-header { position: relative; height: 210px; overflow: hidden; background: var(--dci-navy); } .dci-event-thumb { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .dci-event-card:hover .dci-event-thumb { transform: scale(1.06); } .dci-event-badge { position: absolute; top: 14px; left: 14px; background: var(--dci-cta); color: #ffffff; font-size: 11px; font-weight: 700; text-transform: uppercase; padding: 5px 12px; border-radius: 20px; letter-spacing: 0.5px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); } .dci-event-seats-tag { position: absolute; bottom: 14px; right: 14px; background: rgba(0, 0, 0, 0.75); color: #ffb703; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 6px; backdrop-filter: blur(4px); } .dci-event-card-body { padding: 24px 22px; flex: 1 1 auto; display: flex; flex-direction: column; } .dci-event-date-row { color: var(--dci-blue); font-size: 13px; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; text-transform: uppercase; } .dci-event-title { font-size: 19px; font-weight: 700; color: var(--dci-navy); margin: 0 0 10px 0; line-height: 1.35; } .dci-event-title a { color: var(--dci-navy); text-decoration: none; transition: color 0.3s; } .dci-event-title a:hover { color: var(--dci-blue); } .dci-event-excerpt { font-size: 13.5px; color: #555; line-height: 1.55; margin-bottom: 16px; } .dci-event-meta-list { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--dci-nen); } .dci-meta-item { font-size: 13px; color: #4b5563; margin-bottom: 7px; display: flex; align-items: flex-start; gap: 10px; line-height: 1.4; } .dci-meta-item i { color: var(--dci-nhan); margin-top: 2px; width: 14px; text-align: center; } .dci-event-card-footer { padding: 16px 22px 22px 22px; background: #ffffff; border-top: 1px dashed var(--dci-vien); display: flex; flex-direction: column; align-items: stretch; gap: 14px; } .dci-event-price-box { display: flex; flex-direction: column; } .dci-price-label { font-size: 11px; color: var(--dci-chu-phu); text-transform: uppercase; font-weight: 600; } .dci-price-val { font-size: 18px; font-weight: 800; color: var(--dci-nhan); } .dci-price-val del { font-size: 12px; color: var(--dci-chu-mo); font-weight: 400; margin-right: 4px; } .dci-price-val ins { text-decoration: none; } .dci-event-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .dci-event-actions > a:only-child { grid-column: 1 / -1; } .dci-event-actions a { justify-content: center; white-space: nowrap; text-align: center; box-sizing: border-box; } .dci-events-wrapper p, .dci-event-card p, .dci-event-card .dci-event-excerpt, body:not(.home) .et_pb_section_0:first-of-type .dci-events-wrapper p { text-shadow: none !important; } .dci-btn-detail { background: var(--dci-nen); color: var(--dci-navy); padding: 12px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; text-decoration: none; transition: all 0.3s; display: inline-flex; align-items: center; gap: 5px; } .dci-btn-detail:hover { background: var(--dci-vien); color: var(--dci-navy); } .dci-btn-buynow { background: var(--dci-cta); color: #ffffff !important; padding: 12px 14px; border-radius: 6px; font-size: 13px; font-weight: 700; text-decoration: none; transition: all 0.3s; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 4px 12px rgba(var(--dci-cta-rgb), 0.3); } .dci-btn-buynow:hover { background: var(--dci-cta-hover); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(var(--dci-cta-rgb), 0.4); } form.woocommerce-checkout { font-family: var(--dci-font) !important; } body.woocommerce-checkout #main-content > .container { padding-bottom: 80px; } .dci-checkout-header-banner { max-width: 1200px; margin: 20px auto 35px auto; padding: 20px 25px; background: #ffffff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.04); border: 1px solid var(--dci-vien); } .dci-checkout-steps { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; } .dci-step { display: flex; align-items: center; gap: 10px; color: var(--dci-chu-mo); font-size: 14px; font-weight: 600; } .dci-step.active { color: var(--dci-navy); } .dci-step.active.current { color: var(--dci-nhan); } .dci-step-num { width: 28px; height: 28px; border-radius: 50%; background: var(--dci-vien); color: var(--dci-chu-phu); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; } .dci-step.active .dci-step-num { background: var(--dci-sky); color: #ffffff; } .dci-step.active.current .dci-step-num { background: var(--dci-cta); color: #ffffff; box-shadow: 0 0 0 4px rgba(var(--dci-cta-rgb), 0.2); } .dci-step-arrow { color: var(--dci-vien); font-size: 12px; } form.woocommerce-checkout { display: grid !important; grid-template-columns: 1.35fr 1fr !important; gap: 32px !important; align-items: start !important; max-width: 1200px !important; margin: 0 auto !important; padding: 0 !important; box-sizing: border-box !important; } #customer_details { grid-column: 1 / 2 !important; width: 100% !important; max-width: 100% !important; float: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 24px !important; } #customer_details .col-1, #customer_details .col-2 { width: 100% !important; max-width: 100% !important; float: none !important; margin: 0 !important; padding: 0 !important; display: block !important; } .woocommerce-checkout .woocommerce-billing-fields, .woocommerce-checkout .woocommerce-additional-fields { background: #ffffff !important; border-radius: 12px !important; padding: 28px !important; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05) !important; border: 1px solid var(--dci-vien) !important; margin: 0 !important; } .woocommerce-billing-fields h3, .woocommerce-additional-fields h3 { color: var(--dci-navy) !important; font-size: 18px !important; font-weight: 700 !important; margin-top: 0 !important; margin-bottom: 20px !important; padding-bottom: 12px !important; border-bottom: 2px solid var(--dci-sky) !important; display: flex !important; align-items: center !important; gap: 10px !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; } .woocommerce-checkout .form-row { margin-bottom: 16px !important; padding: 0 !important; width: 100% !important; float: none !important; } .woocommerce-checkout .form-row label { font-size: 13.5px !important; font-weight: 600 !important; color: var(--dci-chu) !important; margin-bottom: 6px !important; display: block !important; } .woocommerce-checkout .input-text, .woocommerce-checkout select, .woocommerce-checkout textarea { width: 100% !important; padding: 12px 16px !important; border: 1.5px solid #d1d5db !important; border-radius: 8px !important; font-size: 14px !important; transition: all 0.3s !important; background: #ffffff !important; box-sizing: border-box !important; } .woocommerce-checkout .input-text:focus, .woocommerce-checkout textarea:focus { border-color: var(--dci-navy) !important; box-shadow: 0 0 0 3px rgba(var(--dci-navy-rgb), 0.1) !important; outline: none !important; } .dci-hidden-field { display: none !important; } #order_review_heading { display: none !important; } #order_review { grid-column: 2 / 3 !important; width: 100% !important; max-width: 100% !important; float: none !important; margin: 0 !important; background: #ffffff !important; border-radius: 12px !important; padding: 28px !important; box-shadow: 0 10px 30px rgba(var(--dci-navy-rgb), 0.08) !important; border: 1px solid var(--dci-vien) !important; position: sticky !important; top: 25px !important; } #order_review::before { content: "Khóa học đã chọn & Thanh toán" !important; display: block !important; color: var(--dci-navy) !important; font-size: 18px !important; font-weight: 700 !important; margin-bottom: 20px !important; padding-bottom: 12px !important; border-bottom: 2px solid var(--dci-cta) !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; } .woocommerce-checkout-review-order-table { width: 100% !important; margin-bottom: 22px !important; border-collapse: collapse !important; } .woocommerce-checkout-review-order-table th, .woocommerce-checkout-review-order-table td { padding: 12px 6px !important; border-bottom: 1px solid var(--dci-nen) !important; font-size: 14px !important; } .woocommerce-checkout-review-order-table .product-name { font-weight: 600 !important; color: var(--dci-navy) !important; line-height: 1.4 !important; } .woocommerce-checkout-review-order-table .product-total { text-align: right !important; font-weight: 700 !important; color: var(--dci-chu-phu) !important; } .woocommerce-checkout-review-order-table .order-total th { font-size: 16px !important; font-weight: 700 !important; color: var(--dci-navy) !important; border-top: 2px solid var(--dci-vien) !important; } .woocommerce-checkout-review-order-table .order-total td { font-size: 20px !important; font-weight: 800 !important; color: var(--dci-nhan) !important; text-align: right !important; border-top: 2px solid var(--dci-vien) !important; } #payment { background: var(--dci-nen) !important; border-radius: 10px !important; padding: 20px !important; border: 1px solid var(--dci-vien) !important; margin-top: 15px !important; } #payment ul.payment_methods { list-style: none !important; padding: 0 !important; margin: 0 0 18px 0 !important; } #payment ul.payment_methods li { margin-bottom: 14px !important; padding-bottom: 14px !important; border-bottom: 1px solid var(--dci-vien) !important; } #payment ul.payment_methods li label { font-weight: 700 !important; color: var(--dci-navy) !important; cursor: pointer !important; font-size: 14.5px !important; line-height: 1.4 !important; } #payment div.payment_box { background: #ffffff !important; padding: 14px 16px !important; border-radius: 8px !important; margin-top: 10px !important; font-size: 13px !important; border-left: 4px solid var(--dci-sky) !important; color: #4b5563 !important; line-height: 1.5 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important; } #place_order { background: var(--dci-cta) !important; color: #ffffff !important; font-size: 16px !important; font-weight: 800 !important; padding: 16px 25px !important; border-radius: 8px !important; width: 100% !important; border: none !important; cursor: pointer !important; transition: all 0.3s ease !important; box-shadow: 0 6px 20px rgba(var(--dci-cta-rgb), 0.35) !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; margin-top: 15px !important; } #place_order:hover { background: var(--dci-cta-hover) !important; transform: translateY(-2px) !important; box-shadow: 0 8px 25px rgba(var(--dci-cta-rgb), 0.45) !important; } @media (max-width: 991px) { form.woocommerce-checkout { grid-template-columns: 1fr !important; gap: 25px !important; } #customer_details, #order_review { grid-column: 1 / -1 !important; position: static !important; } } .woocommerce-order { max-width: 860px !important; margin: 30px auto 80px auto !important; padding: 40px 35px !important; background: #ffffff !important; border-radius: 12px !important; box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08) !important; border-top: 5px solid var(--dci-sky) !important; font-family: var(--dci-font) !important; } .woocommerce-thankyou-order-received { color: var(--dci-navy) !important; font-size: 24px !important; font-weight: 800 !important; text-align: center !important; margin-bottom: 25px !important; line-height: 1.4 !important; } .woocommerce-thankyou-order-received::before { content: "\f058"; font-family: "Font Awesome 5 Free"; font-weight: 900; color: #10b981; display: block; font-size: 50px; margin-bottom: 12px; } .woocommerce-order-overview { background: var(--dci-nen) !important; padding: 20px !important; border-radius: 10px !important; list-style: none !important; display: flex !important; justify-content: space-around !important; flex-wrap: wrap !important; margin-bottom: 30px !important; border: 1px solid var(--dci-vien) !important; gap: 15px !important; } .woocommerce-order-overview li { text-align: center !important; font-size: 13px !important; color: var(--dci-chu-phu) !important; text-transform: uppercase !important; font-weight: 600 !important; } .woocommerce-order-overview li strong { display: block !important; font-size: 16px !important; color: var(--dci-navy) !important; margin-top: 5px !important; text-transform: none !important; font-weight: 800 !important; } .woocommerce-sepay-bank-details { margin: 30px 0 !important; } .sepay-box { border: 1.5px solid var(--dci-sky) !important; border-radius: 12px !important; overflow: hidden !important; box-shadow: 0 8px 25px rgba(var(--dci-sky-rgb), 0.1) !important; } .sepay-box .box-title { background: var(--dci-navy) !important; color: #ffffff !important; padding: 16px 20px !important; font-size: 17px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; text-align: center !important; } .sepay-pay-footer { background: var(--dci-nen) !important; border-top: 1px solid var(--dci-vien) !important; padding: 12px 20px !important; text-align: center !important; color: var(--dci-nhan) !important; font-weight: 700 !important; } .woocommerce-table--order-details { width: 100% !important; border-collapse: collapse !important; margin-top: 20px !important; background: #ffffff !important; border-radius: 8px !important; overflow: hidden !important; border: 1px solid var(--dci-vien) !important; } .woocommerce-table--order-details th, .woocommerce-table--order-details td { padding: 14px 16px !important; border-bottom: 1px solid #edf2f7 !important; font-size: 14px !important; } .woocommerce-table--order-details thead th { background: var(--dci-nen) !important; color: var(--dci-navy) !important; font-weight: 700 !important; text-transform: uppercase !important; font-size: 13px !important; } .woocommerce-checkout #sidebar, .woocommerce-cart #sidebar, .woocommerce-account #sidebar, .woocommerce-page #sidebar, .single-product #sidebar { display: none !important; } .woocommerce-checkout #left-area, .woocommerce-cart #left-area, .woocommerce-account #left-area, .woocommerce-page #left-area, .single-product #left-area { width: 100% !important; max-width: 100% !important; float: none !important; padding-right: 0 !important; border-right: none !important; } .woocommerce-checkout #main-content .container::before, .woocommerce-cart #main-content .container::before, .woocommerce-account #main-content .container::before, .woocommerce-page #main-content .container::before, .single-product #main-content .container::before { display: none !important; } .single-product .product { max-width: 1140px; margin: 40px auto 80px auto; padding: 0 20px; font-family: var(--dci-font) ; } .single-product .woocommerce-product-gallery { border-radius: 12px; overflow: hidden; box-shadow: 0 8px 30px rgba(0,0,0,0.08); } .single-product .product_title { color: var(--dci-navy) !important; font-size: 28px !important; font-weight: 800 !important; line-height: 1.35 !important; margin-bottom: 15px !important; } .single-product p.price { color: var(--dci-nhan) !important; font-size: 26px !important; font-weight: 800 !important; margin-bottom: 20px !important; } .single-product .single_add_to_cart_button { background: var(--dci-cta) !important; color: #ffffff !important; font-size: 16px !important; font-weight: 700 !important; padding: 16px 36px !important; border-radius: 8px !important; box-shadow: 0 6px 20px rgba(var(--dci-cta-rgb), 0.35) !important; text-transform: uppercase !important; transition: all 0.3s ease !important; } .single-product .single_add_to_cart_button:hover { background: var(--dci-cta-hover) !important; transform: translateY(-2px) !important; box-shadow: 0 8px 25px rgba(var(--dci-cta-rgb), 0.45) !important; } .dci-news-wrapper { max-width: 1200px; margin: 20px auto 70px auto; padding: 0 15px; font-family: var(--dci-font) ; } .dci-news-filter-bar { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 35px; } .dci-news-filter-btn { background: #ffffff; border: 1px solid var(--dci-vien); color: var(--dci-chu-phu); padding: 10px 22px; border-radius: 30px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 6px rgba(0,0,0,0.03); } .dci-news-filter-btn:hover, .dci-news-filter-btn.active { background: var(--dci-navy); color: #ffffff; border-color: var(--dci-navy); box-shadow: 0 4px 15px rgba(var(--dci-navy-rgb), 0.2); transform: translateY(-2px); } .dci-news-list { display: flex; flex-direction: column; gap: 25px; } .dci-news-card, .et_pb_blog .et_pb_post { display: flex !important; flex-direction: row !important; align-items: stretch !important; background: #ffffff !important; border-radius: 16px !important; border: 1px solid var(--dci-nen) !important; box-shadow: 0 4px 20px rgba(var(--dci-navy-rgb), 0.05) !important; overflow: hidden !important; transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1) !important; margin-bottom: 0 !important; width: 100% !important; } .dci-news-card:hover, .et_pb_blog .et_pb_post:hover { transform: translateY(-4px) !important; box-shadow: 0 12px 30px rgba(var(--dci-navy-rgb), 0.12) !important; border-color: rgba(var(--dci-sky-rgb), 0.35) !important; } .dci-news-thumb-col, .et_pb_blog .entry-featured-image-url { flex: 0 0 380px !important; max-width: 380px !important; width: 380px !important; position: relative !important; overflow: hidden !important; margin: 0 !important; display: block !important; background: var(--dci-nen) !important; } .dci-news-thumb-col a, .et_pb_blog .entry-featured-image-url a { display: block !important; width: 100% !important; height: 100% !important; overflow: hidden !important; } .dci-news-thumb-col img, .et_pb_blog .entry-featured-image-url img { width: 100% !important; height: 100% !important; min-height: 250px !important; object-fit: cover !important; display: block !important; transition: transform 0.5s ease !important; } .dci-news-card:hover .dci-news-thumb-col img, .et_pb_blog .et_pb_post:hover .entry-featured-image-url img { transform: scale(1.06) !important; } .dci-news-badge { position: absolute; top: 16px; left: 16px; background: rgba(var(--dci-navy-rgb), 0.88); backdrop-filter: blur(4px); color: var(--dci-sky); border: 1px solid rgba(var(--dci-sky-rgb), 0.5); padding: 5px 14px; border-radius: 20px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; z-index: 2; } .dci-news-content-col { flex: 1 1 auto; padding: 28px 32px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; } .et_pb_blog .et_pb_post .entry-title, .et_pb_blog .et_pb_post .post-meta, .et_pb_blog .et_pb_post .post-content { padding-left: 25px !important; padding-right: 25px !important; } .dci-news-meta { display: flex; align-items: center; gap: 18px; color: var(--dci-chu-mo); font-size: 13px; font-weight: 500; margin-bottom: 12px; flex-wrap: wrap; } .dci-news-meta span { display: inline-flex; align-items: center; gap: 6px; } .dci-news-meta i { color: var(--dci-blue); font-size: 14px; } .dci-news-title, .et_pb_blog .entry-title { font-size: 22px !important; font-weight: 700 !important; line-height: 1.4em !important; margin: 0 0 12px 0 !important; } .dci-news-title a, .et_pb_blog .entry-title a { color: var(--dci-navy) !important; text-decoration: none !important; transition: color 0.3s ease !important; } .dci-news-title a:hover, .et_pb_blog .entry-title a:hover { color: var(--dci-blue) !important; } .dci-news-excerpt, .et_pb_blog .post-content { color: var(--dci-chu-phu) !important; font-size: 15px !important; line-height: 1.6em !important; margin: 0 0 20px 0 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .dci-news-readmore { display: inline-flex; align-items: center; gap: 8px; color: var(--dci-nhan) !important; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; text-decoration: none !important; transition: all 0.3s ease; align-self: flex-start; } .dci-news-readmore:hover { color: #d87609 !important; gap: 12px; } @media (max-width: 850px) { .dci-news-card, .et_pb_blog .et_pb_post { flex-direction: column !important; } .dci-news-thumb-col, .et_pb_blog .entry-featured-image-url { flex: 0 0 auto !important; max-width: 100% !important; width: 100% !important; height: 220px !important; } .dci-news-thumb-col img, .et_pb_blog .entry-featured-image-url img { min-height: 220px !important; } .dci-news-content-col { padding: 22px 20px !important; } .dci-news-title, .et_pb_blog .entry-title { font-size: 19px !important; } }