@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@200;300;400;500;600;700&display=swap');

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

body {
  font-family: 'Kanit', sans-serif;
  background-color: #ffffff;
  color: #1f2937;
  line-height: 1.6;
}

.pp-container {max-width: 1280px; margin: 0 auto; padding: 0 32px;}

/* ========== HEADER ========== */
.pp-header {
  background-color: #ffffff;
  border-bottom: 1px solid #f9fafb;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  position: sticky; top: 0; z-index: 50;
}
.pp-header-content {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 0;
}
.pp-header-left {display: flex; align-items: center; gap: 16px;}
.pp-header-icon {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, #10b981, #059669);
  border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white;
}
.pp-header-title {
  font-size: 60px;  /* เพิ่มจาก 50px */
  font-weight: 600; /* ขยายความหนาให้เด่นขึ้น */
  color: #1f2937;
}
.pp-header-dots {display: flex; align-items: center; gap: 8px;}
.pp-dot {width: 8px; height: 8px; border-radius: 50%;}
.pp-dot-gold {background-color: #fbbf24;}
.pp-dot-green {background-color: #10b981;}

/* ========== NAVIGATION ========== */
.pp-nav {background-color: #ffffff; border-bottom: 1px solid #f9fafb;}
.pp-nav-content {display: flex; gap: 48px; overflow-x: auto;}
.pp-nav-tab {
  padding: 20px 4px; font-weight: 500; border-bottom: 3px solid transparent;
  white-space: nowrap; transition: all 0.3s ease;
  background: none; border: none; cursor: pointer;
  font-family: 'Kanit', sans-serif; font-size: 16px;
}
.pp-nav-tab.pp-active {border-bottom-color: #10b981; color: #059669;}
.pp-nav-tab:not(.pp-active) {color: #6b7280;}
.pp-nav-tab:not(.pp-active):hover {color: #059669; border-bottom-color: #bbf7d0;}

/* ========== MAIN CONTENT ========== */
.pp-main {padding: 48px 0;}
.pp-section-header {margin-bottom: 48px;}
.pp-section-title {font-size: 32px; font-weight: 500; color: #1f2937; margin-bottom: 12px;}
.pp-section-description {color: #6b7280; font-size: 16px;}

/* ========== SEARCH ========== */
.pp-search-container {margin-bottom: 40px;}
.pp-search-form {display: flex; gap: 24px;}
.pp-search-input {
  flex: 1; padding: 16px 20px; border: 1px solid #e5e7eb; border-radius: 12px;
  font-size: 16px; font-family: 'Kanit', sans-serif;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04); transition: all 0.3s ease;
}
.pp-search-input:focus {outline: none; border-color: #10b981; box-shadow: 0 0 0 2px rgba(16,185,129,0.2);}
.pp-search-select {
  padding: 16px 20px; border: 1px solid #e5e7eb; border-radius: 12px;
  font-size: 16px; font-family: 'Kanit', sans-serif; background-color: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04); cursor: pointer;
}

/* ========== DOCUMENTS ========== */
.pp-documents-container {display: flex; flex-direction: column; gap: 16px;}
.pp-document-card {
  background-color: #fff; border: 1px solid #f3f4f6; border-radius: 16px;
  padding: 32px; box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.pp-document-card:hover {transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.08);}
.pp-document-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; /* ให้ย่อเมื่อจอเล็ก */
  gap: 16px;
}.pp-document-left {display: flex; align-items: flex-start; gap: 24px;}
.pp-date-badge {
  width: 80px; height: 80px;
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 1px solid #bbf7d0; border-radius: 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.pp-date-number {color: #047857; font-weight: 600; font-size: 18px;}
.pp-date-month {color: #059669; font-size: 12px; font-weight: 500;}
.pp-document-info {flex: 1;}
.pp-document-meta {display: flex; align-items: center; gap: 12px; margin-bottom: 12px;}
.pp-category-badge {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1px solid #fde68a; color: #b45309;
  padding: 4px 12px; font-size: 14px; font-weight: 500; border-radius: 20px;
}
.pp-meta-separator {color: #d1d5db; font-size: 14px;}
.pp-meta-year {color: #6b7280; font-size: 14px; font-weight: 300;}
.pp-document-title {font-size: 20px; font-weight: 500; color: #1f2937; margin-bottom: 8px;}
.pp-document-description {color: #6b7280; font-size: 14px;}
/* Download Button */
.pp-download-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;   /* ลดลงจาก 12px 24px */
  background-color: #10b981;
  color: white;
  border: none;
  border-radius: 10px; /* ลดความโค้งเล็กน้อย */
  font-weight: 500;
  font-family: 'Kanit', sans-serif;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;     /* ลดลงจาก 16px */
  text-decoration: none; /* เอาเส้นใต้ข้อความออก */
}
.pp-download-btn:hover {
  background-color: #059669;
  box-shadow: 0 4px 12px rgba(16,185,129,0.3);
}

.pp-download-btn:hover {background-color: #059669; box-shadow: 0 4px 12px rgba(16,185,129,0.3);}
.pp-download-icon {width: 16px; height: 16px;}

/* Hidden */
.pp-hidden {display: none;}

/* Toast */
.pp-toast {
  position: fixed; top: 16px; right: 16px;
  background-color: #10b981; color: white;
  padding: 12px 16px; border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transform: translateX(100%); transition: transform 0.3s ease;
  z-index: 100;
}
.pp-toast.pp-show {transform: translateX(0);}
.pp-toast-content {display: flex; align-items: center; font-size: 14px;}
.pp-toast-icon {width: 16px; height: 16px; margin-right: 8px;}
/* ================== DARK MODE ================== */
body.dark-mode {
  background-color: #121212;
  color: #e0e0e0;
}

/* HEADER */
body.dark-mode .pp-header {
  background-color: #1a1a1a;
  border-bottom: 1px solid #2a2a2a;
  box-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
body.dark-mode .pp-header-title {
  color: #e0e0e0;
}
body.dark-mode .pp-header-icon {
  background: linear-gradient(135deg, #2e7d32, #0f5132);
}

/* NAVIGATION */
body.dark-mode .pp-nav {
  background-color: #1a1a1a;
  border-bottom: 1px solid #2a2a2a;
}
body.dark-mode .pp-nav-tab {
  color: #aaa;
}
body.dark-mode .pp-nav-tab.pp-active {
  border-bottom-color: #10b981;
  color: #10b981;
}
body.dark-mode .pp-nav-tab:not(.pp-active):hover {
  color: #c0a040;
  border-bottom-color: #c0a040;
}

/* SECTION */
body.dark-mode .pp-section-title {
  color: #e0e0e0;
}
body.dark-mode .pp-section-description {
  color: #bbb;
}

/* SEARCH */
body.dark-mode .pp-search-input,
body.dark-mode .pp-search-select {
  background-color: #1a1a1a;
  border: 1px solid #333;
  color: #e0e0e0;
}
body.dark-mode .pp-search-input:focus,
body.dark-mode .pp-search-select:focus {
  border-color: #10b981;
  box-shadow: 0 0 0 2px rgba(16,185,129,0.3);
}

/* DOCUMENT CARDS */
body.dark-mode .pp-document-card {
  background-color: #1a1a1a;
  border: 1px solid #333;
  box-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
body.dark-mode .pp-document-title {
  color: #e0e0e0;
}
body.dark-mode .pp-document-description {
  color: #bbb;
}
body.dark-mode .pp-meta-year,
body.dark-mode .pp-meta-separator {
  color: #888;
}

/* DATE BADGE */
body.dark-mode .pp-date-badge {
  background: linear-gradient(135deg, #1e1e1e, #2a2a2a);
  border: 1px solid #333;
}
body.dark-mode .pp-date-number {
  color: #10b981;
}
body.dark-mode .pp-date-month {
  color: #c0a040;
}

/* CATEGORY BADGE */
body.dark-mode .pp-category-badge {
  background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
  border: 1px solid #444;
  color: #fbbf24;
}

/* DOWNLOAD BUTTON */
body.dark-mode .pp-download-btn {
  background-color: #2e7d32;
  color: #fff;
}
body.dark-mode .pp-download-btn:hover {
  background-color: #c0a040;
  box-shadow: 0 4px 16px rgba(192,160,64,0.3);
}

/* TOAST */
body.dark-mode .pp-toast {
  background-color: #2e7d32;
  color: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.6);
}