/* Base Styles */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif; color: #333; background-color: #fff; line-height: 1.5; }
.app-container { max-width: 645px; margin: 0 auto; background-color: #fff; position: relative; overflow-x: hidden; }
ul { list-style: none; }
a { text-decoration: none; color: inherit; }
/* Header */
.header { display: flex; justify-content: space-between; align-items: center; padding: 0 4%; height: 12.4vw; /* 80/645 */ max-height: 80px; background-color: #F5F5F7; border-bottom: 1px solid rgba(215, 215, 215, 0.5); position: sticky; top: 0; z-index: 100; }
.header .logo {
    margin-top: 2vw;
}
.logo img { width: 14.7vw; /* 95/645 */ max-width: 95px; height: auto; }
.header-publishers { display: flex; align-items: center; gap: 3vw; margin-top: 2vw; }
.header-publishers img { width: 15vw; /* 98/645 */ max-width: 98px; height: auto; }
.header-publishers img:last-child { width: 22vw; /* 142/645 */ max-width: 142px; height: auto; }
.icon-line { height: 6vw; max-height: 40px; width: auto !important; }
/* Navigation */
.main-nav { background-color: #f5f5f7; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0; position: relative; border-top: 5px solid #E60012; }
.nav-top-border { position: absolute; top: 0; left: 0; width: 100%; height: 5px; background-color: #E60012; }
.main-nav::-webkit-scrollbar { display: none; /* Hide scrollbar */ }
.nav-list { display: flex; white-space: nowrap; padding: 0 4%; gap: 6vw; }
.nav-list li { font-size: 3.7vw; /* 24/645 */ color: #999; font-weight: 300; cursor: pointer; padding: 2.5vw 0; position: relative; }
@media (min-width: 645px) { .nav-list li { font-size: 24px; padding: 16px 0; } }
.nav-list li.active { color: #E60012; font-weight: 600; }
.nav-list li.active::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; /* background-color: #E60012; */ }
/* Top Headline */
.top-headline { background-image: url('../images/u17.png'); background-position: center; background-size: cover; font-size: 4vw; /* 26/645 */ font-weight: 600; color: #333; line-height: 1.4; /* background: radial-gradient(circle at center, rgba(255, 235, 235, 1) 0%, rgba(255, 255, 255, 0) 70%); */ margin-bottom: 2vw; margin: 2vw 3vw; text-align: center; }
@media (min-width: 645px) { .top-headline { font-size: 26px; } }
/* Banner */
.top-headline p{
    padding: 10px;
}
.top-headline p:nth-child(1) {
    padding-top: 20px;
}

.top-headline p:nth-last-child(1) {
    padding-bottom: 20px;
}
.banner { position: relative; width: 94vw; /* 605/645 */ max-width: 605px; margin: 0 auto; border-radius: 1vw; overflow: hidden; }
.banner-img { width: 100%; aspect-ratio: 605/372; background-color: #eee; display: block; }
.banner-img img { width: 100%; display: block; height: 100%; object-fit: cover; border-radius: 3vw;}
.banner-overlay { position: absolute; bottom: 0; left: 0; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.banner-gradient { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 1; border-radius: 3vw;}
.banner-title { position: relative; z-index: 2; color: #F5F5F7; font-size: 4vw; /* 26/645 */ padding: 0 5% 4vw; line-height: 1.4; }
@media (min-width: 645px) { .banner-title { font-size: 26px; } }
.banner-dots { position: absolute; bottom: 1.5vw !important; /* left: 5% !important; */ z-index: 2; display: flex; gap: 1vw; justify-content: flex-start; padding: 0 2vw; /* width: auto !important; */ }
.banner-dots .swiper-pagination-bullet { margin: 0 !important; /* width: 17vw; 110/645 */ width: 100%; height: 1.2vw; max-height: 8px; background-color: rgba(245, 245, 247, 1); border-radius: 10px; opacity: 0.3; transition: opacity 0.3s ease; }
.banner-dots .swiper-pagination-bullet-active { opacity: 1; background-color: rgba(245, 245, 247, 1); }
/* Text News */
.text-news { padding: 2vw 4%; margin-top: 2vw; }
.text-news li { font-size: 4vw; /* 26/645 */ color: #333; padding: 3vw 0 3vw 0; border-bottom: 1px solid rgba(215, 215, 215, 0.5); line-height: 1.4; }
.text-news li.last-item { /* border-bottom: 3px solid rgba(215, 215, 215, 1); border-radius: 20px; padding: 3.5vw 2vw; */ }
@media (min-width: 645px) { .text-news li { font-size: 26px; } }
/* 2x2 Grid Topics */
.topics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3vw; }
.topic-card { background-color: #F5F5F7; border-radius: 4vw; /* 25px */ overflow: hidden; position: relative; display: flex; flex-direction: column; }
.topic-img { width: 100%; padding: 1vw; }
.topic-img img { width: 100%; border-radius: 3vw; display: block; }
.topic-card p { font-size: 4vw; /* 26px */ color: #333; padding: 2vw 3vw 0vw; line-height: 1.3; margin-bottom: 3vw; }
@media (min-width: 645px) { .topic-card { border-radius: 25px; } .topic-card p { font-size: 26px; } }
/* Three Images Banner */
.three-images-banner { display: flex; justify-content: space-between; background-color: #F5F5F7; border-radius: 4vw; padding: 1vw; margin: 3vw 4%; }
.three-images-banner a { width: 32.5%; }
.three-images-banner img { width: 100%; border-radius: 3vw; display: block; }
/* Category Sections */
.category-section { padding: 6vw 4% 0; }
.section-header { display: flex; align-items: center; margin-bottom: 4vw; padding-left: 2vw; position: relative; }
.section-title { font-size: 4vw; /* 26px */ font-weight: 600; color: #E33314; position: relative; z-index: 2; margin-left: -2vw; }
.section-arrow { width: 7.7vw; /* 50/645 */ max-width: 50px; height: auto; position: relative; z-index: 1; }
@media (min-width: 645px) { .section-title { font-size: 26px; } }
/* News Card - Image Left, Text Right */
.news-card { display: flex; background-color: #F5F5F7; border-radius: 4vw; /* 25px */ padding: 3vw; margin-bottom: 3vw; gap: 3vw; align-items: stretch; }
@media (min-width: 645px) { .news-card { border-radius: 25px; } }
.news-img { width: 40vw; /* 260/645 */ max-width: 260px; flex-shrink: 0; }
.news-img img { width: 100%; aspect-ratio: 260/147; object-fit: cover; border-radius: 3vw; display: block; }
.news-info { flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 1vw 0; }
.news-info h3 { font-size: 3.7vw; /* 24px */ font-weight: 400; color: #333; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.news-meta { font-size: 2.5vw; /* 16px */ color: #999; font-weight: 300; margin-top: 2vw; }
@media (min-width: 645px) { .news-info h3 { font-size: 24px; } .news-meta { font-size: 16px; } }
/* Video Card */
.video-card { border-radius: 4vw; padding: 2vw; margin-bottom: 3vw; display: block; background-color: #F5F5F7; }
.video-img-wrapper { position: relative; width: 100%; border-radius: 3vw; overflow: hidden; margin-bottom: 2vw; }
.video-cover { width: 100%; display: block; }
.play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 7.7vw; /* 50px */ max-width: 50px; height: auto; }
.video-info { padding: 1vw 2vw; }
.video-info h3 { font-size: 3.7vw; font-weight: 400; color: #333; line-height: 1.4; margin-bottom: 1vw; }
.video-meta { font-size: 2.5vw; color: #999; font-weight: 300; }
@media (min-width: 645px) { .video-info h3 { font-size: 24px; } .video-meta { font-size: 16px; } }
/* Footer */
.footer { padding: 6vw 4%; padding-top: 4vw; background-color: #F5F5F7; text-align: left; margin-top: 4vw; border-top: 5px solid #E60012; }
.footer p { font-size: 2.2vw; /* 14px */ color: #999999; font-weight: 200; line-height: 2; margin-bottom: 1vw; }
.footer { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; }
/* .footer p { font-weight: 300; } */
.footer a { color: #E33314; }
@media (min-width: 645px) { .footer p { font-size: 14px; } }
.footer .footer-logo { text-align: center; margin-bottom: 1vw; }
.footer .footer-logo img { width: 10vw; max-width: 150px; height: auto; }
.ellipsis1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.ellipsis2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }