/* * Màn hình danh sách seminar — mobile-first. * * CSS thuần, không framework, không build step: yêu cầu là copy nguyên thư mục * lên honban là chạy được. */ /* * Design token lấy TRỰC TIẾP từ CSS của honban * (seminar/css/ser.css, style-m.css, themes/jawhm.css, css/base_mobile.css) * để giao diện đồng nhất với phần còn lại của site. */ :root { --ink: #000000; /* base_mobile.css dùng đen tuyền, không phải xám */ --ink-soft: #666; --line: #d6d6d6; /* xám viền của honban */ --bg: #ffffff; /* honban nền trắng, không phải xám nhạt */ --navy: #262c6a; /* màu thương hiệu: .lv-title, .top-title */ --navy-edge: #62658c; /* viền trên 3px — nét nhận diện đặc trưng */ --navy-ink: #000034; /* chữ tiêu đề mục */ --accent: #fca84e; /* .btn-ser_m — nút đăng ký cam */ --box: #eeeeee; /* nền .lv-box */ --radius: 4px; /* .lv-box dùng 4px, không phải 10px */ } /* * KHÔNG dùng `*` toàn cục: trang này được chèn vào khung site chung * (include/header.php, menu.css, headhootg-nav.css…) — những file đó giả định * box-sizing mặc định (content-box) cho #header, #global-menu, sidebar… * Reset toàn cục sẽ làm lệch kích thước các khối đó dù ta không đụng vào chúng. * Chỉ scope vào phần nội dung + modal do trang này tự render. * * TRƯỚC ĐÂY scope là "#maincontent, #maincontent *" — #maincontent bao luôn * cả .sec-title (thanh tiêu đề xanh dùng chung toàn site, honban giả định * content-box: width 880px + padding 20px = 900px). Ép border-box lên nó làm * padding bị TRỪ VÀO 880px có sẵn, hụt mất 20px bên phải — lỗi masaki phát * hiện (2026-09-15, mục 13). Thu hẹp xuống đúng phần trang này tự vẽ: * .ns-page (nội dung + lịch + form), .ns-intro (đoạn giới thiệu đầu trang), * .modal (modal chi tiết/đặt chỗ JS tạo ra, gắn vào nên nằm ngoài * #maincontent). */ .ns-page, .ns-page *, .ns-intro, .ns-intro *, .modal, .modal * { box-sizing: border-box; } /* * KHÔNG đụng background của body: base.min.css đặt * `background-color:#fff; background-image:url(body-bg.jpg); background-repeat:repeat-x` * — dải ảnh navy lặp ngang đó chính là màu nền quanh header/banner/nav của * khung site chung. Set `background` (shorthand) ở đây sẽ xoá luôn ảnh nền * đó, làm mất dải navy — dùng #maincontent để giới hạn nền trắng vào đúng * phần nội dung seminar tự vẽ. */ body { margin: 0; color: var(--ink); /* Đúng stack của honban (css/base_mobile.css) */ font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 1.6; } #maincontent { background: var(--bg); } /* ---------- header ---------- */ /* * Viền trên 3px màu navy nhạt trên nền navy đậm là nét nhận diện đặc trưng * nhất của honban — xuất hiện trên mọi thanh tiêu đề (.lv-title, .top-title). */ .hd { background: var(--navy); border-top: 3px solid var(--navy-edge); color: #fff; padding: 12px 16px; } .hd__title { margin: 0; font-size: 16px; font-weight: 700; } /* ---------- dải ngày ---------- */ /* * Honban gom seminar theo ngày bằng h3.title-date — dải cyan #00FFFF, chữ đen. * Sao lại đúng màu đó để khớp bản mobile hiện hành. */ .date-band { list-style: none; background: #00ffff; border: 1px solid #00ffff; color: #000; font-size: 14px; font-weight: 700; padding: 7px 12px; margin-top: 6px; } .date-band:first-child { margin-top: 0; } .wrap { max-width: 720px; margin: 0 auto; padding: 16px; } /* * Bản PC của honban là khung cố định 970px. Từ tablet trở lên nới ra cho khớp, * dưới ngưỡng này giữ nguyên bố cục mobile một cột. */ @media (min-width: 768px) { .wrap { max-width: 970px; } .card__title { font-size: 15px; } /* Trên màn rộng, nút đăng ký không cần kéo hết chiều ngang */ .btn--apply { width: auto; min-width: 240px; margin-left: auto; } .card__cta { display: flex; justify-content: flex-end; } } /* ---------- bộ lọc ---------- */ .filter { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin-bottom: 18px; } .filter__row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; } .filter__row--end { align-items: center; margin-bottom: 0; } .filter__field { flex: 1 1 160px; display: flex; flex-direction: column; gap: 4px; } .filter__label { font-size: 12px; color: var(--ink-soft); } .filter__field input, .filter__field select { padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 15px; /* >=16px tránh iOS tự zoom; 15px + no-zoom meta là đủ */ background: #fff; } /* * Override có chủ đích khi trang nhúng vào khung site. * * CSS legacy của jawhm (jawhm-form.css, base.min.css…) ép trần mặc định. * Vẽ nút mũi tên bằng CSS thay vì kéo cả jQuery Mobile chỉ để lấy 1 icon. */ .ns-select { margin-bottom: 14px; } .ns-select__label { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--ink); } .ns-select__control { position: relative; } .ns-select__control select { appearance: none; -webkit-appearance: none; -moz-appearance: none; display: block; margin: 0; padding: 11px 44px 11px 14px; border: 1px solid #f6eaea; border-radius: 1em; background: linear-gradient(180deg, #ffffff 0%, #ddd2d2 100%); color: #000; font-size: 15px; /* >=16px iOS auto-zoom là lý do cỡ chữ ở đây, giống .filter__field */ font-weight: 700; text-align: center; text-align-last: center; box-shadow: 0 1px 2px rgba(0, 0, 0, .1); } /* * text-align-last ở trên là để CĂN GIỮA giá trị đang chọn trên nút pill — * nhưng nó kế thừa xuống cả danh sách