@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


.content {
  display: flex;
  flex-direction: row;   /* จาก column → row */
  justify-content: flex-start; /* เริ่มจากซ้าย */
  align-items: center;  /* จัดให้อยู่กึ่งกลางแนวตั้ง */
  height: 100vh;
  padding-left: 40px;   /* เว้นระยะซ้าย */
  gap: 40px;            /* ระยะห่างระหว่าง heading กับรูป */
}

@media (max-width: 768px) {
  .content {
    flex-direction: column;
    height: auto;
    padding-left: 20px;
    padding-right: 20px;
    gap: 24px;
  }
  
  .heading {
    max-width: 100%;
    font-size: 1.8rem;
    padding-left: 16px;
  }
  
  .profile-img {
    width: 60vw;
    max-width: 200px;
    order: 0; /* ปรับลำดับปกติ */
    margin: 0 auto;
  }
}

html, body {
  height: 100%;      /* ให้ความสูงเต็มจอ */
  margin: 0;         /* ลบ margin default ของ browser */
  padding: 0;        /* ลบ padding default */
  font-family: "Montserrat", sans-serif;  /* ตั้งฟอนต์ด้วย */
}

/* ...existing code... */
.heading {
  position: absolute;   /* ตั้งตำแหน่งแบบ absolute */
  top: 40px;            /* เว้นระยะห่างจากบน 40px */
  left: 40px;           /* เว้นระยะห่างจากซ้าย 40px */
  font-size: 2.5rem;
  font-weight: bold;
  color: #fffbe7;
  text-align: left;
  letter-spacing: 2px;
  text-shadow: 2px 4px 12px #0d47a1, 0 1px 0 #fff;
  border-left: 6px solid #ffd700;
  padding-left: 24px;
  background: rgba(13, 71, 161, 0.15);
  border-radius: 8px 24px 24px 8px;
  box-shadow: 0 4px 24px 0 rgba(66,165,245,0.15);
  max-width: 40vw;      
  min-width: 280px;     
  margin: 0;            /* เคลียร์ margin */
  z-index: 10;          /* ให้แสดงเหนือองค์ประกอบอื่น */
}

