/* Trịnh Chí Cường · bản mẫu 2 (25/10/2026)
   Bố cục bám tinh thần simonsinek.com: thanh nhỏ trên cùng, đầu trang chữ lớn + chân dung, "Vì sao" xếp bậc,
   ba thẻ có ảnh, thư + câu trích, lưới video, lưới bài viết. Nền trắng sạch, dải ngà nhẹ, hoa văn hồi văn mờ.
   Một giao diện sáng duy nhất (chọn có chủ ý), mọi màu khai báo rõ. Cam lấy từ logo Trịnh Chí Cường Academy. */
:root {
  color-scheme: light;
  --trang: #FFFFFF;
  --nga: #F5F1E6;
  --nga-dam: #ECE5D4;
  --than: #2B2124;
  --than-nhat: #6B6165;
  --cam: #FF5100;
  --cam-chu: #D2440A;
  --vien: #E7E0D0;
  --toi: #231C1E;

  --f-tieu-de: "Noto Serif Display", "Noto Serif", Georgia, "Times New Roman", serif;
  --f-than: "Be Vietnam Pro", "Helvetica Neue", Arial, sans-serif;

  --rong: 1180px;
  --doc: 680px;

  --hoi-van: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M0 15H16M2 15V1H14V11H6V5H10V8' fill='none' stroke='%23FF5100' stroke-width='1.1'/%3E%3C/svg%3E");
  --hoi-van-mo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M4 52V4H52V40H16V16H40V28H28' fill='none' stroke='%232B2124' stroke-opacity='.06' stroke-width='1.2'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--trang); color: var(--than); font-family: var(--f-than); font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--cam); outline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }

.wrap { max-width: var(--rong); margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

h1, h2, h3 { font-family: var(--f-tieu-de); font-weight: 400; line-height: 1.15; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.5rem, 5.6vw, 4.3rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); }
h3 { font-size: 1.45rem; }
p { margin: 0; }
.nhan { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cam-chu); }
.nhat { color: var(--than-nhat); }

/* Viền hoa văn */
.vien-hoa { height: 16px; background: var(--hoi-van) repeat-x left center; opacity: .55; }

