﻿<!-- โหลดฟอนต์ก่อน (ถ้ามีไฟล์ fonts.css จริง) -->
<link rel="stylesheet" href="65/newfont/css/fonts.css">

<style>
/* =========================
   Typography / Font
   ========================= */

/* ถ้าคุณมี Prompt.ttf จริงอยู่ในโฟลเดอร์นี้ ให้ใช้แบบนี้ */
@font-face {
  font-family: "Prompt";
  src: url("65/newfont/css/Prompt.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body{
  font-family: "Prompt", sans-serif;
}

/* h8 ไม่มีใน HTML  แนะนำใช้ class แทน */
.h8 {
  text-shadow:
    0px 4px 3px rgba(0,0,0,0.4),
    0px 8px 13px rgba(0,0,0,0.1),
    0px 18px 23px rgba(0,0,0,0.1);
}

/* =========================
   Picture Frame Hover
   ========================= */
.picture-frame {
  position: relative;
  display: inline-block;
  overflow: hidden;
  border-radius: 12px; /* เพิ่มความนุ่มนวล */
}

.picture-frame img {
  display: block;
  transition: transform 0.3s ease;
  will-change: transform;
}

.picture-frame::before,
.picture-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.picture-frame::after {
  inset: 10px; /* กรอบด้านใน */
  background-color: rgba(0, 0, 0, 0.20);
}

.picture-frame:hover img {
  transform: scale(1.08); /* เดิม 2.05 ใหญ่เกินจนแตก/หลุดกรอบ */
}

.picture-frame:hover::before,
.picture-frame:hover::after {
  opacity: 1;
}

/* =========================
   Navigation Menu
   ========================= */
.navbar { padding: 0; }

.navbar ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  align-items: center;
}

.navbar li { position: relative; }

.navbar a,
.navbar a:focus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 10px 30px;
  font-size: 14px;
  color: #fff;
  white-space: nowrap;
  transition: 0.3s;
  text-decoration: none;
}

.navbar a i,
.navbar a:focus i {
  font-size: 12px;
  line-height: 0;
  margin-left: 5px;
}

.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover > a {
  color: #a2cce3;
}

/* Dropdown */
.navbar .dropdown ul {
  display: block;
  position: absolute;
  left: 14px;
  top: calc(100% + 30px);
  margin: 0;
  padding: 10px 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  transition: 0.3s;
  border-radius: 10px;
}

.navbar .dropdown ul li { min-width: 200px; }

.navbar .dropdown ul a {
  padding: 10px 20px;
  font-size: 14px;
  text-transform: none;
  color: #1c3745;
}

.navbar .dropdown ul a:hover,
.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover > a {
  color: #68A4C4;
}

.navbar .dropdown:hover > ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
}

/* Dropdown level 2 */
.navbar .dropdown .dropdown ul {
  top: 0;
  left: calc(100% - 30px);
  visibility: hidden;
}

.navbar .dropdown .dropdown:hover > ul {
  opacity: 1;
  top: 0;
  left: 100%;
  visibility: visible;
}

/* Mobile */
.mobile-nav-toggle {
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  display: none;
  line-height: 0;
  transition: 0.5s;
}

.navbar-mobile {
  position: fixed;
  overflow: hidden;
  inset: 0;
  background: rgba(17, 38, 48, 0.9);
  transition: 0.3s;
}

.navbar-mobile .mobile-nav-toggle {
  position: absolute;
  top: 15px;
  right: 15px;
}

.navbar-mobile ul {
  display: block;
  position: absolute;
  top: 55px;
  right: 15px;
  bottom: 15px;
  left: 15px;
  padding: 10px 0;
  background-color: #fff;
  overflow-y: auto;
  transition: 0.3s;
  border-radius: 12px;
}

.navbar-mobile a,
.navbar-mobile a:focus {
  padding: 10px 20px;
  font-size: 15px;
  color: #1e4356;
}

.navbar-mobile a:hover,
.navbar-mobile .active,
.navbar-mobile li:hover > a {
  color: #68A4C4;
}

.navbar-mobile .getstarted,
.navbar-mobile .getstarted:focus {
  margin: 15px;
}

.navbar-mobile .dropdown ul {
  position: static;
  display: none;
  margin: 10px 20px;
  padding: 10px 0;
  opacity: 1;
  visibility: visible;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  border-radius: 10px;
}

.navbar-mobile .dropdown ul li { min-width: 200px; }

.navbar-mobile .dropdown ul a { padding: 10px 20px; }

.navbar-mobile .dropdown > .dropdown-active { display: block; }
</style>