body {
    min-height: 100vh;
    margin: 0;
    background: linear-gradient(to bottom, #0d47a1 0%, #42a5f5 70%, #e3f2fd 100%);
    position: relative;
    overflow: hidden;
    font-family: "Montserrat", sans-serif;
}

.star {
    position: absolute;
    background: radial-gradient(circle, #ffd700 60%, transparent 100%);
    border-radius: 50%;
    opacity: 0.8;
}

/* ดาวสีทองกระพริบ */
.star {
    position: absolute;
    background: radial-gradient(circle, #ffd700 60%, transparent 100%);
    border-radius: 50%;
    opacity: 0.8;
    animation: twinkle 2.5s infinite ease-in-out;
}

/* ดาวห้าแฉก */
.star {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #ffd700;
    opacity: 0.8;
    animation: twinkle 2.5s infinite ease-in-out;
    clip-path: polygon(
        50% 0%,
        61% 35%,
        98% 35%,
        68% 57%,
        79% 91%,
        50% 70%,
        21% 91%,
        32% 57%,
        2% 35%,
        39% 35%
    );
}

/* เพิ่มดาวฝั่งซ้าย-ขวา */
/* เพิ่มขนาดดาวแต่ละดวง */
/* ดาวดวงที่ 3 มันโดนรูป */
.star1 { width: 16px; height: 16px; top: 15%; left: 10%; }
.star2 { width: 10px; height: 10px; top: 25%; left: 85%; }
/* .star3 { width: 20px; height: 20px; top: 40%; left: 20%; } */
.star4 { width: 12px; height: 12px; top: 60%; left: 80%; }
.star5 { width: 8px; height: 8px; top: 70%; left: 15%; }
.star6 { width: 14px; height: 14px; top: 80%; left: 90%; }
.star7 { width: 10px; height: 10px; top: 50%; left: 5%; }
.star8 { width: 12px; height: 12px; top: 30%; left: 95%; }
.star9 { width: 8px; height: 8px; top: 10%; left: 75%; }
.star10 { width: 16px; height: 16px; top: 85%; left: 25%; }
.star11 { width: 12px; height: 12px; top: 12%; left: 60%; }
.star12 { width: 10px; height: 10px; top: 35%; left: 75%; }
.star13 { width: 14px; height: 14px; top: 55%; left: 30%; }
.star14 { width: 8px; height: 8px; top: 65%; left: 95%; }
.star15 { width: 16px; height: 16px; top: 78%; left: 40%; }

/* รูปตัวเองหน้าindex.html */
.profile-img {
  width: 30vw;                /* ขนาดตาม viewport กว้าง 30% */
  max-width: 500px;           
  height: auto;
  aspect-ratio: 1 / 1;        /* รูปสี่เหลี่ยมจตุรัส */
  object-fit: cover;
  border-radius: 50%;
  border: 5px solid #fff;
  box-shadow: 0 4px 16px rgba(13, 71, 161, 0.15);
  background: #fff;
  display: block;
  margin-left: 60px; /* ปรับค่านี้เพื่อขยับรูปไปขวา */
}

.main-nav {
    position: absolute;
    top: 40px; /* ปรับขยับเมนูลงมาจากด้านบน */
    right: 50px; /* ปรับขยับเมนูมาทางซ้าย */
    left: auto;
    z-index: 10;
}

.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;         /* เรียงแนวนอน */
    gap: 16px;             /* ระยะห่างระหว่างเมนู */
}
.main-nav li {
    margin-bottom: 0;      /* ไม่ต้องมีระยะห่างแนวตั้ง */
}

.main-nav a {
    text-decoration: none;
    color: #fffbe7;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 8px 20px;
    border-radius: 16px;
    background: rgba(13, 71, 161, 0.25);
    transition: background 0.2s, color 0.2s;
    display: inline-block;
}

.main-nav a:hover {
    background: #ddff00;
    color: #0d47a1;
}

/* Animation กระพริบ */
@keyframes twinkle {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 0.2; }
}
/* เริ่มหน้า abount */
.about-heading {
    position: absolute;
    top: -90px;
    left: 40px;
    color: #000000;
    font-size: 2.2rem;
    font-weight: bold;
    margin: 0;
    letter-spacing: 2px;
    background: rgba(255, 255, 255, 0.7);
    padding: 8px 28px 8px 18px;
    border-radius: 18px 32px 32px 8px;
    box-shadow: 0 2px 12px 0 rgb(255, 255, 255);
    z-index: 20;
    border-left: 6px solid #ffd700; /* ขอบซ้ายสีเหลือง */
}

.about-box {
    max-width: 1200px;
    margin: 160px auto 0 auto; /* ✅ ขยับกล่องลง ไม่ให้ทับ h1 */
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 6px 32px 0 rgba(66,165,245,0.18);
    padding: 10px 40px 40px 40px;
    color: #222;
    font-size: 1.8rem;
    line-height: 1.8;
    text-align: left;
    word-break: break-word;
    font-family: "Montserrat", sans-serif;
}

.about-box h1 {
    margin-top: 0;
    color: #0d47a1;
    font-size: 2rem;
    margin-bottom: 18px;
    text-align: left;
}

.back-link {
    position: fixed;
    left: 24px;
    bottom: 24px;
    background: #fff;
    color: #0d47a1;
    padding: 18px 36px;
    border-radius: 24px 36px 36px 24px;
    box-shadow: 0 4px 24px 0 rgba(66,165,245,0.13);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.08rem;
    display: flex;
    align-items: center;
    min-width: 180px;
    min-height: 48px;
    transition: background 0.2s, color 0.2s;
    z-index: 50;
}

.back-link:hover {
    background: #ffd700;
    color: #0d47a1;
}

.about-box p {
    margin-bottom: 0;
    line-height: 2;
}

/* หน้า ช่องทางติดต่อ */

.contact-heading {
    position: absolute;
    top: 60px;
    left: 40px;
    color: #000000;
    font-size: 2.2rem;
    font-weight: bold;
    margin: 0;
    letter-spacing: 2px;
    background: rgba(255, 255, 255, 0.7); 
    padding: 8px 28px 8px 18px;
    border-radius: 24px 36px 36px 24px;
    box-shadow: 0 4px 24px 0 rgba(66,165,245,0.18);
    z-index: 20;
    border-left: 6px solid #ffd700; /* ขอบซ้ายสีเหลือง */
}

.contact-list {
    position: absolute;
    top: 120px;        
    left: 40px;       
    max-width: 900px;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 4px 24px 0 rgba(66,165,245,0.13);
    padding: 32px 32px 32px 32px;
    font-size: 2.2rem;
    color: #222;
    list-style: none;
    z-index: 10;
}

.contact-list li {
    margin-bottom: 18px;
    font-weight: 500;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
}

.contact-list li a {
    color: #0d47a1;
    text-decoration: none;
    font-weight: 600;
    margin-left: 8px;
    transition: color 0.2s;
}

.contact-list li a:hover {
    color: #ffd700;
    text-decoration: underline;
}

/* หน้า Hobby */

.hobby-heading {
    position: absolute;
    top: 60px;
    left: 40px;
    color: #000000;
    font-size: 2.2rem;
    font-weight: bold;
    margin: 0;
    letter-spacing: 2px;
    background: rgba(255, 255, 255, 0.7);
    padding: 8px 28px 8px 18px;
    border-radius: 24px 36px 36px 24px;
    box-shadow: 0 4px 24px 0 rgba(66,165,245,0.18);
    z-index: 20;
    border-left: 6px solid #ffd700; /* ขอบซ้ายสีเหลือง */
}

.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 48px;              /* เพิ่มช่องว่างระหว่างรูป */
  flex-wrap: wrap;
 padding: 180px 20px 60px 20px;
  max-width: 100vw;
  margin: 0 auto;
}

