/*
* ============================================================
* TRANG TỔNG HỢP TIN TỨC (/tat-ca-tin-tuc)
* ============================================================
*
* Ba ảnh dựng nên toàn bộ giao diện, đều nằm trong /images/image_ttgh:
*
* bg_tong_hop_tin_tuc.png 1920x1980 phong cảnh, nền của cả mục
* bg-main-sub.png 1376x1587 mái ngói + khung giấy
* title_tong_hop_tin_tuc.png 1009x339 biển tên đè lên mái ngói
*
* File này CHỈ dùng cho trang tổng hợp tin tức. Bản cũ mang theo cả
* đống CSS chết (owl carousel, .page1..page5 của landing page, khối
* .news-detail-* của trang chi tiết tin) đều đã comment hoặc không có
* HTML tương ứng — bỏ hết, chỉ giữ những gì trang này thật sự dùng.
*
* Footer + side menu có CSS riêng ở /css/side-menu-footer.css.
*
* ---- ĐƠN VỊ: vì sao chữ bên trong khung dùng cqw chứ không phải vw --
*
* Bề rộng khung giấy KHÔNG còn tỉ lệ thẳng với bề rộng màn hình nữa
* (xem công thức ở .news-wrap: có calc, có trần 1600px, có mức chặn
* 96%). Nếu chữ bên trong vẫn tính bằng vw thì màn càng rộng chữ càng
* to trong khi khung đã đụng trần đứng yên — chữ phình ra khỏi khung.
*
* cqw = 1% bề rộng của .news-wrap (nhờ container-type: inline-size).
* Mọi thứ bên trong vì thế luôn cân đúng theo khung, khung to nhỏ thế
* nào chữ cũng theo đúng tỉ lệ đó.
*/
@charset "UTF-8";
/* Font của hàng tab, lấy giống chữ "Fanpage" bên side menu. Bên đó
khai báo trong /css/side-menu-footer.css (trang này cũng nạp file
ấy), nhưng khai báo lại ở đây cho file tự đứng được một mình —
trùng @font-face cùng một URL thì trình duyệt gộp làm một, không
tải hai lần. */
@font-face {
font-family: 'FzGameBrV2';
src: url('/fonts/FzGameBrV2.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body,
html {
color: #333;
background: #272727;
width: 100%;
font-family: "Roboto", sans-serif;
overflow-x: hidden;
scroll-behavior: smooth;
}
/* Ẩn thanh cuộn trang cho gọn; danh sách tin bật lại riêng ở dưới. */
::-webkit-scrollbar {
width: 0;
}
a {
text-decoration: none;
display: block;
transition: all 0.3s ease;
}
.imgFull {
display: block;
width: 100%;
height: auto;
}
.showOnMobile {
display: none !important;
}
.showOnPc {
display: block !important;
}
.header-mobile {
display: none;
}
.menu-mobile {
display: none;
}
/* ==================== MỤC TIN TỨC ====================
*
* Nền phong cảnh để cover chứ không phải ![]()
trải hết bề rộng: chiều
* cao mục do khung giấy quyết định (khung có tỉ lệ cố định, màn hẹp là
* nó cao lên), mà ảnh nền thì tỉ lệ chết 1920x1980 — hai cái không bao
* giờ khớp nhau. Dùng ![]()
thì màn hẹp khung giấy sẽ thò ra ngoài ảnh
* nền; cover thì ảnh luôn phủ kín, chỉ bị cắt bớt rìa, đúng như bản
* thiết kế (bản mẫu cũng là một khung cắt của ảnh gốc).
*/
.page2-news {
position: relative;
width: 100%;
overflow: hidden;
padding: 8vw 0 12vw;
background: url("/images/image_ttgh/bg_tong_hop_tin_tuc.png") center top / cover no-repeat;
}
/*
* BỀ RỘNG KHUNG GIẤY — bằng đúng khung bài viết bên trang chi tiết tin,
* tức nằm giữa .container (1140px) và .container-fluid (kín bề rộng
* trang): width = (1140px + bề rộng trang) / 2
* Màn 1920 ra 1522px, màn 1366 ra 1253px.
*
* Ba mức trong min() theo thứ tự:
* - công thức "khoảng giữa" nói trên
* - trần 1600px cho màn siêu rộng, kẻo dòng tin dài quá đọc mỏi mắt
* - chặn 96% để màn hẹp (1025–1200px) khung không rộng quá màn hình,
* vì ở đó công thức trả về số lớn hơn cả bề rộng trang
*
* aspect-ratio giữ đúng tỉ lệ ảnh gốc nên mái ngói không bao giờ méo.
* container-type biến khung thành mốc cho đơn vị cqw của mọi thứ bên
* trong (xem chú thích đầu file).
*/
.page2-news .news-wrap {
position: relative;
width: min(calc((1140px + 100%) / 2), 1600px, 96%);
aspect-ratio: 1376 / 1587;
margin: 0 auto;
container-type: inline-size;
background: url("/images/image_ttgh/bg-main-sub.png") center center / 100% 100% no-repeat;
}
/* Biển tên đè lên mái ngói, chóp trang trí nhô lên trên nóc. */
.page2-news .news-title-img {
position: absolute;
top: 1%;
left: 50%;
transform: translateX(-50%);
width: 66%;
height: auto;
z-index: 3;
pointer-events: none;
}
/*
* Vùng chữ nằm gọn trong lòng khung giấy. Bốn số dưới đây đo theo mép
* TRONG của đường viền vàng trên bg-main-sub.png (1376x1587: viền trái
* ~x90, phải ~x1290, đáy ~y1550) và chừa chỗ phía trên cho mái + biển
* tên. Muốn chữ rộng/hẹp hơn thì chỉnh left/right; muốn chữ bắt đầu
* cao/thấp hơn thì chỉnh top.
*/
.page2-news .news-content-main {
position: absolute;
left: 8%;
right: 8%;
top: 23%;
bottom: 4%;
display: flex;
flex-direction: column;
z-index: 2;
}
/* ==================== Ô TÌM KIẾM ==================== */
.page2-news .news-search-wrap {
position: relative;
flex: 0 0 auto;
margin-bottom: 1.67cqw;
}
.page2-news .news-search-input {
width: 100%;
padding: 0.7cqw 3.2cqw 0.7cqw 1.2cqw;
border: 1px solid rgba(139, 90, 43, 0.45);
border-radius: 0.42cqw;
font-family: inherit;
font-size: 1.2cqw;
color: #3a2a1c;
background: rgba(255, 252, 245, 0.75);
outline: none;
transition: border-color 0.3s;
}
.page2-news .news-search-input::placeholder {
color: #a08b74;
}
.page2-news .news-search-input:focus {
border-color: #8d1b1b;
background: rgba(255, 253, 249, 0.95);
}
.page2-news .news-search-icon {
position: absolute;
right: 1.1cqw;
top: 50%;
transform: translateY(-50%);
color: #8d1b1b;
font-size: 1.2cqw;
pointer-events: none;
}
/* ==================== HÀNG TAB ==================== */
.page2-news .news-tabs-nav {
flex: 0 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.5cqw;
margin-bottom: 2cqw;
}
.page2-news .news-tab-item {
flex: 0 0 auto;
background: none;
border: 1px solid transparent;
border-radius: 0.42cqw;
/* Giống chữ "Fanpage" bên side menu (side-menu-footer.css). */
font-family: 'FzGameBrV2', sans-serif;
font-size: 1.45cqw;
font-weight: 500;
letter-spacing: 0.5px;
color: #6b4630;
text-transform: uppercase;
white-space: nowrap;
cursor: pointer;
/* padding ngang rộng tay để chữ của tab đang chọn không đè lên hai
góc hoa văn vàng của bg_button_tin_tuc.png (hoa văn chiếm chừng
10% bề ngang ảnh mỗi bên). Đặt ở đây chứ không đặt riêng cho
.active, vì chỉ nới lúc active thì mỗi lần đổi tab cả hàng lại
xê dịch.
padding DỌC cũng phải nới theo cỡ chữ: biển gỗ kéo giãn vừa ô,
ô càng bè ngang thì hoa văn càng bị kéo dẹt. 1.05cqw giữ ô ở tỉ
lệ gần với ảnh gốc (99x43). */
padding: 1.05cqw 1.6cqw;
transition: all 0.25s ease;
}
.page2-news .news-tab-item:hover:not(.active) {
color: #a61d24;
}
/* Tab đang chọn: biển gỗ đỏ bg_button_tin_tuc.png (99x43) kéo giãn vừa
ô. Bỏ bo góc để hai góc hoa văn của ảnh không bị cắt cụt. */
.page2-news .news-tab-item.active {
color: #f3e491;
font-weight: 700;
border-color: transparent;
border-radius: 0;
background: url("/images/image_ttgh/bg_button_tin_tuc.png") center center / 100% 100% no-repeat;
}
/* ==================== DANH SÁCH TIN ==================== */
.page2-news .news-list-scroll {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding-right: 0.83cqw;
}
.page2-news .news-list-scroll::-webkit-scrollbar {
width: 0.53cqw;
display: block;
}
.page2-news .news-list-scroll::-webkit-scrollbar-track {
background: rgba(139, 90, 43, 0.12);
border-radius: 0.27cqw;
}
.page2-news .news-list-scroll::-webkit-scrollbar-thumb {
background: rgba(139, 90, 43, 0.5);
border-radius: 0.27cqw;
}
.page2-news .news-pane {
display: none;
}
.page2-news .news-pane.active {
display: block;
animation: fadeInNews 0.4s ease forwards;
}
.page2-news .news-items-ul {
list-style: none;
}
/*
* Viên kim cương đầu dòng.
*
* Khung giấy giờ cao tới ~1765px (màn 1920) mà mỗi trang chỉ có 12 tin,
* nên KHÔNG phóng to chữ cho đầy khung — cỡ chữ giữ ở mức đọc bình
* thường (~20px), phần trống bù bằng giãn cách dòng. padding dọc
* 1.26cqw canh sao cho trọn 12 tin (đúng ITEMS_PER_PAGE trong
* tong-hop-tin-tuc.js) trải kín vùng danh sách mà vẫn không phải cuộn.
* Nới thêm là 12 dòng tràn ra, .news-list-scroll sẽ hiện thanh cuộn.
*
* Số này ăn theo chiều cao hàng tab ở trên: phóng to chữ/biển gỗ của
* tab là hàng tab cao lên, vùng danh sách hụt đi đúng chừng ấy, phải
* bớt padding ở đây bù lại. Lấy theo màn CHẬT nhất (1366) chứ không
* theo 1920: ô tìm kiếm có viền 1px cố định không co theo cqw, nên màn
* càng nhỏ thì phần cứng ấy càng ăn nhiều chỗ tương đối.
*/
.page2-news .news-li {
position: relative;
padding: 1.26cqw 1cqw 1.26cqw 2.5cqw;
}
.page2-news .news-li::before {
content: "";
position: absolute;
left: 0.42cqw;
top: 1.95cqw;
width: 0.55cqw;
height: 0.55cqw;
background: #7a1a12;
transform: rotate(45deg);
}
.page2-news .news-li .news-link {
font-size: 1.3cqw;
color: #2b1d14;
line-height: 1.35;
}
.page2-news .news-li .news-link:hover {
color: #a61d24;
transform: none !important;
filter: none !important;
}
.page2-news .news-li .news-time {
display: block;
margin-top: 0.25cqw;
font-size: 0.9cqw;
color: #8a7a6d;
}
@keyframes fadeInNews {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ==================== PHÂN TRANG ====================
*
* JS dựng ra: [prev] [số...] [next], tất cả đều class .pg-btn, dấu ...
* là .pg-ellipsis. Không sửa JS được nên hai nút mũi tên nhận diện bằng
* :first-child / :last-child — thứ tự này do JS bảo đảm.
*/
.page2-news .news-pagination-wrap {
flex: 0 0 auto;
display: flex;
justify-content: center;
align-items: center;
gap: 0.58cqw;
flex-wrap: wrap;
margin-top: 1.67cqw;
}
.page2-news .news-pagination-wrap .pg-btn {
min-width: 2.4cqw;
height: 2.4cqw;
padding: 0 0.5cqw;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 0.42cqw;
background: transparent;
color: #4a2b1a;
font-family: inherit;
font-size: 1.2cqw;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.page2-news .news-pagination-wrap .pg-btn:hover {
background: rgba(139, 90, 43, 0.18);
transform: none !important;
filter: none !important;
}
/* Trang đang xem + hai nút mũi tên: nền đỏ son, chữ kem. */
.page2-news .news-pagination-wrap .pg-btn.active,
.page2-news .news-pagination-wrap .pg-btn:first-child,
.page2-news .news-pagination-wrap .pg-btn:last-child {
background: #a01c1c;
color: #ffeec2;
box-shadow: 0 0.17cqw 0.42cqw rgba(0, 0, 0, 0.25);
}
.page2-news .news-pagination-wrap .pg-btn.active {
pointer-events: none;
}
.page2-news .news-pagination-wrap .pg-btn:first-child:hover,
.page2-news .news-pagination-wrap .pg-btn:last-child:hover {
background: #c62828;
}
.page2-news .news-pagination-wrap .pg-btn.disabled {
background: rgba(160, 28, 28, 0.35);
color: rgba(255, 238, 194, 0.6);
pointer-events: none;
box-shadow: none;
}
.page2-news .news-pagination-wrap .pg-ellipsis {
color: #4a2b1a;
font-size: 1.2cqw;
padding: 0 0.25cqw;
line-height: 2.4cqw;
}
/* ============================================================
* MOBILE / TABLET
* ============================================================
* Khung giấy nới gần hết bề rộng màn hình. Vẫn là cqw nhưng số lớn hơn
* hẳn bản PC: khung mobile chỉ rộng ~345px so với ~1522px bên PC, giữ
* nguyên số cqw thì chữ tụt xuống còn hơn một phần năm, không đọc nổi.
*/
@media (max-width: 1024px) {
.showOnMobile {
display: block !important;
}
.showOnPc {
display: none !important;
}
/* ----- Header mobile ----- */
.header-mobile {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 11.71875vw;
background: #211f1f;
z-index: 1100;
display: flex;
align-items: center;
}
.header-mobile .header-mobile-inner {
width: 100%;
height: 100%;
padding: 0 3.90625vw;
display: flex;
justify-content: space-between;
align-items: center;
}
.header-mobile .h-m-left {
display: flex;
align-items: center;
gap: 1.46484375vw;
}
.header-mobile .h-m-left .h-m-logo {
width: 9.765625vw;
border-radius: 1.953125vw;
overflow: hidden;
}
.header-mobile .h-m-left .h-m-title {
display: flex;
flex-direction: column;
color: #f3e491;
font-size: 2.34375vw;
line-height: 1.1;
}
.header-mobile .h-m-left .h-m-title span:last-child {
color: #fff;
font-size: 1.953125vw;
}
.header-mobile .h-m-right {
display: flex;
align-items: center;
gap: 5.859375vw;
}
.header-mobile .h-m-right .h-m-download {
width: 27.1484375vw;
}
.header-mobile .h-m-right .h-m-download img {
width: 100%;
}
.header-mobile .h-m-right .h-m-menu {
background: none;
border: none;
padding: 0;
width: 5.859375vw;
cursor: pointer;
}
.header-mobile .h-m-right .h-m-menu img {
width: 100%;
}
/* ----- Menu mobile (ngăn kéo) ----- */
.menu-mobile {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1200;
pointer-events: none;
transition: 0.3s;
}
.menu-mobile.active {
pointer-events: auto;
}
.menu-mobile.active .menu-m-overlay {
opacity: 1;
}
.menu-mobile.active .menu-m-content {
transform: translateX(0);
}
.menu-mobile .menu-m-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.451);
opacity: 0;
transition: 0.3s;
}
.menu-mobile .menu-m-content {
position: absolute;
top: 0;
right: 0;
width: 31.25vw;
height: 100%;
background: #111;
transform: translateX(100%);
transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
align-items: center;
padding-top: 7.8125vw;
}
.menu-mobile .menu-m-content .menu-m-close {
position: absolute;
top: 2.9296875vw;
right: 2.9296875vw;
background: none;
border: none;
color: #fff;
font-size: 5.859375vw;
line-height: 1;
cursor: pointer;
}
.menu-mobile .menu-m-content .menu-m-logo {
width: 13.18359375vw;
margin-bottom: 3.90625vw;
}
.menu-mobile .menu-m-content .menu-m-logo img {
width: 100%;
border-radius: 2.44140625vw;
}
.menu-mobile .menu-m-content .menu-m-list {
width: 100%;
list-style: none;
padding: 0 4.39453125vw;
}
.menu-mobile .menu-m-content .menu-m-list li {
width: 100%;
position: relative;
border-bottom: 1px solid #464647;
}
.menu-mobile .menu-m-content .menu-m-list li a {
display: flex;
align-items: center;
padding: 3.90625vw 0;
color: #fff;
text-decoration: none;
font-size: 2.44140625vw;
gap: 0.9765625vw;
}
.menu-mobile .menu-m-content .menu-m-list li a i {
width: 3.90625vw;
height: 3.80859375vw;
display: flex;
align-items: center;
justify-content: center;
font-style: normal;
background-size: contain !important;
}
.menu-mobile .menu-m-content .menu-m-list li a i.icon-home {
background: url(/images/landingpage/icon-home.webp) center center no-repeat;
}
.menu-mobile .menu-m-content .menu-m-list li a i.icon-fanpage {
background: url(/images/landingpage/icon-fb.webp) center center no-repeat;
}
.menu-mobile .menu-m-content .menu-m-list li a i.icon-community {
background: url(/images/landingpage/icon-group.webp) center center no-repeat;
}
.menu-mobile .menu-m-content .menu-m-list li a:hover {
color: #fcedac;
}
/* ----- Mục tin tức ----- */
.page2-news {
/* chừa chỗ cho header mobile fixed phía trên */
padding: 24vw 0 16vw;
}
.page2-news .news-wrap {
width: 92vw;
max-width: none;
}
.page2-news .news-title-img {
width: 72%;
}
/*
* Màn hẹp thì khung giấy (tỉ lệ cứng theo ảnh) chỉ cao chừng 400px,
* không đủ chỗ cho trọn 12 tin như bản PC. Ở đây ưu tiên GIỮ ĐÚNG
* tỉ lệ ảnh — mái ngói không bị kéo méo — nên phần dư sẽ cuộn trong
* .news-list-scroll (thanh cuộn đã tạo kiểu riêng). Các số dưới đây
* bóp sát lề để lộ ra được nhiều dòng nhất có thể trước khi cuộn.
*/
.page2-news .news-content-main {
left: 6.5%;
right: 6.5%;
top: 20%;
bottom: 3%;
}
.page2-news .news-search-wrap {
margin-bottom: 1.5cqw;
}
.page2-news .news-search-input {
padding: 1.2cqw 7cqw 1.2cqw 2.6cqw;
font-size: 2.9cqw;
border-radius: 0.65cqw;
}
.page2-news .news-search-icon {
right: 2.4cqw;
font-size: 2.9cqw;
}
.page2-news .news-tabs-nav {
gap: 0.2cqw;
margin-bottom: 1.75cqw;
}
/* Khung mobile chỉ rộng ~345px mà phải chứa đủ sáu nhãn, lại thêm
FzGameBrV2 rộng ngang hơn Roboto — đo thật thì bộ số của bản PC
tràn hàng mất 31px. Hạ cỡ chữ và bóp padding ngang để sáu tab
nằm gọn một hàng.
padding ngang 0.5cqw là mức lớn nhất còn nhét vừa; vẫn hẹp hơn
bản PC nên trên màn nhỏ chữ của tab đang chọn nằm khá sát hai
góc hoa văn của biển gỗ. Muốn hở hơn nữa thì phải hạ tiếp cỡ
chữ, mà dưới mức này là không đọc nổi. */
.page2-news .news-tab-item {
font-size: 2.28cqw;
letter-spacing: 0;
padding: 0.76cqw 0.5cqw;
border-radius: 0.55cqw;
}
.page2-news .news-list-scroll {
padding-right: 1.3cqw;
}
.page2-news .news-list-scroll::-webkit-scrollbar {
width: 0.87cqw;
}
.page2-news .news-li {
padding: 0.98cqw 1.2cqw 0.98cqw 3.7cqw;
}
.page2-news .news-li::before {
left: 0.65cqw;
top: 2.12cqw;
width: 1.09cqw;
height: 1.09cqw;
}
/* Không hạ thêm hai cỡ chữ này để nhét nhiều dòng hơn: dưới mức này
là chữ nhỏ hơn 11px trên điện thoại 375px, đọc không nổi. Thà lộ
ra 7 dòng đọc được rồi cuộn tiếp còn hơn 8 dòng li ti. */
.page2-news .news-li .news-link {
font-size: 3.48cqw;
}
.page2-news .news-li .news-time {
font-size: 2.46cqw;
}
.page2-news .news-pagination-wrap {
gap: 0.87cqw;
margin-top: 1.3cqw;
}
.page2-news .news-pagination-wrap .pg-btn {
min-width: 5cqw;
height: 5cqw;
font-size: 2.5cqw;
border-radius: 0.76cqw;
padding: 0 0.87cqw;
}
.page2-news .news-pagination-wrap .pg-ellipsis {
font-size: 2.5cqw;
line-height: 5cqw;
}
}