/* Dải bản mẫu */
.ban-mau { background: var(--toi); color: #F5F1E6; font-size: 0.8rem; text-align: center; }
.ban-mau .wrap { padding-block: 7px; }

/* Thanh nhỏ trên cùng (như For You / For Business) */
.tren { background: var(--nga); font-size: 0.82rem; }
.tren .wrap { display: flex; gap: 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.tren a { text-decoration: none; padding: 8px 16px; color: var(--than-nhat); white-space: nowrap; flex: none; }
.tren a.dang { background: var(--trang); color: var(--cam-chu); font-weight: 500; }

/* Đầu trang */
.dau { background: var(--trang); border-bottom: 1px solid var(--vien); }
.dau .wrap { display: flex; align-items: center; justify-content: space-between; gap: 14px 28px; flex-wrap: wrap; padding-block: 14px; }
.logo img { width: 190px; height: auto; }
.menu { display: flex; gap: 4px 24px; flex-wrap: wrap; align-items: center; font-size: 0.95rem; }
.menu a { text-decoration: none; padding-block: 4px; border-bottom: 1.5px solid transparent; }
.menu a:hover, .menu a[aria-current="page"] { border-bottom-color: var(--cam); }
.menu .tham-gia { color: var(--cam-chu); font-weight: 600; }

/* Nút */
.nut-hang { display: flex; gap: 12px; flex-wrap: wrap; }
.nut { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; border-radius: 999px; font: 600 0.95rem var(--f-than); text-decoration: none; cursor: pointer; background: var(--cam-chu); color: #FFFFFF; border: 1px solid var(--cam-chu); }
.nut:hover { background: var(--than); border-color: var(--than); }
.nut-rong { background: transparent; color: var(--than); border-color: var(--than); }
.nut-rong:hover { background: var(--than); color: #FFFFFF; }

/* Khối */
.khoi .wrap { padding-block: clamp(60px, 9vw, 112px); }
.khoi-nga { background: var(--nga); }
.dau-khoi { display: grid; gap: 12px; margin-bottom: clamp(32px, 5vw, 52px); max-width: 780px; }
.dau-khoi-ngang { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: clamp(32px, 5vw, 52px); }
.dau-khoi-ngang > div { display: grid; gap: 12px; }

/* Đầu trang chủ */
.mo { background: var(--trang) var(--hoi-van-mo); }
.mo .wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 40px 64px; align-items: center; padding-block: clamp(48px, 7vw, 88px); }
.mo-chu { display: grid; gap: 26px; }
.mo-chu p.mo-ta { font-size: 1.15rem; max-width: 560px; color: var(--than-nhat); }
.khung-anh { position: relative; max-width: 440px; justify-self: end; width: 100%; }
.khung-anh::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; border: 1.5px solid var(--cam); border-radius: 220px 220px 8px 8px; }
.khung-anh img { position: relative; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 22%; border-radius: 220px 220px 8px 8px; background: var(--nga-dam); }
.chu-anh { position: relative; margin-top: 28px; font-size: 0.85rem; color: var(--than-nhat); }

/* Vì sao */
.vi-sao { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 32px; align-items: center; }
.vi-sao-nhan { font-family: var(--f-tieu-de); font-size: 1.6rem; margin-bottom: 10px; }
.bac { font-family: var(--f-tieu-de); font-size: clamp(1.6rem, 3.6vw, 2.7rem); line-height: 1.28; }
.bac span { display: block; }
.bac span:nth-child(1) { color: var(--cam-chu); }
.bac span:nth-child(2) { padding-left: 1.2em; }
.bac span:nth-child(3) { padding-left: 2.4em; }
.bac span:nth-child(4) { padding-left: 3.6em; }
.dau-trien { width: 170px; height: 170px; border: 1.5px solid var(--cam); display: grid; place-items: center; text-align: center; padding: 14px; background: var(--trang) var(--hoi-van-mo); }
.dau-trien b { font-family: var(--f-tieu-de); font-weight: 400; font-size: 1.15rem; line-height: 1.5; color: var(--cam-chu); }

/* Ba thẻ có ảnh */
.the-hang { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.the { background: var(--trang); border: 1px solid var(--vien); border-top: 3px solid var(--cam); border-radius: 6px; overflow: hidden; display: grid; grid-template-rows: auto 1fr; text-decoration: none; }
.the img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.the-than { padding: 24px; display: grid; gap: 10px; align-content: start; }
.the-than .xem { font-size: 0.92rem; font-weight: 600; color: var(--cam-chu); margin-top: 4px; }
.the:hover { border-color: var(--than); border-top-color: var(--cam); }

/* Thư + câu trích */
.thu { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 72px; align-items: center; }
.thu-trai { display: grid; gap: 16px; }
.thu form { display: grid; gap: 12px; }
.o-nhap { display: flex; gap: 10px; flex-wrap: wrap; }
.o-nhap input { flex: 1 1 220px; min-width: 0; padding: 13px 18px; border-radius: 6px; border: 1px solid var(--vien); background: var(--nga); color: var(--than); font: inherit; font-size: 0.95rem; }
.o-chon { display: flex; gap: 10px; align-items: flex-start; font-size: 0.88rem; color: var(--than-nhat); }
.o-chon input { accent-color: var(--cam-chu); margin-top: 5px; }
.bao-form { font-size: 0.85rem; color: var(--cam-chu); min-height: 1.4em; }
.trich { margin: 0; display: grid; gap: 20px; }
.trich blockquote { margin: 0; font-family: var(--f-tieu-de); font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.28; text-wrap: balance; }
.trich figcaption { font-size: 0.9rem; color: var(--than-nhat); display: grid; gap: 10px; }
.trich figcaption::before { content: ""; width: 120px; border-top: 1.5px dashed var(--cam); }

/* Dải ảnh hành trình */
.dai-anh { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 14px; }
.dai-anh figure { margin: 0; display: grid; gap: 8px; }
.dai-anh img { width: 100%; height: 280px; object-fit: cover; border-radius: 6px; }
.dai-anh figcaption { font-size: 0.82rem; color: var(--than-nhat); }
.hanh-trinh { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 32px 64px; margin-bottom: 40px; align-items: end; }
.so-moc { display: flex; gap: 12px 40px; flex-wrap: wrap; }
.so-moc div { display: grid; }
.so-moc b { font-family: var(--f-tieu-de); font-weight: 400; font-size: 2.6rem; line-height: 1.1; color: var(--cam-chu); }
.so-moc span { font-size: 0.85rem; color: var(--than-nhat); }

/* Lưới video */
.video-luoi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.video { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px; align-items: center; background: var(--trang); border: 1px solid var(--vien); border-radius: 6px; padding: 14px; text-decoration: none; }
.video img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; }
.video div { display: grid; gap: 6px; min-width: 0; }
.video .nhan { font-size: 0.7rem; }
.video h3 { font-family: var(--f-than); font-weight: 600; font-size: 1rem; line-height: 1.4; }
.video .xem { font-size: 0.85rem; color: var(--cam-chu); font-weight: 600; }
.video:hover { border-color: var(--than); }

/* Lưới bài viết */
.bai-luoi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.bai { display: grid; gap: 12px; align-content: start; text-decoration: none; }
.bai img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; }
.bai h3 { font-size: 1.35rem; }
.bai:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.bai p { color: var(--than-nhat); font-size: 0.95rem; }
.ngay { font-size: 0.8rem; color: var(--than-nhat); }
.chu-de { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cam-chu); }
.sap { font-size: 0.75rem; color: var(--than-nhat); border: 1px solid var(--vien); border-radius: 999px; padding: 2px 10px; justify-self: start; }

