/* webtuyensinh — trang trong (wti-: trang, wtp-: bài viết) theo mockup about/blog/contact/post */
.wti, .wtp { --tc: #0f3d8c; --tx: #3d4c68; color: var(--tx); font-family: var(--bf); }
.wti-w, .wtp-w { max-width: 1320px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.wti h1, .wti h2, .wti h3, .wtp h1, .wtp h2, .wtp h3 { font-family: var(--hf); color: var(--tc); text-transform: none; letter-spacing: 0; }
.wti p, .wtp p { font-size: 18px; line-height: 1.65; }
.wti img, .wtp img { max-width: 100%; height: auto; }
.wti a, .wtp a { text-decoration: none; }
/* băng đầu trang */
.wti-band { background: #f3f6fa; padding: 30px 0 46px; border-bottom: 1px solid var(--line); }
.wti-bc, .wtp-bc { font-size: 14.5px; color: #6b7894; margin-bottom: 18px; }
.wti-bc a, .wtp-bc a { color: #6b7894; } .wti-bc .on { color: var(--c1); }
.wti-kk, .wtp-kick { display: block; color: var(--c1); font: 700 15px var(--bf); letter-spacing: .03em; margin-bottom: 10px; text-transform: uppercase; }
.wti-h1 { font: 800 54px/1.15 var(--hf) !important; margin: 0 0 14px; position: relative; }
.wti-band:not(.wti-chero) .wti-h1::before { content: ""; display: block; width: 44px; height: 4px; background: var(--c1); margin-bottom: 18px; }
.wti-sub { font-size: 21px !important; color: var(--tx); margin: 0; max-width: 820px; }
.wti-sec { padding: 64px 0; } .wti-bg2 { background: #f3f6fa; }
.wti-h2, .wti-hd h2, .wti-story h2, .wti-fq h2, .wti-ci h2, .wti-cf h2, .wtp-rh h2 { font: 800 40px/1.2 var(--hf) !important; margin: 0 0 12px; } .wti-story h2 { font-size: 44px !important; margin-bottom: 20px; }
.wti-mu { color: var(--tx); margin: 0 0 26px; }
.wti-hd { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 28px; } .wti-hd h2 { margin: 0; } .wti-hd p { margin: 8px 0 0; }
a.wti-lk { color: var(--c1) !important; font-weight: 700; font-size: 16px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } a.wti-lk img { width: 16px; }
.wti-btn, .wti-ob, .wtp-ob { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 32px; border-radius: 6px; font: 700 16.5px var(--bf); }
.wti-btn { background: var(--c1); color: #fff !important; } .wti-btn img { width: 16px; }
.wti-ob, .wtp-ob { border: 1.5px solid var(--tc); color: var(--tc) !important; background: #fff; } .wti-ob img, .wtp-ob img { width: 16px; }
.wti-wide { width: 100%; aspect-ratio: 1440 / 500; object-fit: cover; object-position: center 40%; display: block; }
/* giới thiệu */
.wti-story { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .wti-story > img { width: 100%; aspect-ratio: 1.45; object-fit: cover; border-radius: 8px; }
.wti-story.wti-rev { grid-template-columns: 1fr 1fr; } .wti-story p { margin: 0 0 16px; }
.wti-vm { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 28px; }
.wti-vm > div, .wti-ft4 > div { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 34px 32px; }
.wti-vm img, .wti-ft4 img { width: 72px; height: 72px; object-fit: contain; display: block; margin-bottom: 18px; }
.wti-vm b, .wti-ft4 b { display: block; font: 700 25px var(--hf); color: var(--tc); margin-bottom: 10px; } .wti-vm p, .wti-ft4 p { margin: 0; font-size: 16.5px; }
.wti-g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .wti-g3 > div { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; padding-bottom: 20px; }
.wti-g3 img { width: 100%; aspect-ratio: 1.5; object-fit: cover; display: block; margin-bottom: 16px; } .wti-g3 b { display: block; padding: 0 22px; font-size: 22px; color: var(--tc); } .wti-g3 p { padding: 0 22px; margin: 6px 0 0; font-size: 16px; }
.wti-cm { display: grid; grid-template-columns: 1fr 2.2fr; gap: 24px; }
.wti-cm-big { background: #eaf1fb; border-radius: 8px; padding: 34px; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.wti-cm-big b { font: 800 40px/1.15 var(--hf); color: var(--c1); } .wti-cm-big span { font-size: 18px; color: var(--tc); margin-top: 10px; font-weight: 600; }
.wti-cm-l { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 6px 30px; }
.wti-cm-l > div { display: grid; grid-template-columns: 30px 260px 1fr; gap: 16px; align-items: center; padding: 22px 0; } .wti-cm-l > div + div { border-top: 1px solid var(--line); }
.wti-cm-l img { width: 24px; } .wti-cm-l b { color: var(--tc); font-size: 19px; } .wti-cm-l span { font-size: 17px; }
.wti-cta { background: var(--c1); color: #fff; padding: 42px 0; }
.wti-cta .wti-w { display: flex; justify-content: space-between; align-items: center; gap: 30px; }
.wti-cta h2 { color: #fff !important; font: 800 36px/1.2 var(--hf) !important; margin: 0 0 8px; } .wti-cta p { color: #dbe6f7; margin: 0; }
.wti-cta-r { display: flex; flex-direction: column; align-items: center; gap: 12px; }
a.wti-wbtn { background: #fff; color: var(--c1) !important; min-height: 56px; padding: 0 36px; border-radius: 6px; font-weight: 700; font-size: 17px; display: inline-flex; align-items: center; gap: 10px; } a.wti-wbtn img { width: 16px; }
a.wti-hl { color: #fff !important; font: 800 24px var(--hf); display: inline-flex; align-items: center; gap: 10px; } a.wti-hl img { width: 22px; filter: none; }
/* liên hệ */
.wti-ct { display: grid; grid-template-columns: 1.55fr 1fr; gap: 34px; align-items: start; }
.wti-cf { border: 1px solid var(--line); border-radius: 8px; padding: 36px; background: #fff; } .wti-cf > p { margin: 0 0 22px; }
.wti-cf label { display: block; font-weight: 600; font-size: 16px; color: var(--tc); margin-bottom: 16px; } .wti-cf label em { color: var(--c1); font-style: normal; }
.wti-cf input, .wti-cf select, .wti-cf textarea { display: block; width: 100%; margin: 8px 0 0; border: 1px solid #d5dce8; border-radius: 6px; box-shadow: none; height: 54px; font-size: 16px; padding: 0 16px; background: #fff; }
.wti-cf textarea { height: 120px; padding: 14px 16px; }
.wti-r2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.wti-fb { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .wti-fb button { background: var(--c1); color: #fff; border: 0; border-radius: 6px; min-height: 56px; padding: 0 40px; font: 700 17px var(--bf); display: inline-flex; align-items: center; gap: 10px; margin: 0; } .wti-fb button img { width: 16px; }
.wti-fb small, small.wti-lock { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: #6b7894; } .wti-fb small img, small.wti-lock img { width: 15px; }
.wti-ci { display: flex; flex-direction: column; gap: 16px; } .wti-ci h2 { font-size: 30px !important; margin: 0 0 4px; }
.wti-ic { display: flex; align-items: center; gap: 22px; border: 1px solid var(--line); border-radius: 8px; padding: 24px; background: #fff; color: var(--tc) !important; }
.wti-ic > span { width: 76px; height: 76px; border-radius: 8px; background: #eaf1fb; display: flex; align-items: center; justify-content: center; flex: none; } .wti-ic > span img { width: 50px; height: 50px; object-fit: contain; }
.wti-ic small { display: block; font-size: 15px; color: var(--tx); margin-bottom: 4px; } .wti-ic b { font-size: 19px; line-height: 1.4; word-break: break-word; }
.wti-ich { background: #f3f6fa; } .wti-ich > span { background: transparent; } .wti-ich b { font-size: 28px; }
.wti-visit { display: grid; grid-template-columns: 1fr 1.6fr; gap: 24px; } .wti-visit img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; border-radius: 8px; }
.wti-mapf { width: 100%; height: 100%; min-height: 360px; border: 0; border-radius: 8px; display: block; }
.wti-fq { display: grid; grid-template-columns: 1fr 1.6fr; gap: 50px; align-items: start; }
.wti-faq details { border-bottom: 1px solid var(--line); padding: 20px 0; } .wti-faq summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 16px; font: 700 18px var(--bf); color: var(--tc); }
.wti-faq summary::-webkit-details-marker { display: none; }
.wti-faq summary::before { content: "+"; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--tc); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; }
.wti-faq details[open] summary::before { content: "−"; background: var(--c1); } .wti-faq details p { margin: 12px 0 0 46px; font-size: 16.5px; }
/* tin tức */
.wti-feat { display: grid; grid-template-columns: 1.15fr 1fr; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; margin-top: 18px; }
.wti-feat > img { width: 100%; height: 100%; aspect-ratio: 1.6; object-fit: cover; object-position: center 30%; }
.wti-feat > div { padding: 40px 44px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.wti-feat em, .wti-pg em, .wti-cc em { font-style: normal; color: var(--c1); font-size: 15px; font-weight: 600; }
.wti-feat b { font: 800 34px/1.25 var(--hf); color: var(--tc); margin: 10px 0 14px; } .wti-feat p { margin: 0 0 14px; }
.wti-feat small, .wti-pg small { display: inline-flex; align-items: center; gap: 8px; color: #6b7894; font-size: 14.5px; margin-bottom: 22px; } .wti-feat small img, .wti-pg small img { width: 16px; }
.wti-tool { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: -8px 0 28px; flex-wrap: wrap; }
.wti-chips { display: flex; gap: 10px; flex-wrap: wrap; } .wti-chips button { margin: 0; min-height: 46px; padding: 0 20px; border-radius: 6px; border: 1px solid #c9d2e2; background: #fff; color: var(--tc); font: 600 15.5px var(--bf); text-transform: none; letter-spacing: 0; }
.wti-chips button.on { background: var(--c1); border-color: var(--c1); color: #fff; }
.wti-search { display: flex; align-items: center; gap: 10px; border: 1px solid #c9d2e2; border-radius: 6px; padding: 0 16px; width: 340px; max-width: 100%; height: 50px; background: #fff; margin: 0; } .wti-search img { width: 18px; opacity: .6; }
.wti-search input { border: 0 !important; box-shadow: none !important; margin: 0 !important; height: 46px; font-size: 16px; padding: 0; background: transparent; }
.wti-pg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.wti-pg > a { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.wti-pg > a > img { width: 100%; aspect-ratio: 1.6; object-fit: cover; object-position: center 30%; display: block; }
.wti-pg > a > div { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.wti-pg b { font: 700 21px/1.35 var(--hf); color: var(--tc); margin: 8px 0 14px; } .wti-pg small { margin-bottom: 14px; }
.wti-pg u, .wtp-pp u { text-decoration: none; color: var(--c1); font-weight: 700; font-size: 15.5px; margin-top: auto; display: inline-flex; align-items: center; gap: 8px; } .wti-pg u img, .wtp-pp u img { width: 15px; }
.wti-empty { text-align: center; margin: 24px 0 0; }
.wti-pager { display: flex; justify-content: center; gap: 10px; margin-top: 36px; } .wti-pager span { width: 46px; height: 46px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #c9d2e2; font-weight: 700; } .wti-pager .on { background: var(--c1); color: #fff; border-color: var(--c1); }
/* băng đăng ký (navy) */
.wti-reg { background: var(--tc); padding: 46px 0 40px; }
.wti-reg .wti-w, .wti-reg .wtp-w { display: grid; grid-template-columns: 1fr; gap: 6px; }
.wti-reg h2 { color: #fff !important; font: 800 38px/1.2 var(--hf) !important; margin: 0 0 8px; } .wti-reg p { color: #dde5f5; margin: 0 0 18px; }
.wti-rf { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 16px; margin: 0; }
.wti-rf label, .wtp-sf label { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 6px; padding: 0 16px; height: 58px; margin: 0; } .wti-rf label img, .wtp-sf label img { width: 20px; opacity: .7; }
.wti-rf input, .wti-rf select, .wtp-sf input, .wtp-sf select { border: 0 !important; box-shadow: none !important; margin: 0 !important; height: 54px; padding: 0; font-size: 16px; background: transparent; width: 100%; }
.wti-rf button, .wtp-sf button { background: var(--c1); color: #fff; border: 0; border-radius: 6px; padding: 0 40px; min-height: 58px; margin: 0; font: 700 17px var(--bf); display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-transform: none; } .wti-rf button img, .wtp-sf button img { width: 16px; }
.wti-rf .b9-form-msg { grid-column: 1 / -1; color: #fff; } .wti-reg small.wti-lock { color: #c8d3ea; margin-top: 12px; } .wti-reg small.wti-lock img { filter: brightness(3); }
/* khoá học */
.wti-crs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.wti-cc { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.wti-cc > img { width: 100%; aspect-ratio: 1.5; object-fit: cover; object-position: center 30%; display: block; }
.wti-cc > div { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; } .wti-cc h3 { font: 800 24px var(--hf) !important; margin: 6px 0 14px; }
.wti-cc ul, .wti-ckl { list-style: none; margin: 0 0 16px; padding: 0; } .wti-cc li, .wti-ckl li { display: flex; gap: 12px; align-items: center; font-size: 16.5px; margin: 0 0 10px; } .wti-cc li img, .wti-ckl li img { width: 18px; flex: none; }
.wti-meta { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding-top: 14px; font-size: 15px !important; margin: auto 0 18px !important; } .wti-meta b { color: var(--c1); }
.wti-cc .wti-ob { align-self: stretch; }
.wti-steps { display: grid; gap: 18px; margin-top: 22px; } .wti-steps > div { display: flex; gap: 18px; align-items: flex-start; }
.wti-steps span, .wtp-steps span { flex: none; width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--c1); color: var(--c1); display: inline-flex; align-items: center; justify-content: center; font: 800 18px var(--hf); }
.wti-steps p, .wtp-steps p { margin: 0; } .wti-steps b, .wtp-steps b { display: block; color: var(--tc); font-size: 19px; margin-bottom: 2px; }
/* khoá chi tiết */
.wti-chero { padding: 30px 0 50px; } .wti-chero .wti-w { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.wti-chero .wti-w > img { width: 100%; aspect-ratio: 1.5; object-fit: cover; border-radius: 8px; } .wti-chero .wti-h1 { font-size: 50px !important; }
.wti-bt { display: flex; gap: 16px; margin-top: 30px; flex-wrap: wrap; }
.wti-ft4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 26px; } .wti-ft4 > div { padding: 30px 26px; }
.wti-stg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 26px; counter-reset: s; }
.wti-stg > div { background: #fff; border-radius: 8px; border-top: 4px solid var(--c1); padding: 26px; } .wti-stg span { color: var(--c1); font-weight: 700; font-size: 15px; text-transform: uppercase; } .wti-stg b { display: block; font: 800 23px var(--hf); color: var(--tc); margin: 8px 0; } .wti-stg p { margin: 0; font-size: 16px; }
.wti-info, .wtp-info { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: 8px; margin: 20px 0; background: #fff; }
.wti-info > div, .wtp-info > div { padding: 18px 22px; } .wti-info > div + div, .wtp-info > div + div { border-left: 1px solid var(--line); }
.wti-info small, .wtp-info small { display: block; font-size: 14.5px; color: var(--tx); } .wti-info b, .wtp-info b { font: 800 20px var(--hf); color: var(--c1); }
/* lịch khai giảng */
.wti-tbl { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; margin-top: 24px; }
.wti-tr { display: grid; grid-template-columns: 1.5fr 1.3fr 1.3fr .9fr .8fr; gap: 16px; align-items: center; padding: 18px 26px; font-size: 16.5px; } .wti-tr + .wti-tr { border-top: 1px solid var(--line); }
.wti-th { background: var(--tc); color: #fff; font-weight: 700; } .wti-tr b { color: var(--tc); } .wti-tr .wti-ob { min-height: 44px; padding: 0 20px; font-size: 15px; }
.wti-note { display: flex; align-items: center; gap: 10px; margin: 18px 0 0 !important; } .wti-note img { width: 20px; }
/* cơ sở vật chất + giảng viên */
.wti-gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .wti-gal figure { margin: 0; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.wti-gal img { width: 100%; aspect-ratio: 1.5; object-fit: cover; display: block; } .wti-gal figcaption { padding: 18px 22px 22px; font-size: 16px; } .wti-gal figcaption b { display: block; color: var(--tc); font-size: 20px; margin-bottom: 4px; }
.wti-tg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 26px; } .wti-tg > div { background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; padding-bottom: 20px; }
.wti-tg img { width: 100%; aspect-ratio: 1 / 1.05; object-fit: cover; object-position: top; display: block; margin-bottom: 14px; } .wti-tg b { display: block; padding: 0 20px; font-size: 19px; color: var(--tc); } .wti-tg span { display: block; padding: 0 20px; color: var(--c1); font-size: 15.5px; margin-top: 4px; }
/* bài viết */
.wtp { padding: 30px 0 0; } .wtp-t { font: 800 46px/1.22 var(--hf) !important; margin: 0 0 18px; max-width: 1000px; }
.wtp-m { display: flex; flex-wrap: wrap; gap: 30px; font-size: 15.5px; color: #6b7894; margin-bottom: 28px; } .wtp-m span { display: inline-flex; align-items: center; gap: 8px; } .wtp-m img { width: 18px; opacity: .7; }
.wtp-hero { width: 100%; aspect-ratio: 1320 / 520; object-fit: cover; object-position: center 35%; border-radius: 8px; display: block; margin-bottom: 40px; }
.wtp-g { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: start; padding-bottom: 60px; }
.wtp-lead { font-size: 18.5px !important; color: var(--tc); }
.wtp-toc { border: 1px solid var(--line); border-radius: 8px; padding: 24px 28px; margin: 26px 0 34px; } .wtp-toc h3 { font: 800 22px var(--hf) !important; margin: 0 0 16px; border-left: 4px solid var(--c1); padding-left: 14px; }
.wtp-toc ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .wtp-toc li { margin: 0; }
.wtp-toc a { display: flex; gap: 14px; border: 1px solid var(--line); border-radius: 6px; padding: 12px 16px; color: var(--tc) !important; font-size: 16px; } .wtp-toc a b { color: var(--c1); }
.wtp-b h2 { font: 800 30px/1.3 var(--hf) !important; margin: 36px 0 16px; border-left: 5px solid var(--c1); padding-left: 16px; scroll-margin-top: 110px; }
.wtp-b p, .wtp-b li { font-size: 17.5px; line-height: 1.7; } .wtp-b a { color: var(--c1); font-weight: 600; }
.wtp-ck { list-style: none; margin: 0 0 20px; padding: 0; } .wtp-ck li { position: relative; padding-left: 22px; margin-bottom: 8px; } .wtp-ck li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 7px; height: 7px; border-radius: 50%; background: var(--c1); }
.wtp-note { background: #eaf1fb; border-left: 4px solid var(--c1); border-radius: 6px; padding: 16px 20px; margin: 20px 0; font-size: 16.5px; } .wtp-note b { color: var(--c1); }
.wtp-fig { margin: 28px 0; } .wtp-fig img { width: 100%; aspect-ratio: 1.6; object-fit: cover; border-radius: 8px; display: block; } .wtp-fig figcaption { font-size: 15px; color: #6b7894; margin-top: 10px; }
.wtp-steps { display: grid; gap: 18px; margin: 18px 0 24px; } .wtp-steps > div { display: flex; gap: 18px; align-items: center; }
.wtp-foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid var(--line); margin-top: 36px; padding-top: 22px; flex-wrap: wrap; }
.wtp-cat { display: inline-flex; align-items: center; gap: 8px; color: var(--c1) !important; font-weight: 600; } .wtp-cat img { width: 18px; }
.wtp-share { display: flex; align-items: center; gap: 12px; font-size: 15px; } .wtp-share img { width: 36px; height: 36px; object-fit: contain; }
.wtp-s { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 110px; }
.wtp-bx { border: 1px solid var(--line); border-radius: 8px; padding: 26px; background: #fff; } .wtp-bx h3 { font: 800 22px var(--hf) !important; margin: 0 0 16px; }
.wtp-fbx { background: var(--tc); border: 0; } .wtp-fbx h3 { color: #fff !important; text-transform: uppercase; } .wtp-fbx > p { color: #dde5f5; font-size: 15.5px !important; margin: -6px 0 16px; }
.wtp-sf { display: grid; gap: 12px; margin: 0; } .wtp-sf label { height: 52px; } .wtp-sf input, .wtp-sf select { height: 48px; font-size: 15.5px; } .wtp-sf button { min-height: 54px; font-size: 16px; padding: 0 20px; } .wtp-sf .b9-form-msg { color: #fff; font-size: 14px; }
a.wtp-tel { display: inline-flex; align-items: center; gap: 10px; color: #fff !important; font: 800 20px var(--hf); margin: 16px 0 8px; } a.wtp-tel img { width: 20px; }
.wtp-fbx small { display: flex; align-items: center; gap: 8px; color: #c8d3ea; font-size: 14px; } .wtp-fbx small img { width: 14px; filter: brightness(3); }
a.wtp-pp { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: start; padding: 12px 0; color: var(--tc) !important; } a.wtp-pp + a.wtp-pp { border-top: 1px solid var(--line); }
a.wtp-pp > img { width: 96px; height: 72px; object-fit: cover; border-radius: 6px; } a.wtp-pp u img { width: 15px; height: auto; } a.wtp-pp b { display: block; font-size: 16px; line-height: 1.4; margin-bottom: 6px; }
.wtp-cl a { display: flex; justify-content: space-between; align-items: center; padding: 13px 0; color: var(--tc) !important; font-size: 16.5px; } .wtp-cl a + a { border-top: 1px solid var(--line); } .wtp-cl a img { width: 14px; }
.wtp-promo { background: #f3f6fa; } .wtp-promo > img { width: 64px; height: 64px; object-fit: contain; } .wtp-promo h3 { margin: 12px 0 6px; } .wtp-promo p { margin: 0 0 8px; font-size: 16px; } .wtp-pl b { color: var(--c1); } .wtp-promo .wtp-ob { width: 100%; margin-top: 10px; }
.wtp-relbg { background: #f3f6fa; padding: 56px 0; } .wtp-rh { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 26px; } .wtp-rh h2 { margin: 0; }
@media (max-width: 849px) {
 .wti-band { padding: 20px 0 30px; } .wti-h1, .wti-chero .wti-h1 { font-size: 32px !important; } .wti-sub { font-size: 17px !important; } .wti-sec { padding: 40px 0; }
 .wti-h2, .wti-hd h2, .wti-story h2, .wti-fq h2, .wti-ci h2, .wti-cf h2, .wtp-rh h2, .wti-reg h2, .wti-cta h2 { font-size: 27px !important; }
 .wti-story, .wti-story.wti-rev, .wti-ct, .wti-visit, .wti-fq, .wti-feat, .wti-chero .wti-w, .wti-cm, .wtp-g { grid-template-columns: 1fr; gap: 26px; }
 .wti-story.wti-rev > img { order: -1; }
 .wti-vm, .wti-g3, .wti-pg, .wti-crs, .wti-gal, .wti-stg, .wti-rf, .wti-r2 { grid-template-columns: 1fr; } .wti-ft4, .wti-tg { grid-template-columns: 1fr 1fr; gap: 14px; }
 .wti-ft4 > div, .wti-vm > div { padding: 22px 18px; } .wti-vm b, .wti-ft4 b { font-size: 19px; } .wti-ft4 p { font-size: 15px; }
 .wti-cm-l > div { grid-template-columns: 26px 1fr; } .wti-cm-l span { grid-column: 2; } .wti-cm-big b { font-size: 30px; }
 .wti-hd { flex-direction: column; align-items: flex-start; } .wti-cta .wti-w { flex-direction: column; align-items: flex-start; } .wti-cta-r { align-items: flex-start; }
 .wti-feat > div { padding: 24px; } .wti-feat b { font-size: 24px; } .wti-search { width: 100%; }
 .wti-cf { padding: 24px 18px; } .wti-ic { padding: 18px; gap: 16px; } .wti-ic > span { width: 60px; height: 60px; } .wti-ic b { font-size: 17px; } .wti-ich b { font-size: 22px; }
 .wti-tr { grid-template-columns: 1fr 1fr; padding: 16px 18px; gap: 6px 14px; } .wti-th { display: none; } .wti-tr span:first-child { grid-column: 1 / -1; }
 .wti-info, .wtp-info { grid-template-columns: 1fr; } .wti-info > div + div, .wtp-info > div + div { border-left: 0; border-top: 1px solid var(--line); }
 .wtp-t { font-size: 29px !important; } .wtp-hero { aspect-ratio: 1.5; margin-bottom: 26px; } .wtp-toc ol { grid-template-columns: 1fr; } .wtp-b h2 { font-size: 23px !important; } .wtp-s { position: static; }
 .wti-mapf, .wti-visit img { min-height: 260px; }
}
/* ===== webtuyensinh: theo mockup about/blog/contact/post (navy #0f3d8c + vàng #ffc61a) ===== */
.wti, .wtp { --yl: #ffc61a; --bd: #e1e8f3; }
.wti-band { background: #f2f5fa; padding: 34px 0 44px; border-bottom: 0; }
.wti-band .wti-h1::before { display: none !important; }
.wti-cen { text-align: center; padding: 30px 0 36px; background: #fff; } .wti-cen .wti-sub { margin: 0 auto; } .wti-cen .wti-h1 { font-size: 46px !important; }
.wti-ln .wti-h1::after { content: ""; display: block; width: 64px; height: 5px; background: var(--yl); margin-top: 16px; border-radius: 2px; }
.wti-h1 { font-size: 58px !important; }
.wti-kk { color: var(--c1); }
.wti-pt0 { padding-top: 10px; }
a.wti-yb, a.wtp-yb { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 34px; border-radius: 6px; background: var(--yl); color: #12306b !important; font: 700 17px var(--bf); }
a.wti-wb, a.wtp-wb { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 34px; border-radius: 6px; border: 1.5px solid #fff; color: #fff !important; font: 700 17px var(--bf); } a.wti-wb img, a.wtp-wb img { width: 16px; }
.wti-ob, .wtp-ob { border-color: var(--c1); color: var(--c1) !important; }
.wti-ctr .wti-vm > div, .wti-ctr .wti-ft4 > div { text-align: center; } .wti-ctr .wti-vm img, .wti-ctr .wti-ft4 img { margin: 0 auto 16px; }
.wti-vm b, .wti-ft4 b { color: var(--c1); }
.wti-wide { aspect-ratio: 1440 / 430; }
/* môi trường học tập: 6 ô ảnh + nhãn */
.wti-env { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .wti-env figure { margin: 0; border: 1px solid var(--bd); border-radius: 6px; overflow: hidden; background: #fff; }
.wti-env img { width: 100%; aspect-ratio: 1.85; object-fit: cover; display: block; } .wti-env figcaption { padding: 14px 18px; font: 700 18px var(--hf); color: var(--c1); }
/* CTA xanh */
.wti-cta { background: #0f3d8c; padding: 46px 0; } .wti-cta h2 { font-size: 38px !important; } .wti-cta p { color: #dbe6f7 !important; margin: 0 0 14px !important; font-size: 18px; }
.wti-cta-r { flex-direction: row; gap: 16px; } a.wti-hl { font: 700 21px var(--hf); color: #fff !important; } a.wti-hl img { width: 20px; }
/* liên hệ */
.wti-cf h2 { font-size: 34px !important; } .wti-fb button, .wti-rf button, .wtp-sf button { background: var(--yl) !important; color: #12306b !important; } .wti-fb button img { width: 16px; }
.wti-fb { display: grid; gap: 14px; } .wti-fb button { width: 100%; justify-content: center; } .wti-fb small { justify-content: center; }
.wti-ci h2 { font-size: 36px !important; margin: 0; } .wti-ci-s { margin: -8px 0 4px !important; font-size: 17px !important; }
.wti-ic { padding: 20px 24px; } .wti-ic > span { width: 64px; height: 64px; background: #eaf1fb; } .wti-ic > span img { width: 40px; height: 40px; } .wti-ic b { color: var(--c1); font-size: 20px; }
.wti-faq summary { justify-content: space-between; font-size: 18.5px; color: var(--c1); } .wti-faq summary::before { display: none; } .wti-faq summary::after { content: "+"; font-size: 26px; font-weight: 400; color: var(--c1); flex: none; } .wti-faq details[open] summary::after { content: "−"; }
.wti-faq details { background: #fff; border: 1px solid var(--bd); border-radius: 6px; padding: 18px 22px; margin-bottom: 12px; } .wti-faq details p { margin: 10px 0 0; }
/* tin tức */
.wti-feat { grid-template-columns: 1.4fr 1fr; background: #f2f5fa; border: 0; } .wti-feat b { color: var(--c1); }
.wti-feat u { text-decoration: none; color: var(--c1); font-weight: 700; display: inline-flex; gap: 8px; align-items: center; } .wti-feat u img { width: 16px; }
.wti-feat em, .wti-pg em, .wti-cc em { text-transform: uppercase; font-size: 13.5px; letter-spacing: .03em; }
.wti-chips button.on { background: var(--c1); } .wti-search { border-color: #c9d2e2; }
.wti-pg b { color: var(--c1); } .wti-pg p { font-size: 15.5px !important; margin: 0 0 14px; } .wti-pf { display: flex; justify-content: space-between; align-items: center; margin-top: auto; gap: 10px; } .wti-pf em { color: #6b7894 !important; text-transform: none !important; font-weight: 500 !important; }
/* tuyển sinh / ngành */
.wti-ckl li { position: relative; padding-left: 30px; display: block; } .wti-ckl li::before { content: ""; position: absolute; left: 0; top: .35em; width: 16px; height: 16px; border-radius: 50%; background: var(--yl); box-shadow: inset 0 0 0 4px #fff, 0 0 0 2px var(--c1); }
.wti-stg > div { border-top-color: var(--yl); } .wti-stg span { color: var(--c1); }
.wti-tags, .wtp-tags { display: flex; flex-wrap: wrap; gap: 12px; } .wti-tags a { padding: 14px 24px; border: 1.5px solid var(--c1); border-radius: 6px; color: var(--c1) !important; font: 600 17px var(--bf); background: #fff; }
.wti-cc { scroll-margin-top: 120px; } .wti-cc h3 { color: var(--c1) !important; } .wti-cc > div > p:not(.wti-meta) { font-size: 16.5px; margin: 0 0 12px; } .wti-cc li { display: block; position: relative; padding-left: 18px; font-size: 15.5px; margin-bottom: 6px; } .wti-cc li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--c1); }
.wti-cc > img { aspect-ratio: 1.45; }
.wti-gal4 { grid-template-columns: repeat(4, 1fr); gap: 20px; }
.wti-reg { background: #0f3d8c; } .wti-rf { grid-template-columns: 1fr 1fr 1fr auto; } .wti-rf input, .wti-rf select { height: 58px; border: 0; border-radius: 6px; padding: 0 16px; font-size: 16px; background: #fff; margin: 0; box-shadow: none; }
/* bài viết */
.wtp { padding: 26px 0 0; } .wtp-g { grid-template-columns: minmax(0, 1fr) 360px; gap: 44px; padding-bottom: 56px; }
.wtp-bc { font-size: 14.5px; } .wtp-bc .on { color: var(--c1); }
.wtp-kick { font-size: 14px; } .wtp-t { font-size: 44px !important; color: var(--c1) !important; }
.wtp-m { gap: 22px; margin-bottom: 14px; } .wtp-lead { margin: 0 0 20px; }
.wtp-hf { margin: 0 0 24px; } .wtp-hero { aspect-ratio: 1.6; margin: 0; }
.wtp-toc { background: #f2f5fa; border: 0; } .wtp-toc h3 { border: 0; padding: 0; color: var(--c1) !important; } .wtp-toc ol { grid-template-columns: 1fr; gap: 8px; }
.wtp-toc a { border: 0; padding: 4px 0; } .wtp-toc a b { width: 26px; height: 26px; border-radius: 50%; background: var(--c1); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex: none; }
.wtp-b h2 { border: 0; padding: 0; color: var(--c1) !important; }
.wtp-note { background: #fff8e1; border-left-color: var(--yl); } .wtp-note b { color: #12306b; }
.wtp-tags { margin: 30px 0 16px; } .wtp-tags a { background: #f2f5fa; border-radius: 4px; padding: 8px 14px; font-size: 14.5px; color: var(--c1) !important; }
.wtp-share { display: flex; align-items: center; gap: 12px; } .wtp-share a { width: 40px; height: 40px; border-radius: 50%; background: #0f3d8c; display: inline-flex; align-items: center; justify-content: center; } .wtp-share img { width: 20px !important; height: 20px !important; }
.wtp-promo { background: #0f3d8c; border: 0; color: #fff; } .wtp-promo > img { width: 100%; height: auto; aspect-ratio: 1.6; object-fit: cover; border-radius: 6px; margin-bottom: 14px; }
.wtp-promo h3 { color: #fff !important; font-size: 22px !important; margin: 0 0 8px; } .wtp-promo p { color: #dbe6f7; font-size: 15.5px; margin: 0 0 16px; } .wtp-promo a { width: 100%; min-height: 50px; font-size: 16px; } .wtp-promo a + a { margin-top: 10px; }
.wtp-fbx { background: #fff; border: 1px solid var(--bd); } .wtp-fbx h3 { color: var(--c1) !important; text-transform: none; } .wtp-fbx > p { color: var(--tx); }
.wtp-sf input, .wtp-sf select { height: 48px; border: 1px solid #d5dfef !important; border-radius: 4px; padding: 0 12px !important; background: #fff; }
.wtp-fbx small { color: #6b7894; } .wtp-fbx small img { filter: none; }
a.wtp-pp { grid-template-columns: 96px 1fr; align-items: center; } a.wtp-pp b { color: var(--c1); font-size: 15.5px; margin: 0; }
.wtp-cl a.on { background: #eaf1fb; padding-left: 10px; padding-right: 10px; border-radius: 4px; } .wtp-cl a img { width: 12px; transform: rotate(-90deg); }
.wtp-relbg { background: #f2f5fa; }
@media (max-width: 849px) {
 .wti-h1, .wti-cen .wti-h1 { font-size: 32px !important; } .wti-env, .wti-gal4 { grid-template-columns: 1fr 1fr; gap: 12px; } .wti-env figcaption { font-size: 15px; padding: 10px 12px; }
 .wti-cta-r { flex-direction: column; align-items: stretch; width: 100%; } .wti-cta h2 { font-size: 26px !important; } a.wti-yb, a.wti-wb { width: 100%; }
 .wti-rf { grid-template-columns: 1fr; } .wti-tags a { padding: 10px 14px; font-size: 15px; } .wtp-t { font-size: 28px !important; } .wtp-g { grid-template-columns: 1fr; }
}
.wti-crs4 { grid-template-columns: repeat(4, 1fr); gap: 20px; } .wti-crs4 .wti-cc > div { padding: 20px 20px 22px; } .wti-crs4 .wti-cc h3 { font-size: 22px !important; } .wti-crs4 .wti-meta { flex-direction: column; gap: 2px; }
.wtp-fig img { aspect-ratio: 2 / 1; } .wtp-hero { aspect-ratio: 1.75; }
.wti-cta-r { flex: none; } a.wti-yb, a.wti-wb { white-space: nowrap; }
.wti-vm img, .wti-ft4 img { width: 84px; height: 84px; } .wti-vm b, .wti-ft4 b { font-size: 24px; } .wti-sec { padding: 56px 0; }
@media (max-width: 849px) { .wti-crs4 { grid-template-columns: 1fr; } .wti-vm img, .wti-ft4 img { width: 60px; height: 60px; } .wti-sec { padding: 38px 0; } }
.wti-cta { padding: 32px 0; } .wti-cta h2 { margin-bottom: 6px !important; } .wti-cta p { margin-bottom: 10px !important; }
form.wti-cf { margin: 0 !important; } .wti-ct { align-items: stretch; }
.wti-sec:has(.wti-ct) { padding-bottom: 30px; }