.jb-hero { padding: 70px 0; }
.jb-hero .tb-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,440px),1fr)); gap: 48px; align-items: center; }
.jb-hero-text { display: flex; flex-direction: column; gap: 20px; }
.jb-hero .jb-kicker { font-size: 18px; line-height: normal; text-wrap: wrap; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .06em; }
.jb-hero h1 { font-size: clamp(34px,4.4vw,56px); line-height: 1.1; font-weight: 700; color: #111; }
.jb-hero h1 span { color: var(--primary); }
.jb-hero p { font-size: 18px; line-height: 1.6; color: var(--text); text-wrap: pretty; }
.jb-hero-cta { white-space: nowrap; align-self: flex-start; height: 52px; padding: 0 28px; border-radius: 12px; background: var(--accent); color: #fff; font-weight: 700; font-size: 14px; text-transform: uppercase; display: flex; align-items: center; }
.jb-hero-cta:hover { background: var(--primary); color: #fff; }
.jb-hero-img { width: 100%; height: auto; display: block; border-radius: 19px; }

.jb-stats { background: var(--ink); padding: 40px 0; color: #fff; }
.jb-stats .tb-container { display: flex; flex-direction: column; gap: 40px; }
.jb-stats h2 { text-align: center; font-size: 35px; line-height: 1.4; font-weight: 700; color: #fff; }
.jb-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,240px),1fr)); gap: 30px; }
.jb-stat { text-align: center; }
.jb-stat .jb-stat-num { font-size: 40px; line-height: 1.4; font-weight: 700; color: #fff; }
.jb-stat p { margin-top: 10px; font-size: 20px; line-height: 1.1; font-weight: 700; color: #fff; }

.jb-list { padding: 70px 0; background: var(--page-alt); }
.jb-list .tb-container { display: flex; flex-direction: column; gap: 36px; }
.jb-list > .tb-container > h2 { text-align: center; font-size: clamp(28px,3vw,35px); font-weight: 700; color: var(--text); }
.jb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,300px),1fr)); gap: 24px; }
.jb-card { background: #fff; border-radius: 16px; padding: 26px; box-shadow: 0 2px 8px rgba(0,0,0,.08); display: flex; flex-direction: column; gap: 14px; transition: transform .3s, box-shadow .3s; }
.jb-card:hover { transform: translateY(-6px); box-shadow: 0 14px 32px rgba(17,17,17,.12); }
.jb-card h3 { font-size: 22px; font-weight: 700; color: var(--primary); line-height: 1.3; }
.jb-card h3 a { color: inherit; }
.jb-card h3 a:hover { color: var(--accent); }
.jb-tag { align-self: flex-start; font-size: 14px; font-weight: 600; color: var(--accent-text); background: var(--accent-tint); border-radius: 4px; padding: 5px 10px; }
.jb-card > p { font-size: 15px; line-height: 1.5; color: var(--body); }
.jb-meta { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.jb-meta dt { font-size: 13px; color: var(--muted); }
.jb-meta dd { font-size: 16px; font-weight: 700; color: #111; margin: 4px 0 0; }
.jb-apply { white-space: nowrap; margin-top: auto; height: 46px; border: 0; border-radius: 8px; background: var(--primary); color: #fff; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; }
.jb-apply:hover { background: var(--accent); }

.jb-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 200; }
.jb-modal { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(520px,92vw); max-height: 92vh; overflow-y: auto; background: #fff; border-radius: 16px; padding: 28px; z-index: 201; display: flex; flex-direction: column; gap: 14px; }
.jb-modal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.jb-modal-head h3 { font-size: 20px; font-weight: 700; color: #111; }
.jb-close { border: 0; background: transparent; font-size: 26px; cursor: pointer; color: var(--text); }
.jb-modal label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; color: var(--text); }
.jb-modal input:not([type=file]) { height: 44px; border: 1px solid var(--input-border); border-radius: 8px; padding: 0 12px; font: inherit; }
.jb-modal input[type=file] { font: inherit; font-size: 14px; }
.jb-submit { white-space: nowrap; height: 46px; border: 0; border-radius: 8px; background: var(--accent); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.jb-sent { font-size: 14px; color: var(--primary); }
.jb-error { font-size: 13px; font-weight: 400; color: #d92d20; }
.jb-empty { text-align: center; font-size: 16px; color: var(--body); }
.jb-more { align-self: flex-start; border: 0; background: none; padding: 0; font: inherit; font-size: 14px; font-weight: 600; color: var(--accent-text); cursor: pointer; text-decoration: underline; }
.jb-detail { font-size: 15px; line-height: 1.6; color: var(--body); }
.jb-detail ul, .jb-detail ol { padding-left: 20px; margin: 6px 0; }
.jb-detail ul { list-style: disc; }
.jb-detail ol { list-style: decimal; }
.jb-detail p { margin: 6px 0; }
/* Rich text from CKEditor: images, tables, headings stay inside the modal. */
.jb-detail h2, .jb-detail h3, .jb-detail h4 { color: #111; font-weight: 700; line-height: 1.3; margin: 14px 0 6px; }
.jb-detail h2 { font-size: 20px; }
.jb-detail h3 { font-size: 18px; }
.jb-detail h4 { font-size: 16px; }
.jb-detail a { color: var(--primary); text-decoration: underline; }
.jb-detail img { max-width: 100%; height: auto; }
.jb-detail img[style*="float:left"], .jb-detail img[style*="float: left"] { margin: 4px 14px 8px 0; }
.jb-detail img[style*="float:right"], .jb-detail img[style*="float: right"] { margin: 4px 0 8px 14px; }
.jb-detail iframe { max-width: 100%; border: 0; }
.jb-detail table { border-collapse: collapse; max-width: 100%; display: block; overflow-x: auto; margin: 8px 0; }
.jb-detail th, .jb-detail td { border: 1px solid #ddd; padding: 6px 10px; text-align: left; vertical-align: top; }
.jb-detail::after { content: ""; display: table; clear: both; }
.jb-submit:disabled { opacity: .65; cursor: wait; }
.jb-sent-flash { text-align: center; }
.jb-meta.jb-meta-plain { border-top: 0; padding-top: 0; }

/* Hero text = rich text from "Nội dung trang" (CKEditor): <p>s keep the rules above; lists, links, images */
.jb-hero-text :is(ul, ol) { font-size: 18px; line-height: 1.6; color: var(--text); padding-left: 1.4em; }
.jb-hero-text ul { list-style: disc; }
.jb-hero-text li + li { margin-top: 4px; }
.jb-hero-text :is(p, li) a { text-decoration: underline; }
.jb-hero-text :is(p, li) img, .jb-hero-text > img, .jb-hero-text > .tb-rt > img { height: auto; border-radius: 8px; }