.image-container img {
  width: 22vw;              /* เพิ่มขนาดจาก 18vw → 22vw */
  max-width: 300px;         /* เพิ่ม max-width ได้ตามต้องการ */
  aspect-ratio: 1 / 1;
  border-radius: 0;         /* เปลี่ยนจากวงกลม → เป็นสี่เหลี่ยม */
  border: 4px solid #fff;
  object-fit: cover;
  background: #fff;
  box-shadow: 0 4px 16px rgba(13, 71, 161, 0.15);
}

.image-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image-caption {
  margin-top: 12px;
  font-size: 1.2rem;
  font-weight: 500;
  color: #fffbe7;
  text-shadow: 1px 1px 2px #0d47a1;
  text-align: center;
}

/* เกี่ยวกับจอมือถือ */
@media (max-width: 768px) {
  .image-container img {
    width: 70vw;          /* ขยายภาพให้ใหญ่ขึ้นบนจอเล็ก */
    max-width: 280px;
    border-radius: 0;     /* คงไว้ให้เป็นสี่เหลี่ยม */
  }
}

/* จอเล็ก: โน้ตบุ๊ก 14 นิ้ว */
@media (max-width: 1366px) {
  .about-box {
    font-size: 1.4rem;
    padding: 20px;
    max-width: 110vw; /* เพิ่มให้กล่องกว้างขึ้น */
  }
}

/* จอกลาง: 15–17 นิ้ว */
@media (min-width: 1367px) and (max-width: 1920px) {
  .about-box {
    font-size: 1.6rem;
    max-width: 1000px; /* หรือ 85vw */
  }
}

/* จอ 24 นิ้ว */
@media (min-width: 1921px) and (max-width: 2560px) {
  .about-box {
    font-size: 1.8rem;
    max-width: 1100px;
  }
}

/* จอใหญ่มาก 27 นิ้วขึ้นไป */
@media (min-width: 2561px) {
  .about-box {
    font-size: 2rem;
    max-width: 1200px;
  }
}


@media (max-width: 768px) {
  .contact-list {
    font-size: 1.6rem;
    padding: 24px;
  }
}





/* หน้า gallery */
.gallery-heading {
    position: absolute;
    top: 60px;
    left: 40px;
    color: #000000;
    font-size: 2.2rem;
    font-weight: bold;
    margin: 0;
    letter-spacing: 2px;
    background: rgba(255, 255, 255, 0.7);
    padding: 8px 28px 8px 18px;
    border-radius: 24px 36px 36px 24px;
    box-shadow: 0 4px 24px 0 rgba(66,165,245,0.18);
    z-index: 20;
    border-left: 6px solid #ffd700; /* ขอบซ้ายสีเหลือง */
}