/* Báo chí */
.bao-chi { display: flex; flex-wrap: wrap; gap: 10px 40px; align-items: baseline; }
.bao-chi span { font-family: var(--f-tieu-de); font-size: 1.3rem; color: var(--than-nhat); }

/* Chân trang */
.chan { background: var(--nga); font-size: 0.92rem; }
.chan .wrap { padding-block: 52px 40px; display: grid; gap: 32px; }
.chan-luoi { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 28px; }
.chan-luoi > div { display: grid; gap: 10px; align-content: start; }
.chan-luoi ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.chan-luoi a { text-decoration: none; color: var(--than-nhat); }
.chan-luoi a:hover { color: var(--than); }
.chan-luoi .nhan { color: var(--than); }
.chan-cuoi { color: var(--than-nhat); font-size: 0.8rem; border-top: 1px solid var(--vien); padding-top: 20px; }

/* Trang con: đầu trang */
.mo-trang { background: var(--trang) var(--hoi-van-mo); }
.mo-trang .wrap { padding-block: clamp(48px, 7vw, 96px) clamp(36px, 5vw, 64px); display: grid; gap: 22px; }
.doc { max-width: var(--doc); }

/* Về Cường */
.ve-dau { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 40px 72px; align-items: center; }
.ve-dau img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 6px; }
.ve-dau blockquote { margin: 0; font-family: var(--f-tieu-de); font-size: clamp(1.9rem, 4vw, 3.1rem); line-height: 1.22; text-wrap: balance; }
.tieu-su { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px; }
.tieu-su p { font-size: 1.05rem; }
.moc { display: grid; gap: 0; }
.moc-dong { display: grid; grid-template-columns: 110px minmax(0, 1fr) 260px; gap: 12px 36px; padding-block: 28px; border-top: 1px solid var(--vien); align-items: start; }
.moc-dong:last-child { border-bottom: 1px solid var(--vien); }
.moc-nam { font-family: var(--f-tieu-de); font-size: 1.6rem; color: var(--cam-chu); line-height: 1.2; }
.moc-dong > div { display: grid; gap: 6px; }
.moc-dong p { color: var(--than-nhat); }
.moc-dong img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; }
.chan-dung-luoi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.chan-dung-luoi img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; object-position: 50% 15%; border-radius: 6px; background: var(--nga-dam); }
.danh-sach { display: grid; margin: 0; padding: 0; list-style: none; }
.danh-sach li { padding-block: 18px; border-top: 1px solid var(--vien); display: grid; gap: 4px; }
.danh-sach li:last-child { border-bottom: 1px solid var(--vien); }
.hai-cot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 64px; }
.hai-cot > div:first-child { display: grid; gap: 14px; align-content: start; }
.nguon { font-size: 0.8rem; color: var(--than-nhat); }
.the-ghi { font-size: 0.88rem; color: var(--than-nhat); border-left: 2px solid var(--cam); padding-left: 14px; }

/* Bài viết đầy đủ */
.bai-anh-dau { width: 100%; max-height: 520px; object-fit: cover; object-position: 50% 30%; border-radius: 6px; }
.bai-than { max-width: var(--doc); margin: 0 auto; display: grid; gap: 22px; font-size: 1.08rem; }
.bai-than h2 { font-size: 1.75rem; margin-top: 18px; }
.bai-than blockquote { margin: 8px 0; padding-left: 20px; border-left: 2px solid var(--cam); font-family: var(--f-tieu-de); font-size: 1.45rem; line-height: 1.45; }
.cong-thuc { background: var(--nga); border-radius: 6px; padding: 20px 22px; font-family: var(--f-tieu-de); font-size: 1.35rem; text-align: center; }
.cong-thuc span { color: var(--cam-chu); padding-inline: 0.2em; }
.bai-than ul { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }

/* Bộ lọc */
.loc { display: flex; flex-wrap: wrap; gap: 8px; }
.loc button { font: inherit; font-size: 0.9rem; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--vien); background: var(--trang); color: var(--than); cursor: pointer; }
.loc button[aria-pressed="true"] { background: var(--than); color: #FFFFFF; border-color: var(--than); }

/* Khoá học */
.khoa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; padding-block: 56px; border-top: 1px solid var(--vien); align-items: start; }
.khoa:first-child { border-top: 0; }
.khoa-chu { display: grid; gap: 16px; }
.khoa > img { width: 100%; aspect-ratio: 4 / 5; max-height: 620px; object-fit: cover; object-position: 50% 20%; border-radius: 6px; }
.the img, .bai img { object-position: 50% 20%; }
.thong-tin { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 20px; margin: 0; font-size: 0.95rem; }
.thong-tin dt { color: var(--than-nhat); }
.thong-tin dd { margin: 0; }
.buoc { list-style: none; margin: 0; padding: 0; display: grid; counter-reset: b; }
.buoc li { counter-increment: b; display: grid; grid-template-columns: 2.2em minmax(0, 1fr); padding-block: 9px; border-top: 1px solid var(--vien); font-size: 0.95rem; }
.buoc li::before { content: counter(b); font-family: var(--f-tieu-de); color: var(--cam-chu); font-size: 1.1rem; }
.mach-sau { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mach-sau span { background: var(--nga); border-radius: 6px; padding: 10px 12px; font-size: 0.92rem; text-align: center; }

@media (max-width: 900px) {
  .mo .wrap, .thu, .ve-dau, .hai-cot, .khoa, .hanh-trinh, .tieu-su { grid-template-columns: minmax(0, 1fr); }
  .khung-anh { justify-self: center; max-width: 360px; }
  .the-hang, .bai-luoi, .video-luoi { grid-template-columns: minmax(0, 1fr); }
  .vi-sao { grid-template-columns: minmax(0, 1fr); }
  .dau-trien { display: none; }
  .dai-anh { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dai-anh figure:first-child { grid-column: 1 / -1; }
  .dai-anh img { height: 200px; }
  .chan-luoi { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .chan-luoi > :first-child { grid-column: 1 / -1; }
  .moc-dong { grid-template-columns: minmax(0, 1fr); }
  .chan-dung-luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ve-dau img { max-width: 360px; }
  .bac span:nth-child(n) { padding-left: 0; }
}
@media (max-width: 520px) {
  .video { grid-template-columns: minmax(0, 1fr); }
  .mach-sau { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tren a { padding: 7px 10px; }
}

/* Bản mẫu 2.1: trang Doanh nghiệp, Thương Hội, Video */
.mo-hai { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 36px 64px; align-items: center; }
.mo-hai > div { display: grid; gap: 22px; }
.mo-hai img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.mo-hai figcaption, .anh-luoi figcaption { font-size: 0.82rem; color: var(--than-nhat); margin-top: 8px; }
.mo-hai figure, .anh-luoi figure { margin: 0; }
.buoc-lon { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; counter-reset: bl; border-top: 1.5px solid var(--than); }
.buoc-lon li { counter-increment: bl; padding: 22px 20px 8px 0; display: grid; gap: 8px; align-content: start; }
.buoc-lon li + li { padding-left: 20px; border-left: 1px solid var(--vien); }
.buoc-lon li::before { content: "0" counter(bl); font-family: var(--f-tieu-de); font-size: 2rem; color: var(--cam-chu); line-height: 1; }
.buoc-lon b { font-size: 1.02rem; }
.buoc-lon span { font-size: 0.92rem; color: var(--than-nhat); }
.anh-luoi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.anh-luoi img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.chu-de-luoi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
.chu-de-luoi div { padding-block: 22px; border-top: 1px solid var(--vien); display: grid; gap: 6px; align-content: start; }
.chu-de-luoi p { color: var(--than-nhat); font-size: 0.95rem; }
.o3-lich { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.o3-lich div { background: var(--trang); border: 1px solid var(--vien); border-radius: 6px; padding: 22px; display: grid; gap: 4px; }
.o3-lich b { font-family: var(--f-tieu-de); font-weight: 400; font-size: 1.8rem; color: var(--cam-chu); line-height: 1.2; }
.o3-lich span { font-size: 0.9rem; color: var(--than-nhat); }
.vid-luoi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; }
.vid { display: grid; gap: 10px; align-content: start; }
.vid video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 8px; background: var(--toi); display: block; }
.vid h3 { font-family: var(--f-than); font-weight: 600; font-size: 1.02rem; line-height: 1.4; }
.vid p { font-size: 0.9rem; color: var(--than-nhat); }
.vid a { font-size: 0.85rem; color: var(--cam-chu); font-weight: 600; text-decoration: none; }
.vid-luoi-nho { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.video-dai { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 48px; align-items: center; background: var(--trang); border: 1px solid var(--vien); border-radius: 6px; padding: 24px; }
.video-dai img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; }
.video-dai > div { display: grid; gap: 12px; }
@media (max-width: 900px) {
  .mo-hai, .video-dai { grid-template-columns: minmax(0, 1fr); }
  .buoc-lon { grid-template-columns: minmax(0, 1fr); }
  .buoc-lon li, .buoc-lon li + li { padding: 18px 0 10px; border-left: 0; border-bottom: 1px solid var(--vien); }
  .anh-luoi { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .chu-de-luoi, .o3-lich { grid-template-columns: minmax(0, 1fr); }
  .vid-luoi, .vid-luoi-nho { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}