/* ============================================================================= Saigon Chess — tuỳ chỉnh giao diện ----------------------------------------------------------------------------- Viết MỌI sửa đổi giao diện ở file này, KHÔNG sửa css/template.css hay local/css/template.css (556 KB, sinh ra từ SCSS của JA Blockk — cài đè bản mới là mất sạch). File này được nạp SAU template.css nên luôn thắng. Các con số hay chỉnh nằm trong khối :root bên dưới — đổi một chỗ, cả site đổi. ============================================================================= */ :root { /* --- Menu chính (thanh ngang) --- */ --sgc-nav-padding-y: 1.15rem; /* đệm trên/dưới mỗi mục — trước là 1.867rem */ --sgc-nav-padding-x: 0.85rem; /* đệm trái/phải mỗi mục */ --sgc-nav-line-height: 1.35; /* giãn dòng — trước là 1.72 */ --sgc-nav-font-size: 14px; --sgc-nav-caret-color: currentColor; /* màu mũi tên xổ xuống, theo màu chữ menu */ --sgc-nav-hover-bg: rgba(255, 255, 255, 0.14); --sgc-nav-active-bar: #ffffff; /* gạch chân mục đang mở */ /* --- Menu con (dropdown) --- */ --sgc-sub-bg: #ffffff; --sgc-sub-color: #1f2937; --sgc-sub-hover-bg: #eef4fc; --sgc-sub-hover-color: var(--color-primary); --sgc-sub-border: rgba(0, 0, 0, 0.08); --sgc-sub-padding-y: 0.5rem; /* đệm trên/dưới mỗi mục con */ --sgc-sub-padding-x: 1rem; --sgc-sub-font-size: 14px; --sgc-sub-radius: 6px; /* --- Tiêu đề trang (Show Page Heading) --- */ --sgc-page-heading-size: 28px; --sgc-page-heading-color: var(--heading-color); --sgc-page-heading-bar: var(--color-primary); } /* ============================================================================= 1. Bỏ chữ cái đầu khổng lồ ở đầu bài viết (drop cap) ============================================================================= */ .item-page .com-content-article__body > p:first-child::first-letter, .item-page .com-content-article__body p.has-letter::first-letter { color: inherit; float: none; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; margin-right: 0; padding-top: 0; } /* ============================================================================= 8. Menu chính: giãn dòng và đệm chỉnh được ============================================================================= */ .t4-megamenu > .navbar-nav > li > a, .t4-megamenu > .navbar-nav > li > .nav-link { padding: var(--sgc-nav-padding-y) var(--sgc-nav-padding-x); line-height: var(--sgc-nav-line-height); font-size: var(--sgc-nav-font-size); border-radius: 4px 4px 0 0; transition: background-color 0.15s ease; } /* nền mờ khi rê chuột / đang mở, để phân biệt mục chính */ .t4-megamenu > .navbar-nav > li > a:hover, .t4-megamenu > .navbar-nav > li > .nav-link:hover, .t4-megamenu > .navbar-nav > li.show > a, .t4-megamenu > .navbar-nav > li.show > .nav-link { background-color: var(--sgc-nav-hover-bg); } /* gạch chân mục đang ở */ .t4-megamenu > .navbar-nav > li.active > a, .t4-megamenu > .navbar-nav > li.current > a, .t4-megamenu > .navbar-nav > li.active > .nav-link, .t4-megamenu > .navbar-nav > li.current > .nav-link { box-shadow: inset 0 -3px 0 0 var(--sgc-nav-active-bar); } /* ============================================================================= 10. Mũi tên xổ xuống: đi theo màu chữ của menu, không còn đen cứng ============================================================================= */ .t4-megamenu .dropdown-toggle .item-caret::before { border-top-color: var(--sgc-nav-caret-color); } .t4-megamenu > .navbar-nav > li > a.dropdown-toggle .item-caret, .t4-megamenu > .navbar-nav > li > .nav-link.dropdown-toggle .item-caret, .t4-megamenu > .navbar-nav > li > a.dropdown-toggle:hover .item-caret, .t4-megamenu > .navbar-nav > li > a.dropdown-toggle:focus .item-caret, .t4-megamenu > .navbar-nav > li > a.dropdown-toggle:active .item-caret, .t4-megamenu > .navbar-nav > li.show > a.dropdown-toggle .item-caret { border-top-color: var(--sgc-nav-caret-color); } .t4-megamenu > .navbar-nav > li > a.dropdown-toggle .item-caret::before, .t4-megamenu > .navbar-nav > li > .nav-link.dropdown-toggle .item-caret::before { border-top-color: var(--sgc-nav-caret-color); } /* mũi tên trong menu con lấy màu chữ của menu con */ .t4-megamenu .dropdown-menu .dropdown-toggle .item-caret::before { border-top-color: var(--sgc-sub-color); } /* ============================================================================= 8b. Menu con: nền, màu, đệm phân biệt rõ với menu chính ============================================================================= */ .t4-megamenu .dropdown-menu { background-color: var(--sgc-sub-bg); border: 1px solid var(--sgc-sub-border); border-radius: var(--sgc-sub-radius); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); padding: 0.35rem 0; } .t4-megamenu .dropdown-menu .dropdown-item, .t4-megamenu .dropdown-menu > ul > li > a { color: var(--sgc-sub-color); font-size: var(--sgc-sub-font-size); padding: var(--sgc-sub-padding-y) var(--sgc-sub-padding-x); line-height: 1.4; } .t4-megamenu .dropdown-menu .dropdown-item:hover, .t4-megamenu .dropdown-menu .dropdown-item:focus, .t4-megamenu .dropdown-menu > ul > li > a:hover, .t4-megamenu .dropdown-menu > ul > li > a:focus { background-color: var(--sgc-sub-hover-bg); color: var(--sgc-sub-hover-color); } /* mục con đang mở */ .t4-megamenu .dropdown-menu > ul > li.active > a, .t4-megamenu .dropdown-menu > ul > li.current > a { color: var(--sgc-sub-hover-color); font-weight: 600; } /* cấp 3 thụt vào để thấy thứ bậc */ .t4-megamenu .dropdown-menu .level2 .dropdown-item, .t4-megamenu .dropdown-menu ul ul > li > a { padding-left: calc(var(--sgc-sub-padding-x) + 0.75rem); font-size: calc(var(--sgc-sub-font-size) - 1px); opacity: 0.92; } /* ============================================================================= 9. Tiêu đề trang (Menus → Edit Item → Show Page Heading) Trước đây chữ trôi nổi, không khoảng cách, không phân cấp. ============================================================================= */ .category-blog-info .page-header, .item-page > .page-header, .com-content-category-blog > .page-header, .blog .page-header, .categories-list > .page-header { margin: 0 0 1.5rem; padding: 0 0 0.75rem; border-bottom: 1px solid rgba(0, 0, 0, 0.08); position: relative; } .category-blog-info .page-header h1, .item-page > .page-header h1, .com-content-category-blog > .page-header h1, .blog .page-header h1 { font-size: var(--sgc-page-heading-size); color: var(--sgc-page-heading-color); line-height: 1.25; margin: 0; padding-left: 0.75rem; border-left: 4px solid var(--sgc-page-heading-bar); } @media (max-width: 575.98px) { :root { --sgc-page-heading-size: 22px; } } /* khi masthead đã in tiêu đề trang thì component không in lại (tránh 2 tiêu đề trùng) */ body.has-masthead-title .category-blog-info > .page-header, body.has-masthead-title .com-content-category-blog > .page-header, body.has-masthead-title .blog > .page-header, body.has-masthead-title .categories-list > .page-header { display: none; } /* ============================================================================= KIỂU CHỮ TRONG NỘI DUNG BÀI VIẾT ----------------------------------------------------------------------------- Các lớp dưới đây do người viết gõ trong trình soạn thảo (JCE). Chúng được định nghĩa trong local/css/jck_editor_trung.css — file đó CHỈ dùng cho khung soạn thảo, frontend không nạp, nên bài viết mất định dạng. Hai vấn đề đã đo được trên 1.728 bài: 1. `.brown` dùng 4.373 lần nhưng không file CSS nào của site định nghĩa. 2. `.red .blue .green .yellow .purple` trùng tên với bảng màu tiện ích của JA Blockk nên bị đổi màu: red thành #cc3300 (cam gạch) thay vì #FF0000, yellow thành #df8d04 (cam) thay vì #FFFF00… Khắc phục: chép lại đúng định nghĩa của trình soạn thảo, NHƯNG giới hạn trong vùng nội dung để không đụng tới màu tiện ích của template ở chỗ khác. ============================================================================= */ .com-content-article__body .brown, .item-page .brown, .item-content .brown, .blog .item .brown, .category-desc .brown { font-size: 10pt; font-family: Cambria, Georgia, serif; color: #800000; font-weight: bold; } .com-content-article__body .red, .item-page .red, .item-content .red, .blog .item .red { font-size: 10pt; font-family: Cambria, Georgia, serif; color: #FF0000; font-weight: bold; } .com-content-article__body .blue, .item-page .blue, .item-content .blue, .blog .item .blue { font-size: 10pt; font-family: Cambria, Georgia, serif; color: #0000FF; font-weight: bold; } .com-content-article__body .green, .item-page .green, .item-content .green, .blog .item .green { font-size: 10pt; font-family: Cambria, Georgia, serif; color: #008000; font-weight: bold; } .com-content-article__body .yellow, .item-page .yellow, .item-content .yellow, .blog .item .yellow { font-size: 10pt; font-family: Cambria, Georgia, serif; color: #FFFF00; font-weight: bold; } .com-content-article__body .yellow12, .item-page .yellow12 { font-size: 12pt; font-family: Cambria, Georgia, serif; color: #FFFF00; font-weight: bold; } .com-content-article__body .purple, .item-page .purple, .item-content .purple, .blog .item .purple { font-size: 10pt; font-family: Cambria, Georgia, serif; color: purple; font-weight: bold; } .com-content-article__body .cream, .item-page .cream { font-size: 12pt; font-family: Cambria, Georgia, serif; color: #FFCC99; font-weight: bold; } /* ============================================================================= THANH MENU MICROSITE GIẢI ĐẤU (thay mod_maximenuck) ----------------------------------------------------------------------------- Mỗi giải dùng một template style riêng, style nào cũng chạy layout `microsite`: banner (module ảnh) + thanh menu này + nội dung. Đổi màu cho từng giải: thêm class vào ô "Page Class" của menu, hoặc đặt lại biến trong theme của style. Mặc định lấy tông xanh lá như Cúp Phương Trang. ============================================================================= */ :root { --sgc-tm-bg: #0a7a28; /* nền thanh menu */ --sgc-tm-color: #ffffff; /* chữ */ --sgc-tm-hover-bg: #0d9632; /* nền khi rê chuột */ --sgc-tm-active-bg: #7ed321; /* nền mục đang mở */ --sgc-tm-active-color: #103a10; /* chữ mục đang mở */ --sgc-tm-radius: 6px; --sgc-tm-pad-y: 0.55rem; --sgc-tm-pad-x: 0.9rem; --sgc-tm-font-size: 15px; --sgc-tm-gap: 0.2rem; --sgc-tm-sub-bg: #ffffff; --sgc-tm-sub-color: #1f2937; --sgc-tm-sub-hover-bg: #e8f6ea; } .sgc-tourmenu { background: var(--sgc-tm-bg); border-radius: var(--sgc-tm-radius); padding: 0.55rem 0.75rem; margin-bottom: 1.25rem; } .sgc-tourmenu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sgc-tm-gap); } .sgc-tourmenu ul ul { display: none; } .sgc-tourmenu li { position: relative; } .sgc-tourmenu a, .sgc-tourmenu .separator, .sgc-tourmenu span.nav-header { display: block; color: var(--sgc-tm-color); font-size: var(--sgc-tm-font-size); line-height: 1.4; padding: var(--sgc-tm-pad-y) var(--sgc-tm-pad-x); border-radius: 4px; text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease; } .sgc-tourmenu a:hover, .sgc-tourmenu a:focus { background: var(--sgc-tm-hover-bg); color: var(--sgc-tm-color); } .sgc-tourmenu li.active > a, .sgc-tourmenu li.current > a { background: var(--sgc-tm-active-bg); color: var(--sgc-tm-active-color); font-weight: 600; } /* menu con: xổ xuống khi rê chuột */ .sgc-tourmenu li.parent:hover > ul, .sgc-tourmenu li.deeper:hover > ul { display: block; position: absolute; top: 100%; left: 0; z-index: 500; min-width: 220px; background: var(--sgc-tm-sub-bg); border-radius: 0 0 var(--sgc-tm-radius) var(--sgc-tm-radius); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); padding: 0.35rem 0; } .sgc-tourmenu li.parent:hover > ul a, .sgc-tourmenu li.deeper:hover > ul a { color: var(--sgc-tm-sub-color); border-radius: 0; white-space: normal; } .sgc-tourmenu li.parent:hover > ul a:hover { background: var(--sgc-tm-sub-hover-bg); } /* màn hình hẹp: xếp dọc */ @media (max-width: 767.98px) { .sgc-tourmenu ul { flex-direction: column; } .sgc-tourmenu a { white-space: normal; } } /* --- bảng màu sẵn cho từng giải: thêm class vào module hoặc thẻ body --- */ .sgc-tm-red { --sgc-tm-bg: #b3122a; --sgc-tm-hover-bg: #d4183a; --sgc-tm-active-bg: #ffd166; --sgc-tm-active-color: #5a0a16; --sgc-tm-sub-hover-bg: #fdeaee; } .sgc-tm-blue { --sgc-tm-bg: #1f457f; --sgc-tm-hover-bg: #2b5ba6; --sgc-tm-active-bg: #63b3ed; --sgc-tm-active-color: #0d2440; --sgc-tm-sub-hover-bg: #e8f0fb; } .sgc-tm-gold { --sgc-tm-bg: #8a6212; --sgc-tm-hover-bg: #ab7a18; --sgc-tm-active-bg: #f2c94c; --sgc-tm-active-color: #4a340a; --sgc-tm-sub-hover-bg: #fdf5e2; } .sgc-tm-green { --sgc-tm-bg: #0a7a28; --sgc-tm-hover-bg: #0d9632; --sgc-tm-active-bg: #7ed321; --sgc-tm-active-color: #103a10; --sgc-tm-sub-hover-bg: #e8f6ea; } /* ============================================================================= MÀU HEADER & FOOTER THEO MÙA ----------------------------------------------------------------------------- Màu của từng mùa KHÔNG viết cứng ở đây nữa — chúng do template style quyết định và được sinh ra trong tệp CSS tuỳ biến (media/templates/site/saigonchess/). Chỉnh tại: Hệ thống → Kiểu giao diện → saigonchess → thẻ "Màu theo mùa". Lớp trên do Template::seasonClass() gắn: sgc-season-{spring|summer|autumn|winter} · mùa đang hiện sgc-season-tet · quãng cận Tết sgc-season-decor · có bật hoa văn sgc-pat-{tên} · hoa văn của mùa đó Ba biến màu dưới đây chỉ là giá trị đỡ, phòng khi style chưa cấu hình gì. ============================================================================= */ :root { --sgc-se-1: #1a4c99; --sgc-se-2: #1958ba; --sgc-se-3: #10bfe3; --sgc-se-decor: none; --sgc-se-decor-size: 260px auto; --sgc-se-decor-opacity: 0.16; --sgc-se-decor-repeat: repeat; --sgc-se-decor-position: left top; } /* --- Áp vào header và footer --------------------------------------------- CSS gốc của template dùng !important nên ở đây cũng phải !important, và selector bắt đầu bằng body[class*="sgc-season-"] để đặc hiệu hơn. */ body[class*="sgc-season-"] div[class*="header-theme-"].header-theme-dark, body[class*="sgc-season-"] header[class*="header-theme-"].header-theme-dark { background-image: linear-gradient(42deg, var(--sgc-se-1) 0%, var(--sgc-se-2) 44%, var(--sgc-se-3) 100%) !important; } body[class*="sgc-season-"] .t4-footer { background-image: linear-gradient(42deg, var(--sgc-se-3) 0%, var(--sgc-se-2) 44%, var(--sgc-se-1) 100%) !important; } /* thanh menu giải đấu đi theo mùa nếu module không đặt bảng màu riêng */ body[class*="sgc-season-"] .sgc-tourmenu:not([class*="sgc-tm-"]) { background: var(--sgc-se-1); } /* --- Hoa văn chìm --------------------------------------------------------- Một lớp ::after mờ, không chặn chuột, chỉ hiện khi bật hoa văn. */ body.sgc-season-decor[class*="sgc-season-"] div[class*="header-theme-"].header-theme-dark, body.sgc-season-decor[class*="sgc-season-"] header[class*="header-theme-"].header-theme-dark, body.sgc-season-decor[class*="sgc-season-"] .t4-footer { position: relative; } body.sgc-season-decor[class*="sgc-season-"] div[class*="header-theme-"].header-theme-dark::after, body.sgc-season-decor[class*="sgc-season-"] header[class*="header-theme-"].header-theme-dark::after, body.sgc-season-decor[class*="sgc-season-"] .t4-footer::after { content: ""; position: absolute; inset: 0; background-image: var(--sgc-se-decor); background-size: var(--sgc-se-decor-size); background-repeat: var(--sgc-se-decor-repeat, repeat); background-position: var(--sgc-se-decor-position, left top); opacity: var(--sgc-se-decor-opacity); pointer-events: none; z-index: 0; } /* nội dung phải nằm trên hoa văn */ body.sgc-season-decor[class*="sgc-season-"] .t4-header-inner, body.sgc-season-decor[class*="sgc-season-"] .t4-footer > * { position: relative; z-index: 1; } /* ============================================================================= BỘ HOA VĂN CHÌM CHO HEADER / FOOTER ----------------------------------------------------------------------------- Mỗi lớp chỉ đặt biến --sgc-se-decor. Template gắn lớp tương ứng vào theo hoa văn đã chọn cho mùa đang hiện (xem Template::seasonClass()). Tất cả là SVG nội tuyến — không thêm file ảnh, không thêm request. Muốn thêm hoa văn mới: chép một khối bên dưới, đổi tên lớp và phần SVG, rồi thêm một