* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     font-family: Arial, sans-serif;
 }

 .hero {
     position: relative;
     overflow: hidden;
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     color: #fff;
 }

 .hero__bg {
     position: absolute;
     inset: -5%;
     background-size: cover;
     background-position: center;
     will-change: transform, opacity;
     opacity: 0;
     animation: smoothSlide 12s ease-in-out infinite;
 }

 /* រូបទី 1 */
 .hero__bg--1 {
     background-image: url('/assets/images/hero/1.jpg');
     animation-delay: 0s;
 }

 /* រូបទី 2 */
 .hero__bg--2 {
     background-image: url('/assets/images/hero/2.jpg');
     animation-delay: 4s;
 }

 /* រូបទី 3 */
 .hero__bg--3 {
     background-image: url('/assets/images/hero/3.jpg');
     animation-delay: 8s;
 }

 .hero__bg--4 {
     background-image: url('/assets/images/hero/4.jpg');
     animation-delay: 12s;
 }

 /* រូបទី 2 */
 .hero__bg--5 {
     background-image: url('/assets/images/hero/5.jpg');
     animation-delay: 16s;
 }

 /* រូបទី 3 */
 .hero__bg--6 {
     background-image: url('/assets/images/hero/6.jpg');
     animation-delay: 20s;
 }

 /* Auto slide រលូន */
 @keyframes smoothSlide {

     /* ចាប់ផ្តើម */
     0% {
         opacity: 0;
         transform: translateX(8%) scale(1.05);
     }

     /* ចូលមកយឺតៗ */
     8% {
         opacity: 1;
         transform: translateX(0) scale(1);
     }

     /* បង្ហាញនៅកណ្តាល */
     30% {
         opacity: 1;
         transform: translateX(0) scale(1);
     }

     /* រសាត់ចេញយឺតៗ */
     38% {
         opacity: 0;
         transform: translateX(-5%) scale(1.02);
     }

     /* រង់ចាំវេនបន្ទាប់ */
     100% {
         opacity: 0;
         transform: translateX(-5%) scale(1.02);
     }
 }

 /* ស្រទាប់ងងឹតពណ៌ស្វាយពីលើ ដើម្បីអោយអក្សរអានច្បាស់ */
 .hero__overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg,
             rgba(76, 29, 149, 0.35),
             rgba(15, 23, 42, 0.65));
     z-index: 5;
     pointer-events: none;
 }

 /* Keep the photo overlay behind the hero copy and calls to action. */
 .hero>.container {
     position: relative;
     z-index: 6;
 }

 .hero__content {
     position: relative;
     z-index: 20;
     max-width: 800px;
     padding: 0 20px;
 }

 .hero__content h1 {
     font-size: clamp(2.5rem, 6vw, 4.5rem);
     font-weight: 900;
     margin-bottom: 20px;
 }

 .hero__content p {
     font-size: clamp(1rem, 2vw, 1.4rem);
     color: #7dd3fc;
     margin-bottom: 30px;
 }

 .hero__cta {
     display: flex;
     gap: 16px;
     justify-content: center;
     flex-wrap: wrap;
 }

 .btn {
     padding: 14px 28px;
     border-radius: 8px;
     font-weight: bold;
     text-decoration: none;
     display: inline-block;
 }

 .btn--primary {
     background: #22d3ee;
     color: #08202a;
 }

 .btn--outline {
     border: 2px solid #fff;
     color: #fff;
     background: #07111f;
     box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
 }

 .btn--outline:hover,
 .btn--outline:focus-visible {
     background: #07111f;
     color: #fff;
 }

 #slogan {
     margin-top: 30px;
 }

 .reveal {
     /* background-color: pink; */
     margin-bottom: 10px;
     padding: 24px;
 }

 .news-section {
     margin-top: 0;
     padding: 8px;
 }

 /* Pagination */
 .news-pagination {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: .5rem;
     flex-wrap: wrap;
     margin: 2rem 0 1rem;
 }

 .news-pagination__button {
     min-width: 42px;
     height: 42px;
     padding: 0 .85rem;
     border: 1px solid rgba(100, 116, 139, .2);
     border-radius: 12px;
     background: rgba(255, 255, 255, .65);
     color: var(--color-text);
     font-family: "Poppins", sans-serif;
     font-size: .82rem;
     font-weight: 700;
     cursor: pointer;
     transition: transform .25s ease, background .25s ease, border-color .25s ease;
 }

 .news-pagination__button:hover:not(:disabled) {
     transform: translateY(-2px);
     border-color: var(--color-accent, #22d3ee);
 }

 .news-pagination__button.is-active {
     background: var(--color-primary, #2563eb);
     color: #fff;
     border-color: var(--color-primary, #2563eb);
 }

 .news-pagination__button:disabled {
     opacity: .4;
     cursor: not-allowed;
 }

 html[data-theme="dark"] .news-pagination__button {
     background: rgba(15, 23, 42, .72);
     border-color: rgba(148, 163, 184, .2);
     color: #e2e8f0;
 }

 .news-source-note p:last-child {
     margin-bottom: 0;
 }

 html[data-theme="dark"] .news-source-note {
     background: rgba(15, 23, 42, .65);
     border-color: rgba(148, 163, 184, .18);
 }

 html[data-theme="dark"] .news-card__meta time {
     color: #94a3b8;
 }

 html[data-theme="dark"] .news-card__source {
     border-color: rgba(148, 163, 184, .16);
 }


 @font-face {
      font-family: "Khmer OS Battambang";
      src: local("Khmer OS Battambang"), local("Battambang");
      font-style: normal;
      font-weight: 400 800;
      font-display: swap;
    }

    .khmer-text,
    .news-card__khmer-title,
    .news-khmer,
    .news-source-note__khmer {
      font-family: "Khmer OS Battambang", "Battambang", sans-serif;
      line-height: 1.9;
    }

    .news-card__khmer-title {
      font-size: 1rem;
      margin: .2rem 0 .7rem;
      font-weight: 700;
    }

    .news-khmer {
      margin-top: .65rem;
    }