/* 기본 리셋 및 다크 모드 설정 */
body {
  /* --- Background Image Setting --- */
  background-image: url("https://cdn.pixabay.com/photo/2017/10/18/10/21/blue-2863550_1280.png"); /* ជំនួស URL នេះដោយ URL រូបភាពទង់ជាតិពិតប្រាកដ */
  background-size: cover; 
  background-attachment: fixed; 
  background-color: #121212; 

  color: #e0e0e0;
  font-family: "Inter", sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.6; 
}

/* 하이라이트 색상 */
.highlight {
  color: #39ff14; /* 라임 그린 */
  font-weight: 700;
}

/* 히어로 섹션 스타일 - GLASSMORPHISM 적용 */
.hero-section {
  text-align: center;
  padding: 100px 20px;
  position: relative;
  overflow: hidden;
  
  /* **ថ្មី:** បន្ថែម Glassmorphism លើ Header */
  background: rgba(255, 255, 255, 0.1); /* តម្លាភាពស្រាលជាងកាត */
  backdrop-filter: blur(8px); /* ភាពព្រិលស្រាលជាងមុន */
  -webkit-backdrop-filter: blur(8px); 
  border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* ព្រំដែនក្រោមស្តើង */
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.hero-section h1 {
  font-size: 3.5em;
  margin-bottom: 10px;
  font-weight: 900;
  text-shadow: 0 0 15px rgba(57, 255, 20, 0.7); 
}
.hero-section p {
  font-size: 1.2em;
  color: #a0a0a0;
}

/* 기술 카드 컨테이너 (그리드 레이아웃) */
.tech-cards-container {
  display: grid;
  grid-template-columns: 1fr; 
  gap: 30px;
  padding: 50px 5%;
}

/* 개별 기술 카드 스타일 - GLASSMORPHISM (ស្អាត និងទាក់ទាញ) */
.tech-card {
  background: rgba(255, 255, 255, 0.2); 
  backdrop-filter: blur(12px); 
  -webkit-backdrop-filter: blur(12px); 
  
  padding: 30px;
  border-radius: 18px; 
  border: 1px solid rgba(255, 255, 255, 0.2); 
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
  
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  text-align: center; 
  overflow: hidden; 
}

.tech-card:hover {
  transform: translateY(-8px) scale(1.01); 
  box-shadow: 0 15px 50px rgba(0, 196, 255, 0.4); 
  background: rgba(255, 255, 255, 0.35); 
}


/* រូបភាព: រក្សារូបតំណាងឱ្យមើលទៅស្អាតនៅលើផ្ទៃខាងក្រោយកញ្ចក់ */
.tech-card img {
    width: 100px; 
    height: 100px; 
    object-fit: contain; 
    border-radius: 50%; 
    margin-bottom: 15px; 
    background-color: rgba(0, 0, 0, 0.05); 
    padding: 10px; 
    border: 3px solid rgba(255, 255, 255, 0.8); 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

/* ចលនារូបភាពនៅពេលដាក់ Mouse ពីលើកាត */
.tech-card:hover img {
    transform: scale(1.15) rotate(-3deg); 
}

.tech-card h2 {
  font-size: 1.8em;
  color: #ffffff;
  margin-top: 0;
}
.tech-card .role {
  font-size: 0.95em; 
  color: #00c4ff; 
  font-weight: 600;
  margin-bottom: 15px;
}

/* 콘텐츠 관리 섹션 */
.management-section {
  padding: 50px 5%;
  /* **ថ្មី:** បន្ថែម Glassmorphism លើ Footer */
  background: rgba(13, 13, 13, 0.7);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px); 
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  
  text-align: center;
}

/* --- ព័ត៌មានលម្អិតអ្នកអភិវឌ្ឍន៍ (Developer Insights) --- */

.developer-insights {
  margin-top: 25px; 
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.3); 
  text-align: left; 
}

.developer-insights h3 {
  font-size: 1.1em;
  color: #39ff14; 
  margin-top: 0;
  margin-bottom: 10px;
}

.developer-insights ul {
  list-style: none; 
  padding-left: 0;
  margin: 0;
}

.developer-insights ul li {
  font-size: 0.9em;
  margin-bottom: 8px;
  padding-left: 15px;
  position: relative;
  color: #ffffff; 
  line-height: 2.1; 
}

/* រចនាបថតំណភ្ជាប់ជាប៊ូតុង */
.developer-insights ul li a {
    color: #ffd700; 
    text-decoration: none; 
    transition: color 0.3s ease, background-color 0.3s ease, border 0.3s ease;
    display: inline-block; 
    font-weight: 500;
    
    padding: 5px 10px; 
    border: 1px solid rgba(255, 215, 0, 0.5); 
    background-color: rgba(255, 215, 0, 0.1); 
    border-radius: 6px; 
    margin-top: 5px; 
    margin-left: -5px; 
}

/* ពណ៌តំណភ្ជាប់ពេល Hover */
.developer-insights ul li a:hover {
    color: #121212; 
    background-color: #ffd700; 
    text-shadow: none; 
    font-weight: 700;
    border-color: #ffd700;
}


/* រូបតំណាង Bullet Point */
.developer-insights ul li::before {
  content: "→"; 
  color: #00c4ff; 
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 0.25em; 
}

/* --- រចនាបថពណ៌កាតនីមួយៗ (Hover Color Overrides) --- */

/* HTML កាត */
.tech-card.html .role {
    color: #ff6e40; 
}
.tech-card.html:hover {
    border-color: #ff6e40; 
    box-shadow: 0 15px 50px rgba(255, 110, 64, 0.4); 
}
.tech-card.html:hover img {
    box-shadow: 0 0 25px rgba(255, 110, 64, 0.8);
}

/* CSS កាត */
.tech-card.css .role {
    color: #00bfff; 
}
.tech-card.css:hover {
    border-color: #00bfff; 
    box-shadow: 0 15px 50px rgba(0, 191, 255, 0.4); 
}
.tech-card.css:hover img {
    box-shadow: 0 0 25px rgba(0, 191, 255, 0.8);
}

/* JavaScript កាត */
.tech-card.javascript .role {
    color: #f7df1e; 
}
.tech-card.javascript:hover {
    border-color: #f7df1e; 
    box-shadow: 0 15px 50px rgba(247, 223, 30, 0.4); 
}
.tech-card.javascript:hover img {
    box-shadow: 0 0 25px rgba(247, 223,