/*
* ============================================================
* TRANG TỔNG HỢP TIN TỨC (/tat-ca-tin-tuc)
* ============================================================
*
* Bốn ả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 khung giấy — bản PC
* bg-main-sub2.png 1402x2240 khung giấy — bản MOBILE
* title_tong_hop_tin_tuc.png 1009x339 biển tên đè lên mái ngói
*
* HAI ẢNH KHUNG, MỖI CỠ MÀN MỘT ẢNH:
* - PC giữ bg-main-sub.png (tỉ lệ 1376/1587 = 1.153) — tờ giấy ngang
* vừa phải, 12 tin mỗi trang lấp gần kín.
* - Mobile dùng bg-main-sub2.png (tỉ lệ 1402/2240 = 1.598, cao hơn
* 38.5% ở cùng bề rộng) vì màn hẹp thì tờ giấy PC chỉ hiện được
* ~7 dòng rồi phải cuộn; khung cao hơn cho ~9 dòng.
* Ảnh khung mobile cũng chính là ảnh trang chi tiết tin dùng ở mọi cỡ
* màn (site-master.css).
*
* ĐỔI ẢNH LÀ PHẢI ĐỔI CẢ BỐN THỨ, không chỉ url: aspect-ratio, hệ số
* width (ảnh/thân giấy), và bốn số inset của .news-content-main — tất
* cả đều bám tỉ lệ ảnh. Bản mobile ghi đè đủ cả bốn ở khối
* @media (max-width: 1024px) cuối file.
*
* SỐ ĐO HAI ẢNH (quét alpha + màu; bộ của bg-main-sub2 chép từ
* site-master.css):
* bg-main-sub bg-main-sub2
* cả tấm ảnh 1376x1587 1402x2240
* thân giấy (rộng) 1264px 1262px
* mái thò ra trái / phải 64 / 48px 76 / 64px
* lòng giấy (trong viền) x 90..1290 x 90..1325
* đáy y~1550 y 315..2210
*
* 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ó bậc 960px
* dưới 1200px). 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;
}
/* KHÔNG dùng transition: all — trang này đặt cỡ chữ bằng đơn vị
container (cqw), mà Chrome 148 nội suy font-size theo cq unit bị
kẹt ở 0px: toàn bộ tiêu đề tin, nút tab và nút phân trang biến mất.
Liệt kê từng thuộc tính để font-size không nằm trong danh sách chuyển
đổi. ĐỪNG ĐỔI LẠI THÀNH all. */
a {
text-decoration: none;
display: block;
transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, filter 0.3s ease, opacity 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;
}
/* ==================== PC BOTTOM NAVIGATION ====================
*
* Thanh nav dùng chung với layouts/site.blade.php: markup chép trong
* blade, còn style thì KẾ THỪA THẲNG site-master.css (khối "STYLE CỦA
* HEADER MENU (PC - bottom nav)") — file đó đã được nạp ở ngay
* TRƯỚC file này, không chép lại bộ số ở đây.
*
* Vì sao nạp được trước, xem chú thích ở của
* tong-hop-tin-tuc.blade.php.
*
* Chỗ chừa cho thanh nav (fixed nên không chiếm chỗ trong dòng chảy,
* để nguyên là nó che mất dòng bản quyền cuối footer). 70px = 47px cao
* thanh nav + 23px hở.
*
* Phải bọc .wrapper mới đủ mạnh: side-menu-footer.css nạp SAU file này
* và đặt .footer { padding: 2.6vw 0 } — cùng độ ưu tiên thì file nạp
* sau thắng, viết .footer trơn ở đây là bị nuốt.
*
* min-width: 1025px vì đúng khoảng đó thanh nav mới hiện (.showOnPc
* tắt từ 1024px xuống); để ngoài media query thì mobile lãnh nguyên
* 70px trắng thừa dưới chân trang.
*/
@media (min-width: 1025px) {
.wrapper .footer {
padding-bottom: 70px;
}
}
/* ==================== 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.webp") center top / cover no-repeat;
}
/*
* BỀ RỘNG KHUNG GIẤY — canh THÂN GIẤY bằng đúng khung bài viết bên
* trang chi tiết tin.
*
* Trước đây công thức này đặt lên .news-wrap, mà .news-wrap là TRỌN
* TẤM ẢNH bg-main-sub.png (1376px) — trong đó mái ngói thò ra ngoài
* thân giấy 64px bên trái, 48px bên phải, thân giấy thật chỉ rộng
* 1264px. Bên chi tiết tin thì .r-posts (nhận công thức) LÀ thân giấy,
* mái ngói thò ra ngoài bằng ::before có inset âm. Kết quả: cùng một
* công thức nhưng tờ giấy bên này hẹp hơn bên kia 1264/1376 = 8.1%.
*
* Nay công thức tính cho THÂN GIẤY (--paper-w), rồi nhân ngược
* 1376/1264 ra bề rộng cả tấm ảnh. Hai trang vì thế có tờ giấy rộng
* y hệt nhau ở mọi cỡ màn. Bản mobile cũng theo đúng lối này, xem khối
* @media (max-width: 1024px).
*
* --paper-w bám đúng bề rộng .r-posts bên trang chi tiết tin. Bên đó
* .r-posts nằm TRONG .container, mà .container có padding ngang 15px
* mỗi bên, nên thân giấy = bề rộng .container trừ 30px — đó là số 30px
* trong công thức, không phải lề tự đặt.
*
* Bề rộng .container bên kia:
* - từ 1200px trở lên: site-master.css mở #mainContent > .container
* thành "khoảng giữa" .container (1140px) và .container-fluid,
* tức (1140px + bề rộng trang) / 2, trần 1600px cho màn siêu rộng
* kẻo dòng tin dài quá đọc mỏi mắt.
* Màn 1920 ra 1522px → thân giấy 1492px; màn 1366 ra 1245px → 1215px.
* - 1025–1199px: dưới ngưỡng đó bên kia là .container mặc định của
* Bootstrap, mức lg = 960px → thân giấy 930px.
* - từ 1024px trở xuống: khối @media (max-width: 1024px) cuối file
* ghi đè width bằng 92vw, không dùng công thức này.
*
* --paper-cap là trần calc(90.3859vw - 20px) chép nguyên từ .r-posts
* bên site-master.css. Bên đó trần này sinh ra để footer không tụt
* xuống dưới đáy ảnh nền background_ttgh.png; trang này nền khác nên
* không cần, nhưng phải chép theo thì hai khung mới bằng nhau ở khoảng
* 1025–1400px — đó chính là khoảng trần ăn, ví dụ màn 1280 trần cắt
* xuống 1137px trong khi công thức trả 1173px.
*
* Đo thật ở 1030/1280/1366/1600/1920: cả tấm ảnh (kể cả mái ngói) vẫn
* nằm gọn trong mục, không cắt mất chóp mái và không đẻ thanh cuộn
* ngang. Nếu sau này nới trần lên thì .page2-news đã sẵn overflow:
* hidden đỡ, mái chỉ bị cắt chứ không sinh thanh cuộn.
*
* 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) — khung to lên bao nhiêu thì chữ và
* mọi khoảng cách bên trong tự lớn theo đúng bấy nhiêu.
*/
.page2-news .news-wrap {
position: relative;
--paper-cap: calc(90.3859vw - 20px);
--paper-w: min(calc(960px - 30px), var(--paper-cap));
width: calc(var(--paper-w) * 1376 / 1264);
aspect-ratio: 1376 / 1587;
margin: 0 auto;
container-type: inline-size;
background: url("/images/image_ttgh/bg-main-sub.webp") center center / 100% 100% no-repeat;
}
@media (min-width: 1200px) {
.page2-news .news-wrap {
--paper-w: min(calc(min(calc((1140px + 100%) / 2), 1600px) - 30px), var(--paper-cap));
}
}
/* 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.
*
* Bản mobile dùng ảnh khung KHÁC (bg-main-sub2, cao hơn) nên có bộ số
* riêng ở khối @media (max-width: 1024px) — sửa bên này đừng quên bên
* kia.
*/
.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);
}
/* Tu trang tri thanh