@charset "UTF-8"; /* ========================================================= MASTERSKILLS - COURSE GROUP CSS File dùng chung cho các trang nhóm chương trình đào tạo. Quy ước bắt buộc: HTML load css/style.css trước, sau đó load css/course-group.css. Không sửa css/style.css, không sửa js/main.js. ========================================================= */ /* ========================================================= Masterskills - Course Group Page CSS chung cho các trang bộ chương trình đào tạo. Chỉ scope theo .page-coursegroup; không scope theo từng trang riêng. ========================================================= */ .page-coursegroup{background:#fff;color:var(--text)} .page-coursegroup .ec-main{overflow:hidden;background:linear-gradient(180deg,#fff 0%,#fbfdff 48%,#fff 100%)} .page-coursegroup .ec-hero{position:relative;background:#fff;border-bottom:1px solid rgba(219,227,233,.75)} .page-coursegroup .ec-hero:after{content:"";position:absolute;right:-140px;top:0;width:42%;height:100%;background:linear-gradient(135deg,rgba(16,61,97,.08),rgba(210,161,60,.14));clip-path:polygon(22% 0,100% 0,100% 100%,0 100%);pointer-events:none}.page-coursegroup .ec-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(480px,46%) minmax(0,54%);min-height:500px;align-items:start;gap:42px}.page-coursegroup .ec-hero-copy{max-width:640px;padding:48px 0 28px}.page-coursegroup .ec-breadcrumb{display:flex;flex-wrap:wrap;gap:9px;align-items:center;color:#557083;font-size:14px;font-weight:700;margin-bottom:22px}.page-coursegroup .ec-breadcrumb a:hover{color:var(--brand-2)}.page-coursegroup .ec-kicker,.page-coursegroup .ec-section-head p{margin:0 0 10px;color:#c78322;font-weight:900;letter-spacing:1.6px;text-transform:uppercase}.page-coursegroup .ec-hero h1{max-width:620px;margin:0;color:var(--brand);font:800 clamp(36px,3.2vw,48px)/1.08 Roboto,"Helvetica Neue",sans-serif;text-transform:uppercase;letter-spacing:-.8px}.page-coursegroup .ec-hero h1 span{display:block}.page-coursegroup .ec-lead{max-width:620px;margin:20px 0 0;color:#314c62;font-size:18px;line-height:1.58;font-weight:500}.page-coursegroup .ec-actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:28px}.page-coursegroup .ec-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border-radius:4px;border:1px solid transparent;font-weight:900;text-transform:uppercase;letter-spacing:.35px;font-size:13px;transition:.22s}.page-coursegroup .ec-btn:after{content:"→"}.page-coursegroup .ec-btn-primary{background:linear-gradient(135deg,#d08b24,#efbd58);color:#fff;box-shadow:0 10px 24px rgba(199,131,34,.22)}.page-coursegroup .ec-btn-primary:hover{transform:translateY(-2px);box-shadow:0 15px 34px rgba(199,131,34,.32)}.page-coursegroup .ec-btn-outline{background:#fff;border-color:#d7b06d;color:var(--brand)}.page-coursegroup .ec-btn-outline:hover{background:#fff8ea}.page-coursegroup .ec-btn-dark{background:#0d3150;color:#fff;border-color:rgba(255,255,255,.18)}.page-coursegroup .ec-hero-visual{margin:0;position:relative;height:500px;min-height:0;border-radius:0 0 0 20px;overflow:hidden;box-shadow:0 28px 60px rgba(8,45,73,.14)}.page-coursegroup .ec-hero-visual img{display:block;width:100%;height:500px;min-height:0;object-fit:cover;object-position:center}.page-coursegroup .ec-hero-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.68) 0%,rgba(255,255,255,.18) 26%,rgba(8,45,73,.06) 100%)} .page-coursegroup .ec-section{padding:58px 0}.page-coursegroup .ec-section-title{text-align:center;margin:0 0 34px;color:var(--brand);text-transform:uppercase}.page-coursegroup .ec-section-title:before,.page-coursegroup .ec-section-title:after{content:"";display:inline-block;width:90px;height:1px;background:#d8b36d;vertical-align:middle;margin:0 22px}.page-coursegroup .ec-why{padding-top:42px}.page-coursegroup .ec-why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;border:1px solid var(--line);border-radius:8px;padding:22px;background:#fff;box-shadow:0 12px 34px rgba(16,61,97,.07)}.page-coursegroup .ec-why-grid article{padding:28px 24px;text-align:center;border:1px solid #e9eef2;border-radius:8px;background:#fff}.page-coursegroup .ec-why-grid span,.page-coursegroup .ec-audience-grid span{width:70px;height:70px;margin:0 auto 16px;border:1px solid #d7b06d;border-radius:50%;display:grid;place-items:center;color:var(--brand);font-size:32px}.page-coursegroup .ec-why-grid h3,.page-coursegroup .ec-audience-grid h3{margin:0 0 10px;color:var(--brand);font-weight:900;text-transform:uppercase;font-size:16px}.page-coursegroup .ec-why-grid p,.page-coursegroup .ec-audience-grid p{margin:0;color:#5f7180;line-height:1.55}.page-coursegroup .ec-goals{background:#fbfcfd;padding-top:44px}.page-coursegroup .ec-goal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.page-coursegroup .ec-goal-grid article{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;min-height:135px;padding:28px;background:linear-gradient(135deg,#092d4b,#103d61);border-radius:7px;color:#fff;box-shadow:0 16px 34px rgba(8,45,73,.16)}.page-coursegroup .ec-goal-grid strong{font:800 56px/1 var(--serif);color:#efc861}.page-coursegroup .ec-goal-grid h3{margin:0 0 8px;text-transform:uppercase;font-size:17px}.page-coursegroup .ec-goal-grid p{margin:0;color:#d8e6ef;line-height:1.55}.page-coursegroup .ec-audience-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}.page-coursegroup .ec-audience-grid article{border:1px solid var(--line);border-radius:8px;background:#fff;text-align:center;padding:28px 18px;box-shadow:0 10px 25px rgba(16,61,97,.05)} .page-coursegroup .ec-groups{background:#fff}.page-coursegroup .ec-section-head{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:28px}.page-coursegroup .ec-section-head h2{margin:0;color:var(--brand);}.page-coursegroup .ec-section-head a{color:var(--brand-2);font-weight:900}.page-coursegroup .ec-program-table{border:1px solid #cfd9e1;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 14px 42px rgba(8,45,73,.08)}.page-coursegroup .ec-program-row{display:grid;grid-template-columns:260px 220px minmax(0,1fr);border-bottom:1px solid #dfe7ec;min-height:132px}.page-coursegroup .ec-program-row:last-child{border-bottom:0}.page-coursegroup .ec-program-index{display:grid;grid-template-columns:74px 1fr;background:#082d49;color:#fff}.page-coursegroup .ec-program-index span{display:grid;place-items:center;font:800 31px/1 var(--serif);color:#efc861;border-right:1px solid rgba(239,200,97,.32)}.page-coursegroup .ec-program-index strong{display:flex;align-items:center;padding:18px;font-size:16px;line-height:1.25;text-transform:uppercase}.page-coursegroup .ec-program-desc{display:flex;align-items:center;padding:20px 24px;border-right:1px solid #dfe7ec}.page-coursegroup .ec-program-desc p{margin:0;color:#566b7a;line-height:1.55}.page-coursegroup .ec-program-links{list-style:none;margin:0;padding:20px 20px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 20px}.page-coursegroup .ec-program-links a{display:block;color:#24445c;font-weight:700;line-height:1.35}.page-coursegroup .ec-program-links a:before{content:"•";color:#d28a2e;font-weight:900;margin-right:8px}.page-coursegroup .ec-program-links a:hover{color:var(--brand-2)}.page-coursegroup .ec-path{background:#fbfcfd}.page-coursegroup .ec-path-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}.page-coursegroup .ec-path-grid article{position:relative;background:#fff;border:1px solid var(--line);border-radius:8px;padding:26px 26px 28px 86px;min-height:142px}.page-coursegroup .ec-path-grid article:not(:last-child):after{content:"";position:absolute;right:-31px;top:50%;width:24px;height:24px;border-top:12px solid transparent;border-bottom:12px solid transparent;border-left:20px solid #d7b06d;transform:translateY(-50%)}.page-coursegroup .ec-path-grid span{position:absolute;left:26px;top:26px;width:44px;height:44px;border-radius:50%;background:#082d49;color:#efc861;display:grid;place-items:center;font-weight:900}.page-coursegroup .ec-path-grid h3{margin:0 0 5px;color:var(--brand);text-transform:uppercase}.page-coursegroup .ec-path-grid p{margin:5px 0 0;color:#607384;line-height:1.55}.page-coursegroup .ec-feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.page-coursegroup .ec-feature-card{display:block;background:#fff;border:1px solid var(--line);border-radius:9px;overflow:hidden;box-shadow:0 12px 28px rgba(16,61,97,.08);transition:.25s}.page-coursegroup .ec-feature-card:hover{transform:translateY(-5px);box-shadow:0 18px 42px rgba(16,61,97,.14)}.page-coursegroup .ec-feature-card img{width:100%;aspect-ratio:780/520;object-fit:cover}.page-coursegroup .ec-feature-card div{padding:18px}.page-coursegroup .ec-feature-card h3{margin:0 0 12px;color:var(--brand);font:800 18px/1.32 var(--serif)}.page-coursegroup .ec-feature-card p{display:flex;flex-wrap:wrap;gap:12px;margin:0;color:#67798a;font-size:13px;font-weight:700}.page-coursegroup .ec-stat-strip{padding:28px 0;background:#082d49;color:#fff}.page-coursegroup .ec-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}.page-coursegroup .ec-stat-grid article{display:grid;grid-template-columns:auto auto 1fr;gap:14px;align-items:center;padding:10px 26px;border-right:1px solid rgba(255,255,255,.18)}.page-coursegroup .ec-stat-grid article:last-child{border-right:0}.page-coursegroup .ec-stat-grid span{font-size:34px;color:#efc861}.page-coursegroup .ec-stat-grid strong{font:800 34px/1 var(--serif);color:#efc861}.page-coursegroup .ec-stat-grid p{margin:0;color:#d8e6ef;font-size:13px;font-weight:800;text-transform:uppercase;line-height:1.45}.page-coursegroup .ec-final-cta{padding:40px 0;background:#fff}.page-coursegroup .ec-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:30px;background:linear-gradient(135deg,#082d49,#0c4169);color:#fff;border-radius:8px;padding:34px 38px;box-shadow:0 18px 46px rgba(8,45,73,.18);position:relative;overflow:hidden}.page-coursegroup .ec-cta-inner:after{content:"MS";position:absolute;right:38px;bottom:-30px;color:rgba(255,255,255,.04);font:900 160px/1 var(--serif)}.page-coursegroup .ec-cta-inner h2{position:relative;z-index:1;margin:0 0 8px;font:800 28px/1.2 var(--serif);color:#efc861}.page-coursegroup .ec-cta-inner p{position:relative;z-index:1;margin:0;color:#dbe7ef}.page-coursegroup .ec-cta-actions{position:relative;z-index:1;display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end} @media(max-width:1024px){.page-coursegroup .ec-hero-grid{grid-template-columns:1fr;min-height:auto;gap:28px;padding:46px 0 0}.page-coursegroup .ec-hero-copy{max-width:760px;padding:0}.page-coursegroup .ec-lead{max-width:760px}.page-coursegroup .ec-hero-visual{border-radius:28px;height:380px;min-height:0}.page-coursegroup .ec-hero-visual img{height:380px;min-height:0}.page-coursegroup .ec-why-grid{grid-template-columns:repeat(2,1fr)}.page-coursegroup .ec-audience-grid{grid-template-columns:repeat(3,1fr)}.page-coursegroup .ec-program-row{grid-template-columns:240px 1fr}.page-coursegroup .ec-program-desc{border-right:0}.page-coursegroup .ec-program-links{grid-column:1/-1;border-top:1px solid #dfe7ec}.page-coursegroup .ec-feature-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:820px){.page-coursegroup .ec-section{padding:48px 0}.page-coursegroup .ec-section-title:before,.page-coursegroup .ec-section-title:after{display:none}.page-coursegroup .ec-goal-grid,.page-coursegroup .ec-path-grid{grid-template-columns:1fr}.page-coursegroup .ec-path-grid article:not(:last-child):after{display:none}.page-coursegroup .ec-program-row{grid-template-columns:1fr}.page-coursegroup .ec-program-index{grid-template-columns:64px 1fr}.page-coursegroup .ec-program-links{grid-template-columns:1fr}.page-coursegroup .ec-section-head{display:block}.page-coursegroup .ec-section-head a{display:inline-block;margin-top:14px}.page-coursegroup .ec-stat-grid{grid-template-columns:repeat(2,1fr)}.page-coursegroup .ec-stat-grid article{border-bottom:1px solid rgba(255,255,255,.18)}.page-coursegroup .ec-cta-inner{display:block}.page-coursegroup .ec-cta-actions{justify-content:flex-start;margin-top:22px}} @media(max-width:560px){.page-coursegroup .ec-hero h1{font-size:36px;line-height:1.1;letter-spacing:-.5px}.page-coursegroup .ec-lead{font-size:16px;line-height:1.6}.page-coursegroup .ec-actions,.page-coursegroup .ec-cta-actions{display:grid}.page-coursegroup .ec-btn{width:100%}.page-coursegroup .ec-why-grid,.page-coursegroup .ec-audience-grid,.page-coursegroup .ec-feature-grid,.page-coursegroup .ec-stat-grid{grid-template-columns:1fr}.page-coursegroup .ec-stat-grid article{border-right:0}.page-coursegroup .ec-goal-grid article{grid-template-columns:1fr}.page-coursegroup .ec-hero-visual img{height:300px;min-height:0}.page-coursegroup .ec-hero-visual{height:300px;min-height:0}.page-coursegroup .ec-cta-inner{padding:28px 22px}} /* Bảng danh mục khóa học và mã khóa học */ .page-coursegroup .ec-program-row--header{min-height:64px;background:#082d49;color:#fff} .page-coursegroup .ec-program-row--header .ec-program-index{background:#082d49} .page-coursegroup .ec-program-row--header .ec-program-index span{font:800 15px/1 Roboto,"Helvetica Neue",sans-serif;color:#efc861;letter-spacing:.08em;text-transform:uppercase} .page-coursegroup .ec-program-row--header .ec-program-index strong, .page-coursegroup .ec-program-row--header .ec-program-desc p, .page-coursegroup .ec-program-row--header .ec-program-links li{color:#fff;font-weight:900;text-transform:uppercase;letter-spacing:.04em} .page-coursegroup .ec-program-row--header .ec-program-desc{border-right:1px solid rgba(255,255,255,.22)} .page-coursegroup .ec-course-code{color:#d28a2e;font-weight:900} .page-coursegroup .ec-program-row--header .ec-program-links{align-items:center} /* Tinh chỉnh hiển thị chung */ .page-coursegroup .ec-hero h1 span{color:#d28a2e} .page-coursegroup .ec-feature-card h3{min-height:48px} .page-coursegroup .ec-stat-grid strong{font-size:clamp(24px,2.2vw,34px)} /* Nhóm lý do và kết quả kỳ vọng - dùng khi trang có block tương ứng */ .page-coursegroup .ec-reasons{background:#fff} .page-coursegroup .ec-reason-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px} .page-coursegroup .ec-reason-grid article{border:1px solid var(--line);border-radius:14px;background:#fff;padding:26px 22px;box-shadow:0 10px 28px rgba(8,45,73,.06);transition:.22s ease} .page-coursegroup .ec-reason-grid article:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(8,45,73,.12);border-color:rgba(210,161,60,.38)} .page-coursegroup .ec-reason-grid span{width:56px;height:56px;border:1px solid rgba(210,161,60,.55);border-radius:50%;display:grid;place-items:center;color:var(--brand);font-size:26px;margin-bottom:16px;background:#fffaf0} .page-coursegroup .ec-reason-grid h3{margin:0 0 9px;color:var(--brand);font-size:17px;line-height:1.35;text-transform:uppercase;letter-spacing:.02em} .page-coursegroup .ec-reason-grid p{margin:0;color:var(--muted);line-height:1.62;font-size:14px} .page-coursegroup .ec-impact{background:linear-gradient(135deg,#f7fafc 0%,#fff 100%)} .page-coursegroup .ec-impact-grid{display:grid;grid-template-columns:44% 56%;gap:34px;align-items:center} .page-coursegroup .ec-impact h2{font:800 clamp(30px,3.1vw,48px)/1.15 var(--serif);color:var(--brand);margin:0 0 18px}.page-coursegroup .ec-impact p{color:#425c70;line-height:1.75;margin:0;font-size:16px}.page-coursegroup .ec-impact-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.page-coursegroup .ec-impact-list article{min-height:130px;border:1px solid var(--line);border-radius:16px;background:#fff;padding:24px;box-shadow:0 12px 32px rgba(8,45,73,.08)}.page-coursegroup .ec-impact-list strong{display:block;color:var(--gold);font:800 32px/1 var(--serif);margin-bottom:12px}.page-coursegroup .ec-impact-list span{display:block;color:var(--brand);font-weight:850;line-height:1.45} @media(max-width:980px){.page-coursegroup .ec-reason-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.page-coursegroup .ec-impact-grid{grid-template-columns:1fr}} @media(max-width:620px){.page-coursegroup .ec-reason-grid,.page-coursegroup .ec-impact-list{grid-template-columns:1fr}} /* ========================================================= Component mở rộng cho trang Workshop/Seminar đang dùng class ws-* Vẫn chỉ scope theo .page-coursegroup, không scope theo tên trang. ========================================================= */ /* Component ws-* cho trang hội thảo/workshop nếu HTML vẫn dùng prefix ws-* */ .page-coursegroup{ background:#fff; } .page-coursegroup .ws-main{ color:var(--text); background:#fff; } .page-coursegroup .ws-hero{ position:relative; overflow:hidden; background: radial-gradient(circle at 12% 15%,rgba(210,161,60,.16),transparent 28%), linear-gradient(135deg,#f7fafc 0%,#ffffff 52%,#edf4f8 100%); border-bottom:1px solid var(--line); } .page-coursegroup .ws-hero::after{ content:""; position:absolute; right:-140px; top:-160px; width:520px; height:520px; background:linear-gradient(135deg,rgba(8,45,73,.08),rgba(210,161,60,.12)); transform:rotate(28deg); border-radius:52px; } .page-coursegroup .ws-hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns:47% 53%; align-items:start; min-height:500px; gap:34px; padding:36px 0 24px; } .page-coursegroup .ws-hero-copy{ padding:18px 0 18px; } .page-coursegroup .ws-breadcrumb{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; color:#5c7181; font-size:14px; margin-bottom:30px; } .page-coursegroup .ws-breadcrumb a{ color:var(--brand); font-weight:700; } .page-coursegroup .ws-breadcrumb a:hover{ color:var(--brand-2); } .page-coursegroup .ws-kicker, .page-coursegroup .ws-section-head p{ margin:0 0 12px; color:#d28a2e; font-weight:900; letter-spacing:.12em; text-transform:uppercase; font-size:14px; } .page-coursegroup .ws-hero h1{ margin:0 0 20px; color:var(--brand-dark); font:700 clamp(42px,4.5vw,70px)/1.05 var(--serif); letter-spacing:-.025em; } .page-coursegroup .ws-hero h1 span{ display:block; color:#d28a2e; } .page-coursegroup .ws-lead{ margin:0; max-width:680px; color:#334f65; font-size:18px; line-height:1.75; } .page-coursegroup .ws-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; } .page-coursegroup .ws-btn{ min-height:52px; display:inline-flex; align-items:center; justify-content:center; gap:10px; border:1px solid transparent; border-radius:4px; padding:0 24px; font-weight:900; font-size:13px; letter-spacing:.04em; text-transform:uppercase; transition:transform .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease; } .page-coursegroup .ws-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(8,45,73,.16); } .page-coursegroup .ws-btn-primary{ background:linear-gradient(135deg,#efc861,#d2a13c); color:#082d49; } .page-coursegroup .ws-btn-outline{ border-color:#b9cbd8; background:#fff; color:var(--brand); } .page-coursegroup .ws-btn-outline:hover{ border-color:var(--brand-2); color:var(--brand-2); } .page-coursegroup .ws-btn-dark{ background:#082d49; color:#fff; } .page-coursegroup .ws-hero-visual{ margin:0; position:relative; height:500px; min-height:0; border-radius:28px 0 0 28px; overflow:hidden; box-shadow:0 24px 70px rgba(8,45,73,.18); border:1px solid rgba(210,161,60,.24); } .page-coursegroup .ws-hero-visual img{ display:block; width:100%; height:500px; min-height:0; object-fit:cover; object-position:center; } .page-coursegroup .ws-stats{ margin-top:-34px; position:relative; z-index:3; } .page-coursegroup .ws-stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); background:linear-gradient(135deg,#082d49,#103d61); border-radius:12px; box-shadow:0 20px 46px rgba(8,45,73,.22); overflow:hidden; } .page-coursegroup .ws-stats-grid article{ min-height:142px; display:grid; grid-template-columns:auto 1fr; align-content:center; gap:8px 16px; padding:26px 24px; border-right:1px solid rgba(255,255,255,.16); } .page-coursegroup .ws-stats-grid article:last-child{ border-right:0; } .page-coursegroup .ws-stats-grid span{ grid-row:1/3; width:58px; height:58px; display:grid; place-items:center; border:1px solid rgba(239,200,97,.62); border-radius:50%; color:#efc861; font-size:26px; } .page-coursegroup .ws-stats-grid strong{ color:#efc861; font:700 30px/1.1 var(--serif); } .page-coursegroup .ws-stats-grid p{ margin:0; color:#d9e7ee; line-height:1.45; font-size:13px; } .page-coursegroup .ws-section{ padding:36px 0; } .page-coursegroup .ws-section:nth-of-type(even){ background:#fbfcfd; } .page-coursegroup .ws-section-title{ position:relative; margin:0 auto 36px; text-align:center; color:var(--brand); font:700 clamp(30px,3.2vw,46px)/1.18 var(--serif); } .page-coursegroup .ws-section-title::after{ content:""; display:block; width:82px; height:2px; background:var(--gold); margin:18px auto 0; } .page-coursegroup .ws-section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:30px; } .page-coursegroup .ws-section-head h2{ margin:0; color:var(--brand); font:700 clamp(30px,3.1vw,48px)/1.14 var(--serif); } .page-coursegroup .ws-section-head a{ color:var(--brand-2); font-weight:900; white-space:nowrap; } .page-coursegroup .ws-section-head a:hover{ text-decoration:underline; } .page-coursegroup .ws-why-grid, .page-coursegroup .ws-format-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } .page-coursegroup .ws-why-grid article, .page-coursegroup .ws-format-grid article{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:26px 22px; box-shadow:0 12px 34px rgba(8,45,73,.06); min-height:220px; transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .page-coursegroup .ws-why-grid article:hover, .page-coursegroup .ws-format-grid article:hover{ transform:translateY(-5px); box-shadow:0 18px 44px rgba(8,45,73,.13); border-color:#b8ccda; } .page-coursegroup .ws-why-grid span{ width:56px; height:56px; display:grid; place-items:center; border-radius:50%; color:#efc861; background:#082d49; margin-bottom:18px; font-weight:900; font-size:22px; } .page-coursegroup .ws-why-grid h3, .page-coursegroup .ws-format-grid h3{ margin:0 0 10px; color:#082d49; font-size:18px; line-height:1.35; text-transform:uppercase; letter-spacing:.02em; } .page-coursegroup .ws-why-grid p, .page-coursegroup .ws-format-grid p{ margin:0; color:var(--muted); line-height:1.65; } .page-coursegroup .ws-goal-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .page-coursegroup .ws-goal-grid article{ display:grid; grid-template-columns:90px 1fr; gap:18px; padding:28px; border-radius:10px; color:#fff; background:linear-gradient(135deg,#082d49,#103d61); box-shadow:0 16px 36px rgba(8,45,73,.14); min-height:190px; } .page-coursegroup .ws-goal-grid strong{ color:#efc861; font:700 56px/1 var(--serif); } .page-coursegroup .ws-goal-grid h3{ margin:0 0 10px; color:#fff; text-transform:uppercase; font-size:18px; } .page-coursegroup .ws-goal-grid p{ margin:0; color:#d9e7ee; line-height:1.6; } .page-coursegroup .ws-audience-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; } .page-coursegroup .ws-audience-grid article{ text-align:center; background:#fff; border:1px solid var(--line); border-radius:10px; padding:26px 16px; min-height:214px; box-shadow:0 12px 28px rgba(8,45,73,.05); } .page-coursegroup .ws-audience-grid span{ width:68px; height:68px; display:grid; place-items:center; margin:0 auto 16px; border-radius:50%; border:1px solid var(--gold); color:var(--brand); font-size:28px; } .page-coursegroup .ws-audience-grid h3{ margin:0 0 9px; color:var(--brand); font-size:17px; line-height:1.35; } .page-coursegroup .ws-audience-grid p{ margin:0; color:var(--muted); line-height:1.55; font-size:14px; } .page-coursegroup .ws-format-grid article{ min-height:190px; } .page-coursegroup .ws-format-grid article::before{ content:""; display:block; width:54px; height:4px; background:linear-gradient(90deg,#efc861,#d2a13c); margin-bottom:18px; border-radius:999px; } .page-coursegroup .ws-groups{ background: linear-gradient(180deg,#fbfcfd 0%,#fff 42%,#f7fafc 100%); } .page-coursegroup .ws-program-table{ border:1px solid #d5e0e7; border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 18px 50px rgba(8,45,73,.08); } .page-coursegroup .ws-program-row{ display:grid; grid-template-columns:255px minmax(270px,.85fr) minmax(420px,1.45fr); min-height:150px; border-bottom:1px solid #dfe8ee; } .page-coursegroup .ws-program-row:last-child{ border-bottom:0; } .page-coursegroup .ws-program-row--header{ min-height:64px; background:#082d49; color:#fff; } .page-coursegroup .ws-program-index{ display:grid; grid-template-columns:74px 1fr; align-items:center; gap:16px; padding:24px; color:#fff; background:#0a3656; border-right:1px solid rgba(255,255,255,.12); } .page-coursegroup .ws-program-row--header .ws-program-index{ background:#082d49; } .page-coursegroup .ws-program-index span{ color:#efc861; font:700 39px/1 var(--serif); } .page-coursegroup .ws-program-row--header .ws-program-index span{ font:900 15px/1 Roboto,"Helvetica Neue",sans-serif; letter-spacing:.1em; text-transform:uppercase; } .page-coursegroup .ws-program-index strong{ color:#fff; text-transform:uppercase; font-size:16px; line-height:1.35; } .page-coursegroup .ws-program-row--header .ws-program-index strong{ font-size:14px; letter-spacing:.04em; } .page-coursegroup .ws-program-desc{ display:flex; align-items:center; padding:26px 30px; border-right:1px solid #dfe8ee; } .page-coursegroup .ws-program-desc p{ margin:0; color:#4f6679; font-size:17px; line-height:1.65; } .page-coursegroup .ws-program-row--header .ws-program-desc{ border-right:1px solid rgba(255,255,255,.22); } .page-coursegroup .ws-program-row--header .ws-program-desc p{ color:#fff; font-weight:900; text-transform:uppercase; letter-spacing:.04em; } .page-coursegroup .ws-program-links{ margin:0; padding:24px 30px; list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 26px; align-content:center; } .page-coursegroup .ws-program-row--header .ws-program-links{ color:#fff; font-weight:900; text-transform:uppercase; letter-spacing:.04em; } .page-coursegroup .ws-program-links a{ display:block; position:relative; color:#123b5d; font-weight:800; line-height:1.45; padding-left:16px; } .page-coursegroup .ws-program-links a::before{ content:"•"; position:absolute; left:0; color:#d28a2e; font-weight:900; } .page-coursegroup .ws-program-links a span{ color:#d28a2e; font-weight:900; } .page-coursegroup .ws-program-links a:hover{ color:var(--brand-2); } .page-coursegroup .ws-process-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset:process; } .page-coursegroup .ws-process-grid article{ position:relative; background:#fff; border:1px solid var(--line); border-radius:12px; padding:28px 22px; text-align:center; box-shadow:0 12px 32px rgba(8,45,73,.06); } .page-coursegroup .ws-process-grid article:not(:last-child)::after{ content:""; position:absolute; top:58px; right:-21px; width:26px; height:2px; background:linear-gradient(90deg,#d2a13c,#103d61); } .page-coursegroup .ws-process-grid span{ width:68px; height:68px; display:grid; place-items:center; margin:0 auto 18px; border-radius:50%; background:#082d49; color:#efc861; font-weight:900; } .page-coursegroup .ws-process-grid h3{ margin:0 0 10px; color:var(--brand); font-size:18px; } .page-coursegroup .ws-process-grid p{ margin:0; color:var(--muted); line-height:1.58; font-size:14px; } .page-coursegroup .ws-feature-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } .page-coursegroup .ws-feature-card{ display:block; background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:0 14px 34px rgba(8,45,73,.08); transition:transform .22s ease, box-shadow .22s ease; } .page-coursegroup .ws-feature-card:hover{ transform:translateY(-5px); box-shadow:0 20px 50px rgba(8,45,73,.16); } .page-coursegroup .ws-feature-card img{ width:100%; aspect-ratio:3/2; object-fit:cover; } .page-coursegroup .ws-feature-card div{ padding:20px 18px 22px; } .page-coursegroup .ws-feature-card h3{ margin:0 0 14px; color:#082d49; font:700 21px/1.25 var(--serif); } .page-coursegroup .ws-feature-card p{ display:flex; flex-direction:column; gap:6px; margin:0; color:var(--muted); font-size:13px; } .page-coursegroup .ws-final-cta{ padding:44px 0; background:linear-gradient(135deg,#082d49,#103d61); color:#fff; } .page-coursegroup .ws-cta-inner{ display:flex; align-items:center; justify-content:space-between; gap:30px; } .page-coursegroup .ws-final-cta h2{ margin:0 0 10px; color:#efc861; font:700 34px/1.18 var(--serif); } .page-coursegroup .ws-final-cta p{ margin:0; color:#dceaf1; line-height:1.6; } .page-coursegroup .ws-cta-actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-end; min-width:360px; } @media(max-width:1220px){ .page-coursegroup .ws-hero-grid{ grid-template-columns:1fr; min-height:auto; } .page-coursegroup .ws-hero-visual{ border-radius:24px; height:420px; min-height:0; } .page-coursegroup .ws-hero-visual img{ height:420px; min-height:0; } .page-coursegroup .ws-stats{ margin-top:0; padding-top:24px; } .page-coursegroup .ws-stats-grid, .page-coursegroup .ws-why-grid, .page-coursegroup .ws-format-grid, .page-coursegroup .ws-process-grid, .page-coursegroup .ws-feature-grid{ grid-template-columns:repeat(2,1fr); } .page-coursegroup .ws-audience-grid{ grid-template-columns:repeat(3,1fr); } .page-coursegroup .ws-program-row{ grid-template-columns:220px 1fr; } .page-coursegroup .ws-program-links{ grid-column:1/-1; border-top:1px solid #dfe8ee; } .page-coursegroup .ws-program-row--header .ws-program-links{ border-top:1px solid rgba(255,255,255,.2); } } @media(max-width:820px){ .page-coursegroup .ws-hero{ padding-top:0; } .page-coursegroup .ws-hero-grid{ padding:30px 0 42px; gap:24px; } .page-coursegroup .ws-hero h1{ font-size:44px; } .page-coursegroup .ws-lead{ font-size:16px; } .page-coursegroup .ws-stats-grid, .page-coursegroup .ws-goal-grid, .page-coursegroup .ws-audience-grid, .page-coursegroup .ws-why-grid, .page-coursegroup .ws-format-grid, .page-coursegroup .ws-process-grid, .page-coursegroup .ws-feature-grid{ grid-template-columns:1fr; } .page-coursegroup .ws-stats-grid article{ border-right:0; border-bottom:1px solid rgba(255,255,255,.16); } .page-coursegroup .ws-stats-grid article:last-child{ border-bottom:0; } .page-coursegroup .ws-section{ padding:56px 0; } .page-coursegroup .ws-section-head{ display:block; } .page-coursegroup .ws-section-head a{ display:inline-block; margin-top:14px; } .page-coursegroup .ws-goal-grid article{ grid-template-columns:1fr; } .page-coursegroup .ws-program-row, .page-coursegroup .ws-program-row--header{ grid-template-columns:1fr; } .page-coursegroup .ws-program-index{ grid-template-columns:64px 1fr; } .page-coursegroup .ws-program-desc{ border-right:0; border-top:1px solid #dfe8ee; } .page-coursegroup .ws-program-links{ grid-template-columns:1fr; } .page-coursegroup .ws-program-row--header .ws-program-links{ display:none; } .page-coursegroup .ws-process-grid article:not(:last-child)::after{ display:none; } .page-coursegroup .ws-cta-inner{ display:block; } .page-coursegroup .ws-cta-actions{ min-width:0; justify-content:flex-start; margin-top:22px; } } @media(max-width:560px){ .page-coursegroup .ws-actions, .page-coursegroup .ws-cta-actions{ display:grid; } .page-coursegroup .ws-btn{ width:100%; } .page-coursegroup .ws-hero h1{ font-size:38px; } .page-coursegroup .ws-hero-visual img{ height:300px; min-height:0; } .page-coursegroup .ws-hero-visual{ height:300px; min-height:0; } .page-coursegroup .ws-stats-grid article{ grid-template-columns:1fr; } .page-coursegroup .ws-stats-grid span{ margin-bottom:4px; } .page-coursegroup .ws-program-index{ padding:22px; } .page-coursegroup .ws-program-desc, .page-coursegroup .ws-program-links{ padding:22px; } }