/** * Template Name: iPortfolio * Template URL:
https://bootstrapmade.com/iportfolio-bootstrap-portfolio-websites-template/ *
Updated: Jun 29 2024 with Bootstrap v5.3.3 * Author: BootstrapMade.com *
License: https://bootstrapmade.com/license/ */
/*-------------------------------------------------------------- # Font & Color
Variables # Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/ /* Fonts */
:root { --default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple
Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--heading-font: "Raleway", sans-serif; --nav-font: "Poppins", sans-serif; } /*
Global Colors - The following color variables are used throughout the website.
Updating them here will change the color scheme of the entire website */ :root {
--background-color: #ffffff; /* Background color for the entire website,
including individual sections */ --default-color: #272829; /* Default color used
for the majority of the text content across the entire website */
--heading-color: #050d18; /* Color for headings, subheadings and title
throughout the website */ --accent-color: #149ddd; /* Accent color that
represents your brand on the website. It's used for buttons, links, and other
elements that need to stand out */ --surface-color: #ffffff; /* The surface
color is used as a background of boxed elements within sections, such as cards,
icon boxes, or other elements that require a visual separation from the global
background. */ --contrast-color: #ffffff; /* Contrast color for text, ensuring
readability against backgrounds of accent, heading, or default colors. */ } /*
Nav Menu Colors - The following color variables are used specifically for the
navigation menu. They are separate from the global colors to allow for more
customization options */ :root { --nav-color: #a8a9b4; /* The default color of
the main navmenu links */ --nav-hover-color: #ffffff; /* Applied to main navmenu
links when they are hovered over or active */ --nav-mobile-background-color:
#040b14; /* Used as the background color for mobile navigation menu */
--nav-dropdown-background-color: #040b14; /* Used as the background color for
dropdown items that appear when hovering over primary navigation items */
--nav-dropdown-color: #a8a9b4; /* Used for navigation links of the dropdown
items in the navigation menu. */ --nav-dropdown-hover-color: #ffffff; /* Similar
to --nav-hover-color, this color is applied to dropdown navigation links when
they are hovered over. */ } /* Color Presets - These classes override global
colors when applied to any section or element, providing reuse of the sam color
scheme. */ .light-background { --background-color: #f4fafd; --surface-color:
#ffffff; } .dark-background { --background-color: #040b14; --default-color:
#ffffff; --heading-color: #ffffff; --surface-color: #151f2b; --contrast-color:
#ffffff; } /* Smooth scroll */ :root { scroll-behavior: smooth; }
/*-------------------------------------------------------------- # General
Styling & Shared Classes
--------------------------------------------------------------*/ body { color:
var(--default-color); background-color: var(--background-color); font-family:
var(--default-font); transition: 0.5s ease-out; /* <-- เพิ่มบรรทัดนี้ */ } a {
color: var(--accent-color); text-decoration: none; transition: 0.3s; } a:hover {
color: color-mix(in srgb, var(--accent-color), transparent 25%);
text-decoration: none; } h1, h2, h3, h4, h5, h6 { color: var(--heading-color);
font-family: var(--heading-font); } /* PHP Email Form Messages
------------------------------*/ .php-email-form .error-message { display: none;
background: #df1529; color: #ffffff; text-align: left; padding: 15px;
margin-bottom: 24px; font-weight: 600; } .php-email-form .sent-message {
display: none; color: #ffffff; background: #059652; text-align: center; padding:
15px; margin-bottom: 24px; font-weight: 600; } .php-email-form .loading {
display: none; background: var(--surface-color); text-align: center; padding:
15px; margin-bottom: 24px; } .php-email-form .loading:before { content: "";
display: inline-block; border-radius: 50%; width: 24px; height: 24px; margin: 0
10px -6px 0; border: 3px solid var(--accent-color); border-top-color:
var(--surface-color); animation: php-email-form-loading 1s linear infinite; }
@keyframes php-email-form-loading { 0% { transform: rotate(0deg); } 100% {
transform: rotate(360deg); } }
/*-------------------------------------------------------------- # Global Header
--------------------------------------------------------------*/ .header {
color: var(--default-color); background-color: var(--background-color);
position: fixed; top: 0; left: 0; bottom: 0; padding: 0 15px; width: 300px;
transition: all ease-in-out 0.3s; overflow-y: auto; z-index: 997; border-right:
1px solid color-mix(in srgb, var(--default-color), transparent 90%); } .header
.profile-img img { margin: 15px auto; display: block; width: 120px; border: 8px
solid color-mix(in srgb, var(--default-color), transparent 85%); } .header .logo
{ line-height: 1; margin-bottom: 15px; } .header .logo img { max-height: 32px;
margin-right: 8px; } .header .logo h1 { font-size: 24px; margin: 0; font-weight:
700; color: var(--heading-color); } .header .social-links { margin: 0 0 20px 0;
} .header .social-links a { font-size: 16px; display: inline-flex; align-items:
center; justify-content: center; background: color-mix(in srgb,
var(--default-color), transparent 90%); color: var(--default-color); margin: 0
2px; border-radius: 50%; text-align: center; width: 40px; height: 40px;
transition: 0.3s; } .header .social-links a:hover { color:
var(--contrast-color); background: var(--accent-color); } @media (min-width:
1200px) { .header ~ main, .header ~ #footer { margin-left: 300px; } } @media
(max-width: 1199px) { .header { left: -100%; } } .header.header-show { left: 0;
} .header .header-toggle { color: var(--contrast-color); background-color:
var(--accent-color); font-size: 22px; display: flex; align-items: center;
justify-content: center; width: 40px; height: 40px; border-radius: 50%; cursor:
pointer; position: fixed; top: 15px; right: 15px; z-index: 9999; transition:
background-color 0.3s; } .header .header-toggle:hover { color:
var(--contrast-color); background-color: color-mix(in srgb, var(--accent-color)
90%, white 15%); }
/*-------------------------------------------------------------- # Navigation
Menu --------------------------------------------------------------*/
.mobile-nav-toggle { display: none; } .navmenu { padding: 0; z-index: 9997; }
.navmenu ul { list-style: none; padding: 0 0 20px 0; margin: 0; } .navmenu a,
.navmenu a:focus { color: var(--nav-color); padding: 15px 10px; font-family:
var(--nav-font); font-size: 16px; font-weight: 400; display: flex; align-items:
center; white-space: nowrap; transition: 0.3s; width: 100%; } .navmenu a
.navicon, .navmenu a:focus .navicon { font-size: 20px; margin-right: 10px; }
.navmenu a .toggle-dropdown, .navmenu a:focus .toggle-dropdown { font-size:
12px; line-height: 0; margin-left: auto; width: 30px; height: 30px; display:
flex; align-items: center; justify-content: center; border-radius: 50%;
transition: 0.3s; flex-shrink: 0; background-color: color-mix(in srgb,
var(--accent-color), transparent 90%); } .navmenu a .toggle-dropdown:hover,
.navmenu a:focus .toggle-dropdown:hover { background-color: var(--accent-color);
color: var(--contrast-color); } .navmenu a:hover, .navmenu .active, .navmenu
.active:focus { color: var(--nav-hover-color); } .navmenu a:hover .navicon,
.navmenu .active .navicon, .navmenu .active:focus .navicon { color:
var(--accent-color); } .navmenu .active .toggle-dropdown, .navmenu .active:focus
.toggle-dropdown { background-color: var(--accent-color); color:
var(--contrast-color); transform: rotate(180deg); } .navmenu .dropdown {
display: block; } .navmenu .dropdown a, .navmenu .dropdown a:focus { color:
--nav-dropdown-color; } .navmenu .dropdown a:hover, .navmenu .dropdown .active,
.navmenu .dropdown .active:focus { color: var(--nav-dropdown-hover-color); }
.navmenu .dropdown ul { position: static; display: none; z-index: 99; padding:
5px 10px; margin: 5px 10px; background-color:
var(--nav-dropdown-background-color); border: 1px solid color-mix(in srgb,
var(--default-color), transparent 90%); box-shadow: none; transition: all 0.5s
ease-in-out; } .navmenu .dropdown ul ul { background-color: rgba(33, 37, 41,
0.1); } .navmenu .dropdown > .dropdown-active { display: block;
background-color: rgba(33, 37, 41, 0.03); }
/*-------------------------------------------------------------- # Global Footer
--------------------------------------------------------------*/ .footer {
color: var(--default-color); background-color: var(--background-color);
font-size: 14px; padding: 40px 0; position: relative; border-top: 1px solid
color-mix(in srgb, var(--default-color), transparent 90%); } .footer .copyright
p { margin-bottom: 0; } .footer .credits { margin-top: 4px; font-size: 13px;
text-align: center; }
/*-------------------------------------------------------------- # Preloader
--------------------------------------------------------------*/ #preloader {
position: fixed; inset: 0; z-index: 999999; overflow: hidden; background:
var(--background-color); transition: all 0.6s ease-out; } #preloader:before {
content: ""; position: fixed; top: calc(50% - 30px); left: calc(50% - 30px);
border: 6px solid #ffffff; border-color: var(--accent-color) transparent
var(--accent-color) transparent; border-radius: 50%; width: 60px; height: 60px;
animation: animate-preloader 1.5s linear infinite; } @keyframes
animate-preloader { 0% { transform: rotate(0deg); } 100% { transform:
rotate(360deg); } }
/*-------------------------------------------------------------- # Scroll Top
Button --------------------------------------------------------------*/
.scroll-top { position: fixed; visibility: hidden; opacity: 0; right: 15px;
bottom: -15px; z-index: 99999; background-color: var(--accent-color); width:
44px; height: 44px; border-radius: 50px; transition: all 0.4s; } .scroll-top i {
font-size: 24px; color: var(--contrast-color); line-height: 0; }
.scroll-top:hover { background-color: color-mix(in srgb, var(--accent-color),
transparent 20%); color: var(--contrast-color); } .scroll-top.active {
visibility: visible; opacity: 1; bottom: 15px; }
/*-------------------------------------------------------------- # Disable aos
animation delay on mobile devices
--------------------------------------------------------------*/ @media screen
and (max-width: 768px) { [data-aos-delay] { transition-delay: 0 !important; } }
/*-------------------------------------------------------------- # Global Page
Titles & Breadcrumbs
--------------------------------------------------------------*/ .page-title {
color: var(--default-color); background-color: var(--background-color); padding:
25px 0; position: relative; } .page-title h1 { font-size: 24px; font-weight:
700; } .page-title .breadcrumbs ol { display: flex; flex-wrap: wrap; list-style:
none; padding: 0; margin: 0; font-size: 14px; font-weight: 400; } .page-title
.breadcrumbs ol li + li { padding-left: 10px; } .page-title .breadcrumbs ol li +
li::before { content: "/"; display: inline-block; padding-right: 10px; color:
color-mix(in srgb, var(--default-color), transparent 70%); }
/*-------------------------------------------------------------- # Global
Sections --------------------------------------------------------------*/
section, .section { color: var(--default-color); background-color: var(--bg)
!important; padding: 60px 0; overflow: clip; }
/*-------------------------------------------------------------- # Global
Section Titles --------------------------------------------------------------*/
.section-title { padding-bottom: 60px; position: relative; } .section-title h2 {
font-size: 32px; font-weight: 700; margin-bottom: 20px; padding-bottom: 20px;
position: relative; } .section-title h2:after { content: ""; position: absolute;
display: block; width: 50px; height: 3px; background: var(--accent-color); left:
0; bottom: 0; } .section-title p { margin-bottom: 0; }
/*-------------------------------------------------------------- # Hero Section
--------------------------------------------------------------*/ .hero { width:
100%; min-height: 100vh; position: relative; padding: 80px 0; display: flex;
align-items: center; justify-content: center; } .hero img { position: absolute;
inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; z-index:
1; } .hero:before { content: ""; background: color-mix(in srgb,
var(--background-color), transparent 70%); position: absolute; inset: 0;
z-index: 2; } .hero .container { position: relative; z-index: 3; } .hero h2 {
margin: 0; font-size: 64px; font-weight: 700; } .hero p { margin: 5px 0 0 0;
font-size: 26px; } .hero p span { letter-spacing: 1px; border-bottom: 2px solid
var(--accent-color); } .hero .social-links { margin-top: 25px; } .hero
.social-links a { font-size: 24px; display: inline-block; color: color-mix(in
srgb, var(--default-color), transparent 50%); line-height: 1; margin-right:
20px; transition: 0.3s; } .hero .social-links a:hover { color:
var(--accent-color); } @media (max-width: 768px) { .hero h2 { font-size: 32px; }
.hero p { font-size: 20px; } }
/*-------------------------------------------------------------- # About Section
--------------------------------------------------------------*/ .about .content
h2 { font-weight: 700; font-size: 24px; } .about .content ul { list-style: none;
padding: 0; } .about .content ul li { margin-bottom: 20px; display: flex;
align-items: center; } .about .content ul strong { margin-right: 10px; } .about
.content ul i { font-size: 16px; margin-right: 5px; color: var(--accent-color);
line-height: 0; }
/*-------------------------------------------------------------- # Stats Section
--------------------------------------------------------------*/ .stats
.stats-item { padding: 30px; width: 100%; } .stats .stats-item i { color:
var(--accent-color); display: block; font-size: 44px; float: left; line-height:
0; } .stats .stats-item .purecounter { color: var(--heading-color); font-size:
48px; line-height: 40px; display: block; font-weight: 700; margin-left: 60px; }
.stats .stats-item p { color: color-mix(in srgb, var(--default-color),
transparent 40%); padding: 15px 0 0 0; margin: 0 0 0 60px; font-family:
var(--heading-font); font-size: 14px; }
/*-------------------------------------------------------------- # Skills
Section --------------------------------------------------------------*/ .skills
.progress { height: 60px; display: block; background: none; border-radius: 0; }
.skills .progress .skill { color: var(--heading-color); padding: 0; margin: 0 0
6px 0; text-transform: uppercase; display: block; font-weight: 600; font-family:
var(--heading-font); } .skills .progress .skill .val { float: right; font-style:
normal; } .skills .progress-bar-wrap { background: color-mix(in srgb,
var(--default-color), transparent 90%); height: 10px; } .skills .progress-bar {
width: 1px; height: 10px; transition: 0.9s; background-color:
var(--accent-color); }
/*-------------------------------------------------------------- # Resume
Section --------------------------------------------------------------*/ .resume
.resume-title { color: var(--heading-color); font-size: 26px; font-weight: 700;
margin-top: 20px; margin-bottom: 20px; } .resume .resume-item { padding: 0 0
20px 20px; margin-top: -2px; border-left: 2px solid var(--accent-color);
position: relative; } .resume .resume-item h4 { line-height: 18px; font-size:
18px; font-weight: 600; text-transform: uppercase; color: color-mix(in srgb,
var(--default-color), transparent 20%); margin-bottom: 10px; } .resume
.resume-item h5 { font-size: 16px; padding: 5px 15px; display: inline-block;
font-weight: 600; margin-bottom: 10px; } .resume .resume-item ul { padding-left:
20px; } .resume .resume-item ul li { padding-bottom: 10px; } .resume
.resume-item:last-child { padding-bottom: 0; } .resume .resume-item::before {
content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50px;
left: -9px; top: 0; background: var(--background-color); border: 2px solid
var(--accent-color); }
/*-------------------------------------------------------------- # Portfolio
Section --------------------------------------------------------------*/
.portfolio .portfolio-filters { padding: 0; margin: 0 auto 20px auto;
list-style: none; text-align: center; } .portfolio .portfolio-filters li {
cursor: pointer; display: inline-block; padding: 0; font-size: 14px;
font-weight: 400; margin: 0 10px; line-height: 1; text-transform: uppercase;
margin-bottom: 10px; transition: all 0.3s ease-in-out; } .portfolio
.portfolio-filters li:hover, .portfolio .portfolio-filters li.filter-active {
color: var(--accent-color); } .portfolio .portfolio-filters li:first-child {
margin-left: 0; } .portfolio .portfolio-filters li:last-child { margin-right: 0;
} @media (max-width: 575px) { .portfolio .portfolio-filters li { font-size:
14px; margin: 0 5px; } } .portfolio .portfolio-content { position: relative;
overflow: hidden; } .portfolio .portfolio-content img { transition: 0.3s; }
.portfolio .portfolio-content .portfolio-info { opacity: 0; position: absolute;
inset: 0; z-index: 3; transition: all ease-in-out 0.3s; background: rgba(0, 0,
0, 0.6); padding: 15px; } .portfolio .portfolio-content .portfolio-info h4 {
font-size: 14px; padding: 5px 10px; font-weight: 400; color: #ffffff; display:
inline-block; background-color: var(--accent-color); } .portfolio
.portfolio-content .portfolio-info p { position: absolute; bottom: 10px;
text-align: center; display: inline-block; left: 0; right: 0; font-size: 16px;
font-weight: 600; color: rgba(255, 255, 255, 0.8); } .portfolio
.portfolio-content .portfolio-info .preview-link, .portfolio .portfolio-content
.portfolio-info .details-link { position: absolute; left: calc(50% - 40px);
font-size: 26px; top: calc(50% - 14px); color: #fff; transition: 0.3s;
line-height: 1.2; } .portfolio .portfolio-content .portfolio-info
.preview-link:hover, .portfolio .portfolio-content .portfolio-info
.details-link:hover { color: var(--accent-color); } .portfolio
.portfolio-content .portfolio-info .details-link { left: 50%; font-size: 34px;
line-height: 0; } .portfolio .portfolio-content:hover .portfolio-info { opacity:
1; } .portfolio .portfolio-content:hover img { transform: scale(1.1); }
/*-------------------------------------------------------------- # Testimonials
Section --------------------------------------------------------------*/
.testimonials .testimonials-carousel, .testimonials .testimonials-slider {
overflow: hidden; } .testimonials .testimonial-item { box-sizing: content-box;
text-align: center; min-height: 320px; } .testimonials .testimonial-item
.testimonial-img { width: 90px; border-radius: 50%; margin: 0 auto; }
.testimonials .testimonial-item h3 { font-size: 18px; font-weight: bold; margin:
10px 0 5px 0; } .testimonials .testimonial-item h4 { font-size: 14px; color:
color-mix(in srgb, var(--default-color), transparent 20%); margin: 0; }
.testimonials .testimonial-item .quote-icon-left, .testimonials
.testimonial-item .quote-icon-right { color: color-mix(in srgb,
var(--accent-color), transparent 40%); font-size: 26px; line-height: 0; }
.testimonials .testimonial-item .quote-icon-left { display: inline-block; left:
-5px; position: relative; } .testimonials .testimonial-item .quote-icon-right {
display: inline-block; right: -5px; position: relative; top: 10px; transform:
scale(-1, -1); } .testimonials .testimonial-item p { font-style: italic; margin:
0 15px 15px 15px; padding: 20px; background-color: var(--surface-color);
position: relative; margin-bottom: 35px; border-radius: 6px; box-shadow: 0px 2px
15px rgba(0, 0, 0, 0.1); } .testimonials .testimonial-item p::after { content:
""; width: 0; height: 0; border-top: 20px solid var(--surface-color);
border-right: 20px solid transparent; border-left: 20px solid transparent;
position: absolute; bottom: -20px; left: calc(50% - 20px); } .testimonials
.swiper-wrapper { height: auto; } .testimonials .swiper-pagination { margin-top:
40px; position: relative; } .testimonials .swiper-pagination
.swiper-pagination-bullet { width: 12px; height: 12px; background-color:
var(--background-color); opacity: 1; border: 1px solid var(--accent-color); }
.testimonials .swiper-pagination .swiper-pagination-bullet-active {
background-color: var(--accent-color); }
/*-------------------------------------------------------------- # Contact
Section --------------------------------------------------------------*/
.contact .info-wrap { background-color: var(--surface-color); box-shadow: 0px
0px 20px rgba(0, 0, 0, 0.1); padding: 30px; } @media (max-width: 575px) {
.contact .info-wrap { padding: 20px; } } .contact .info-item { margin-bottom:
40px; } .contact .info-item i { font-size: 20px; color: var(--accent-color);
background: color-mix(in srgb, var(--accent-color), transparent 92%); width:
44px; height: 44px; display: flex; justify-content: center; align-items: center;
border-radius: 50px; transition: all 0.3s ease-in-out; margin-right: 15px; }
.contact .info-item h3 { padding: 0; font-size: 18px; font-weight: 700;
margin-bottom: 5px; } .contact .info-item p { padding: 0; margin-bottom: 0;
font-size: 14px; } .contact .info-item:hover i { background:
var(--accent-color); color: var(--contrast-color); } .contact .php-email-form {
background-color: var(--surface-color); height: 100%; padding: 30px; box-shadow:
0px 0px 20px rgba(0, 0, 0, 0.1); } @media (max-width: 575px) { .contact
.php-email-form { padding: 20px; } } .contact .php-email-form
input[type="text"], .contact .php-email-form input[type="email"], .contact
.php-email-form textarea { font-size: 14px; padding: 10px 15px; box-shadow:
none; border-radius: 0; color: var(--default-color); background-color:
var(--surface-color); border-color: color-mix(in srgb, var(--default-color),
transparent 80%); } .contact .php-email-form input[type="text"]:focus, .contact
.php-email-form input[type="email"]:focus, .contact .php-email-form
textarea:focus { border-color: var(--accent-color); } .contact .php-email-form
input[type="text"]::placeholder, .contact .php-email-form
input[type="email"]::placeholder, .contact .php-email-form textarea::placeholder
{ color: color-mix(in srgb, var(--default-color), transparent 70%); } .contact
.php-email-form button[type="submit"] { color: var(--contrast-color);
background: var(--accent-color); border: 0; padding: 10px 30px; transition:
0.4s; border-radius: 50px; } .contact .php-email-form
button[type="submit"]:hover { background: color-mix(in srgb,
var(--accent-color), transparent 25%); }
/*-------------------------------------------------------------- # Portfolio
(Adjusted Styling) # This CSS aims to make images fit, add spacing, and show
caption below the image.
--------------------------------------------------------------*/ .portfolio {
padding-top: 60px; /* เพิ่ม padding ด้านบนของ section */ padding-bottom: 60px;
/* เพิ่ม padding ด้านล่างของ section */ } .portfolio .section-title {
text-align: left; /* จัด Title ให้อยู่ตรงกลาง (ถ้าต้องการ) */ padding-bottom:
30px; } .portfolio .section-title h2 { font-size: 32px; font-weight: 700;
margin-bottom: 20px; color: #333; /* สีของหัวข้อ */ } .portfolio .section-title
p { font-size: 16px; color: #666; /* สีของคำอธิบาย */ margin-bottom: 0; } /*
Portfolio Container & Items */ .portfolio .portfolio-container { display: flex;
/* ใช้ flexbox เพื่อการจัดเรียง */ flex-wrap: wrap; /*
ให้ขึ้นบรรทัดใหม่เมื่อเต็ม */ margin-left: -15px; /* ชดเชย padding ด้านข้างของ
col */ margin-right: -15px; /* ชดเชย padding ด้านข้างของ col */ } .portfolio
.portfolio-item { width: 33.3333%; /* 3 รูปต่อแถว */ padding: 0 15px; /*
ระยะห่างระหว่างรูป */ margin-bottom: 30px; /* ระยะห่างระหว่างแถว */ box-sizing:
border-box; /* สำคัญเพื่อให้ padding ไม่ขยายขนาด item */ } /*
สำหรับหน้าจอขนาดกลาง (2 รูปต่อแถว) */ @media (max-width: 991.98px) { .portfolio
.portfolio-item { width: 50%; /* 2 รูปต่อแถว */ } } /* สำหรับหน้าจอขนาดเล็ก (1
รูปต่อแถว) */ @media (max-width: 767.98px) { .portfolio .portfolio-item { width:
100%; /* 1 รูปต่อแถว */ } } .portfolio .portfolio-item .portfolio-card { height:
100%; /* ทำให้ card สูงเท่ากัน */ display: flex; flex-direction: column; border:
1px solid #eee; /* เพิ่มขอบเล็กน้อย */ border-radius: 8px; /* มนมุม */ overflow:
hidden; /* ซ่อนส่วนเกิน */ box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.08); /*
เงาอ่อนๆ */ transition: all 0.3s ease-in-out; background-color: #fff;
text-decoration: none; /* ลบขีดเส้นใต้ลิงก์ */ color: inherit; /*
ใช้สีตัวอักษรปกติ */ } .portfolio .portfolio-item .portfolio-card:hover {
transform: translateY(-5px); /* เลื่อนขึ้นเล็กน้อยเมื่อ hover */ box-shadow: 0px
8px 25px rgba(0, 0, 0, 0.15); /* เงาเข้มขึ้น */ } /* Image Styling */ .portfolio
.portfolio-item .portfolio-card img { width: 100%; /* ยืดรูปให้เต็มความกว้าง */
height: 250px; /* **กำหนดความสูงคงที่สำหรับรูปภาพ** */ object-fit: cover; /*
**สำคัญ: ทำให้รูปภาพเต็มพื้นที่และตัดส่วนเกินออก** */ display: block; /*
แก้ปัญหาช่องว่างด้านล่างของรูป */ border-bottom: 1px solid #eee; /* ขอบใต้รูป */
} /* Portfolio Info (แสดงรายละเอียดใต้รูป) */ .portfolio .portfolio-item
.portfolio-info { padding: 15px; text-align: center; flex-grow: 1; /* ทำให้ info
ขยายเต็มพื้นที่ที่เหลือ */ } .portfolio .portfolio-item .portfolio-info h4 {
font-size: 1.1rem; font-weight: 600; margin-bottom: 5px; color: #333; }
.portfolio .portfolio-item .portfolio-info p { font-size: 0.85rem; color: #777;
margin-bottom: 0; }
/*-------------------------------------------------------------- # Service
Details Section --------------------------------------------------------------*/
.service-details .services-list { padding: 10px 30px; border: 1px solid
color-mix(in srgb, var(--default-color), transparent 90%); margin-bottom: 20px;
} .service-details .services-list a { display: block; line-height: 1; padding:
8px 0 8px 15px; border-left: 3px solid color-mix(in srgb, var(--default-color),
transparent 70%); margin: 20px 0; color: color-mix(in srgb,
var(--default-color), transparent 20%); transition: 0.3s; } .service-details
.services-list a.active { color: var(--heading-color); font-weight: 700;
border-color: var(--accent-color); } .service-details .services-list a:hover {
border-color: var(--accent-color); } .service-details .services-img {
margin-bottom: 20px; } .service-details h3 { font-size: 26px; font-weight: 700;
} .service-details h4 { font-size: 20px; font-weight: 700; } .service-details p
{ font-size: 15px; } .service-details ul { list-style: none; padding: 0;
font-size: 15px; } .service-details ul li { padding: 5px 0; display: flex;
align-items: center; } .service-details ul i { font-size: 20px; margin-right:
8px; color: var(--accent-color); }
/*-------------------------------------------------------------- # Starter
Section Section --------------------------------------------------------------*/
.starter-section { /* Add your styles here */ } /* === Modern makeover additions
=== */ :root { --bg: #0b0d12; --card: #121623; --text: #e6e8ef; --muted:
#9aa3b2; --accent: #6e7dff; --accent2: #00e0ff; --ring: rgba(255, 255, 255,
0.08); --shadow: 0 10px 30px rgba(0, 0, 0, 0.35); } [data-theme="light"] { --bg:
#f7f8fb; --card: #ffffff; --text: #0d1321; --muted: #5b667a; --accent: #4f46e5;
--accent2: #06b6d4; --ring: rgba(0, 0, 0, 0.08); } html, body { background:
var(--bg); color: var(--text); font-family: Inter, system-ui, -apple-system,
"Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; } h1, h2,
h3, .section-title { font-family: Outfit, Inter, sans-serif; letter-spacing:
0.2px; } /* Glass card + hover float */ .card, .services .service-item,
.portfolio .portfolio-item { background: linear-gradient( 180deg, rgba(255, 255,
255, 0.03), rgba(255, 255, 255, 0.01) ); border: 1px solid var(--ring);
box-shadow: var(--shadow); transition: transform 0.35s ease, box-shadow 0.35s
ease; border-radius: 16px; } .card:hover, .services .service-item:hover,
.portfolio .portfolio-item:hover { transform: translateY(-6px); box-shadow: 0
16px 40px rgba(0, 0, 0, 0.45); } /* Buttons: gradient + magnetic base */ .btn,
.btn-primary, .btn-get-started { position: relative; isolation: isolate;
background: linear-gradient(135deg, var(--accent), var(--accent2)); border:
none; color: #0b0d12; font-weight: 600; border-radius: 12px; padding: 12px 18px;
box-shadow: 0 6px 20px rgba(0, 224, 255, 0.25); transform: translateZ(0);
will-change: transform; } .btn:hover { filter: brightness(1.05); } /* Hero:
gradient motion */ .hero, .home { background: radial-gradient( 1200px 700px at
10% -10%, rgba(110, 125, 255, 0.25), transparent 60% ), radial-gradient( 900px
600px at 110% 10%, rgba(0, 224, 255, 0.18), transparent 60% ),
linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
animation: heroShift 12s ease-in-out infinite alternate; } @keyframes heroShift
{ 0% { background-position: 0 0, 0 0, 0 0; } 100% { background-position: 10%
-4%, -6% 6%, 0 0; } } /* Avatar: blob + gradient ring */ .profile-img { --b:
4px; padding: var(--b); border-radius: 28px; background: linear-gradient(135deg,
var(--accent), var(--accent2)); display: inline-block; } .profile-img img {
border-radius: 42% 58% 36% 64% / 43% 36% 64% 57%; transition: border-radius 1.8s
ease, transform 0.5s ease; } .profile-img:hover img { border-radius: 62% 38% 56%
44% / 43% 56% 44% 57%; transform: rotate(-1deg) scale(1.02); } /* Scroll
progress bar */ .scrollbar { position: fixed; inset: 0 auto auto 0; height: 3px;
width: 0%; background: linear-gradient(90deg, var(--accent), var(--accent2));
z-index: 9999; } /* Theme toggle */ .theme-toggle { position: fixed; right:
18px; bottom: 18px; z-index: 9998; background: var(--card); border: 1px solid
var(--ring); color: var(--text); border-radius: 999px; padding: 10px 12px;
box-shadow: var(--shadow); } /* Misc */ a { color: var(--accent); } .text-muted
{ color: var(--muted) !important; } img[loading="lazy"] { inline-size: 100%;
block-size: auto; } @media (prefers-reduced-motion: reduce) { * { animation:
none !important; transition: none !important; scroll-behavior: auto !important;
} } /* --- Remove blue frame / ring around avatar --- */ .profile-img { padding:
0 !important; background: none !important; border-radius: 0 !important; /*
เอาโค้งกรอบออกด้วยถ้าไม่ต้องการ */ } .profile-img img { border-radius: 50%
!important; /* ให้กลับมาเป็นวงกลมธรรมดา */ transform: none !important;
box-shadow: none !important; } /* ถ้าฝั่งซ้ายยังมีแผง/การ์ดพื้นหลังฟ้า ให้ลบทิ้ง
*/ #header .profile { background: transparent !important; box-shadow: none
!important; border: none !important; } /* ===== Skills: banner + logo grid =====
*/ .skills-banner { aspect-ratio: 16 / 9; /* รักษาสัดส่วนเวลาโหลด */ width:
100%; border-radius: 16px; overflow: hidden; background: var(--card);
box-shadow: var(--shadow); } .skills-gif { width: 100%; height: 100%;
object-fit: cover; display: block; } .tech-logos { --logo-size: 56px; /*
ปรับขนาดไอคอนหลักได้จากตรงนี้ */ --gap: 18px; display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--gap);
align-items: stretch; } .tech { background: linear-gradient( 180deg, rgba(255,
255, 255, 0.03), rgba(255, 255, 255, 0.01) ); border: 1px solid var(--ring);
border-radius: 16px; padding: 16px 14px; text-align: center; box-shadow:
var(--shadow); transition: transform 0.25s ease, box-shadow 0.25s ease,
background 0.25s ease; height: 100%; } .tech:hover { transform: translateY(-4px)
scale(1.02); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); } .tech img { width:
var(--logo-size); height: var(--logo-size); object-fit: contain; display:
inline-block; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25)); } .tech
figcaption { margin-top: 10px; font-weight: 600; letter-spacing: 0.2px; color:
#111827 !important; opacity: 1; line-height: 1; font-size: 0.95rem; } /* ลด
motion สำหรับคนที่ตั้งค่าลดแอนิเมชัน */ @media (prefers-reduced-motion: reduce)
{ .tech, .tech:hover { transform: none !important; box-shadow: var(--shadow)
!important; } } /* Banner container */ .skills-typed-banner { border-radius:
16px; background: radial-gradient( 1200px 700px at 10% -10%, rgba(110, 125, 255,
0.18), transparent 60% ), radial-gradient( 900px 600px at 110% 10%, rgba(0, 224,
255, 0.12), transparent 60% ), linear-gradient(180deg, rgba(255, 255, 255,
0.02), rgba(255, 255, 255, 0)); box-shadow: var(--shadow); padding: clamp(24px,
5vw, 48px); margin-bottom: 24px; } /* ===== Portfolio grid: คุมจำนวนคอลัมน์
===== */ .portfolio-grid { display: grid; grid-template-columns: repeat(1,
minmax(0, 1fr)); /* มือถือ: 1 รูป/แถว */ gap: 24px; /* ระยะห่างการ์ด */ } /*
แท็บเล็ตขึ้นไป: 2 รูป/แถว */ @media (min-width: 400px) { .portfolio-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* เดสก์ท็อปขึ้นไป: 3
รูป/แถว (ตามที่ต้องการ) */ @media (min-width: 992px) { .portfolio-grid {
grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ===== การ์ด + รูป
ให้นิ่ง ไม่เด้ง ===== */ .portfolio-card { position: relative; display: block;
border-radius: 16px; overflow: hidden; background: var(--card); aspect-ratio: 1
/ 1; /* การ์ดเป็นสี่เหลี่ยมจัตุรัสคงที่ */ } .portfolio-card img { width: 100%;
height: 100%; object-fit: cover; /* ภาพครอบเต็มกรอบ */ display: block;
transition: transform 0.35s ease; } /* แคปชันลอยล่าง + โอเวอร์เลย์เบา ๆ */
.portfolio-card::after { content: ""; position: absolute; inset: 0; background:
linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.5)); opacity: 0;
transition: opacity 0.25s ease; } .portfolio-card .caption { position: absolute;
/* ทำให้ caption ลอยอยู่เหนือรูปภาพ */ bottom: 10px; /*
ระยะห่างจากด้านล่างของรูปภาพ */ left: 10px; /* ระยะห่างจากด้านซ้ายของรูปภาพ */
right: 10px; /* ระยะห่างจากด้านขวาของรูปภาพ */ color: #fff; /*
สีข้อความเป็นสีขาว */ font-size: 0.8em; /* ขนาดตัวอักษร */ font-weight: 600; /*
ความหนาตัวอักษร */ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /*
เงาข้อความให้เห็นชัดเจน */ background-color: rgba( 0, 0, 0, 0.4 ); /*
พื้นหลังทึบแสงบางๆ เพื่อให้อ่านง่ายขึ้น */ padding: 5px 8px; /*
ระยะห่างภายในของพื้นหลัง */ border-radius: 5px; /* ขอบโค้งมนเล็กน้อย */ }
.portfolio-card:hover::after { opacity: 1; } .portfolio-card:hover img {
transform: scale(1.03); } /* คอนเทนเนอร์สูงเปลี่ยนลื่น ๆ เวลาเพิ่ม/ลบการ์ด (กัน
“กระชาก”) */ .portfolio-grid { transition: height 0.25s ease; } .footer {
padding: 20px 0; } .footer .small { color: var(--muted); } .footer a { color:
var(--muted); text-decoration: underline; } .footer a:hover { text-decoration:
none; } .footer .container { text-align: center; display: flex; justify-content:
center; } /* ===== Hero Split ===== */ .hero-split { --solid: #3d4ee9; /*
สีฝั่งขวา ปรับได้ */ min-height: 100vh; padding: 0; display: grid;
grid-template-columns: 1fr 1fr; } .hero-split__col { position: relative;
overflow: hidden; } .hero-split__col--image { background: #000; }
.hero-split__img { position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: center; filter: brightness(0.85); }
.hero-split__inner { height: 100%; display: flex; align-items: center;
justify-content: center; padding: clamp(16px, 4vw, 48px); text-align: center; }
.hero-split__word { margin: 0; color: #fff; line-height: 1; font-weight: 800;
text-transform: uppercase; letter-spacing: 0.14em; font-size: clamp(40px, 10vw,
160px); } /* ===== Hero right side: dynamic color ===== */
.hero-split__col--solid { /* c1 = สีเริ่มต้น, c2 = สีตอนเปลี่ยน */ --c1:
#084e90; /* เดิมคุณตั้งไว้ใน --solid ก็ได้ */ --c2: #007f7f; /* ปรับตามชอบ */
--mix: 0; /* 0→c1, 1→c2; จะถูก JS/hover ปรับค่า */ background: color-mix( in
srgb, var(--c1) calc(100% - (var(--mix) * 100%)), var(--c2) calc(var(--mix) *
100%) ); transition: background-color 0.35s ease, filter 0.35s ease; } /*
ชี้เมาส์ให้เข้มขึ้นทันทีนิดหน่อย */ .hero-split__col--solid:hover { --mix: 1;
filter: brightness(1.03); } /* typed area: ล็อกความกว้างกันเด้ง + เคอร์เซอร์ใหญ่
*/ .hero-type-slot { --wch: 12; /* ความกว้างกล่องเป็นจำนวนตัวอักษร –
จูนได้ตามคำที่ยาวสุด */ display: inline-block; width: calc(var(--wch) * 1ch);
text-align: center; white-space: nowrap; } .hero-typed { white-space: nowrap; }
.typed-cursor { margin-left: 0.15em; font-size: 1em; /* เท่าตัวอักษร */
line-height: 0.9; display: inline-block; transform: translateY(0.03em); /*
จูนแนววาง */ } /* มือถือ: เรียงบน/ล่าง */ @media (max-width: 991.98px) {
.hero-split { grid-template-columns: 1fr; grid-auto-rows: 50vh 50vh; }
.hero-split__word { font-size: clamp(32px, 12vw, 88px); letter-spacing: 0.12em;
} } /* ===== [Patch] About: normalize sizes and spacing ===== */ #about p.lead {
font-size: 1rem; font-weight: 400; line-height: 1.65; } #about .about-checklist
{ margin: 0 0 6px 0; padding-left: 1rem; } #about .about-checklist li {
margin-bottom: 6px; } #about .about-checklist + p { margin-top: 6px !important;
} /* ไม่มีแถบซ้ายแล้ว: ให้คอนเทนต์กินเต็ม */ /* ทดแทนแถบซ้าย: ให้คอนเทนต์เต็ม,
เว้นที่ให้ navbar fixed-top */ #main { margin-left: 0 !important; } :root {
--nav-h: 64px; } /* อย่าให้ body ดันเนื้อหาลง เพราะ navbar โปร่งใสทับ hero */
body { padding-top: 0 !important; } /* เลื่อนด้วย #anchor ให้หยุดก่อนชน navbar
*/ .section { scroll-margin-top: calc(var(--nav-h) + 16px); } /* ===== Top
Navbar: transparent on hero, solid after scroll ===== */ .topnav { transition:
background-color 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
border-bottom: 1px solid transparent !important; background: transparent
!important; /* โปร่งใสเริ่มต้น */ } .topnav.is-solid { background: rgba(11, 15,
21, 0.9) !important; /* สีทึบหลังเลื่อน */ border-bottom-color: rgba(255, 255,
255, 0.06) !important; backdrop-filter: saturate(180%) blur(8px); } /*
สีตัวอักษรบนพื้นโปร่งใส/เข้ม */ .topnav .navbar-brand { color: #fff;
font-weight: 700; letter-spacing: 0.02em; } .topnav .nav-link { color: rgba(255,
255, 255, 0.85); font-size: 1.2rem; /* เพิ่มขนาด (ประมาณ 17px) */ font-weight:
500; /* ทำให้หนาขึ้นเล็กน้อย */ padding-top: 0.75rem; /*
ปรับความสูงให้สมดุลกับชื่อ */ padding-bottom: 0.75rem; } .topnav
.nav-link:hover, .topnav .nav-link.active { color: #fff; } /* ปุ่ม hamburger
ให้เห็นบนพื้นใส */ .navbar-toggler { border-color: rgba(255, 255, 255, 0.25); }
.navbar-toggler-icon { filter: invert(1) grayscale(1); } /* === HERO:
ขยับรูปไปทางซ้าย + ขยายฝั่งข้อความ === */ .hero-split { /* ค่าเริ่มต้น
ปรับได้จาก inline style ที่
<section>
  */ --img-x: 50%; /* 0%=ซ้าย, 50%=กลาง, 100%=ขวา → มากขึ้น = ภาพเลื่อนไปทางซ้าย
  */ --img-y: 50%; /* 0%=บน, 50%=กลาง, 100%=ล่าง */ --img-shift-x: -6%; /*
  เลื่อนทั้งภาพในแกน X (เช่น -4%) */ --img-shift: 0%; /* เลื่อนทั้งภาพในแกน Y
  (ค่าติดลบ = ขึ้น) */ --bleed: 6vw; /* ให้พื้นสีฝั่งข้อความกินเข้ามาทับรูปซ้าย
  */ --col-left: 1fr; /* ความกว้างคอลัมน์ซ้าย (รูป) */ --col-right: 1.2fr; /*
  ความกว้างคอลัมน์ขวา (ข้อความ) */ } /* จัดตำแหน่งภาพให้แน่นอน + ขยับได้ทั้ง X/Y
  */ section.hero-split .hero-split__img { object-position: var(--img-x)
  var(--img-y) !important; transform: translate(var(--img-shift-x),
  var(--img-shift)); /* ex: -4%, -6% */ transition: transform 0.3s ease; } /*
  เดสก์ท็อป: ปรับสัดส่วนคอลัมน์ + ซ้อนทับ */ @media (min-width: 992px) {
  .hero-split { grid-template-columns: var(--col-left) var(--col-right); }
  .hero-split__col--solid { margin-left: calc(-1 * var(--bleed)); position:
  relative; z-index: 2; } } /* มือถือ: ไม่ซ้อนทับ เพื่อให้อ่านง่าย */ @media
  (max-width: 991.98px) { .hero-split { grid-template-columns: 1fr;
  grid-auto-rows: 56vh 44vh; } .hero-split__col--solid { margin-left: 0; }
  section.hero-split .hero-split__img { transform: none; } } .hero-split__word {
  font-size: clamp(4px, 8.5vw, 100px); } /* ชื่อ (Brand) ใหญ่ขึ้น + เส้นใต้ */
  .navbar-brand { color: #fff; font-weight: 800; letter-spacing: 0.02em; /*
  ปรับขนาดตามจอ: min 18px, max ~24px */ font-size: clamp(18px, 2.1vw, 24px);
  position: relative; text-decoration: none; /* ไม่ใช้ underline ปกติ
  เพื่อควบคุมระยะ */ padding-bottom: 6px; /* ระยะห่างกับเส้น */ } .navbar-brand
  .brand-last { font-weight: 700; opacity: 0.95; } /*
  เส้นใต้แบบคุมความหนา/ระยะได้ */ .navbar-brand::after { content: ""; position:
  absolute; left: 0; bottom: 0; width: 100%; height: 1px; /* ความหนาเส้น */
  background: #fff; border-radius: 2px; opacity: 0.95; } /* ชื่อในเมนู (ใหญ่ +
  มีเส้นใต้) */ .nav-brand-link { color: #fff; text-decoration: none;
  font-weight: 800; letter-spacing: 0.02em; font-size: clamp(18px, 2.1vw, 24px);
  position: relative; padding-bottom: 1px; /* ระยะกับเส้นใต้ */ margin-right:
  16px; /* ระยะห่างจาก Home */ display: inline-block; } .nav-brand-link
  .brand-last { font-weight: 700; opacity: 0.95; } .nav-brand-link::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px;
  background: #fff; border-radius: 2px; } /*
  เพิ่มช่องว่างระหว่างไอเท็มเมนูให้สม่ำเสมอ */ .navbar-nav { gap: 24px; } /*
  ใช้ได้เพราะ .navbar-nav เป็น flex อยู่แล้ว */ @media (max-width: 991px) {
  .navbar-nav { gap: 16px; } }
  /*-------------------------------------------------------------- # Page
  Transition Effects (Fade-in/Fade-out)
  --------------------------------------------------------------*/ /* Base for
  the body content */ body { opacity: 0; /* ซ่อนเนื้อหาตอนแรก */ transition:
  opacity 0.5s ease-in-out; /* กำหนด transition */ display: block !important; /*
  ให้แน่ใจว่า body ไม่ถูกซ่อนโดย default */ } /* When page is fully loaded, fade
  in */ body.page-loaded { opacity: 1; } /* When a link is clicked to navigate
  away, fade out (requires JS) */ body.page-leaving { opacity: 0; } /* Hide
  preloader or loading screen if you still have one after fade-in */ #preloader
  { transition: opacity 0.5s ease-out; opacity: 0; visibility: hidden;
  pointer-events: none; } /* Make sure preloader is visible initially if
  page-loaded is not yet active */ body:not(.page-loaded) #preloader { opacity:
  1; visibility: visible; pointer-events: auto; }
  /*-------------------------------------------------------------- # Page
  Transition Effects (Fade-in/Fade-out)
  --------------------------------------------------------------*/
  body.is-preload { opacity: 0; } body.page-loaded { transition: opacity 0.5s
  ease-in-out; opacity: 1; } body.page-leaving { transition: opacity 0.5s
  ease-in-out; opacity: 0; } /* กันคอนเทนต์โดน fixed-top ทับ */ /*
  สำหรับรูปภาพใน Swiper Carousel ของหน้า Project Detail */ .portfolio-details
  .swiper-slide img { width: 100%; /* ให้รูปภาพกว้างเต็มพื้นที่ของ slide */
  height: 400px; /* กำหนดความสูงที่ต้องการ */ object-fit: cover; /*
  รูปภาพจะถูกปรับขนาดให้เต็มพื้นที่โดยไม่บิดเบี้ยว และจะครอปส่วนที่เกินออก */
  display: block; } /* หรือถ้าต้องการให้ swiper-slide มีความสูงคงที่ */
  .portfolio-details .swiper-slide { height: 400px; /* กำหนดความสูงของ slide */
  display: flex; /* ใช้ flexbox เพื่อจัดรูปภาพให้อยู่ตรงกลาง */ align-items:
  center; justify-content: center; overflow: hidden; /* ซ่อนส่วนเกินของรูปภาพ */
  } .portfolio-details .swiper-slide img { width: 100%; height: 100%;
  object-fit: contain; /* รูปภาพจะถูกปรับขนาดให้อยู่ในพื้นที่ โดยอาจมีขอบว่าง */
  /* หรือ object-fit: cover; ถ้าต้องการให้เต็มพื้นที่และครอปส่วนเกิน */ }
  .portfolio-details-slider { height: 500px; /* หรือความสูงที่คุณต้องการ */ }
  .portfolio-details-slider .swiper-slide { height: 100%; display: flex; /*
  ทำให้รูปอยู่ตรงกลางได้ */ justify-content: center; align-items: center; } /*
  Keyframe animation for blinking effect */ @keyframes blink-arrow { 0% {
  opacity: 0; transform: translateX(-5px); } /*
  เริ่มต้นซ่อนและเลื่อนไปทางซ้ายเล็กน้อย */ 50% { opacity: 1; transform:
  translateX(0); } /* ปรากฏและเลื่อนมาตำแหน่งปกติ */ 100% { opacity: 0;
  transform: translateX(-5px); } /* กลับไปซ่อน */ } /* Style for the download
  button with pseudo-element arrow */ .download-btn { position: relative; /*
  สำคัญ: กำหนดตำแหน่ง relative เพื่อให้ pseudo-element ชี้อิง */ padding-left:
  35px; /* เพิ่มพื้นที่สำหรับลูกศรด้านขวา */ overflow: hidden; /*
  ซ่อนส่วนเกินของลูกศรเมื่อ animation เริ่มต้น */ } .download-btn::after {
  content: "➜"; /* ตัวอักษรลูกศร (คุณสามารถเปลี่ยนเป็น unicode arrow อื่นๆ ได้
  เช่น '\21D2') */ position: absolute; left: 10px; /* ตำแหน่งลูกศร */ transform:
  translateY(-50%) translateX(-5px); /*
  จัดกึ่งกลางแนวตั้งและเลื่อนไปซ้ายเล็กน้อย */ font-size: 1.2em; /* ขนาดลูกศร */
  color: #fff; /* สีลูกศร (เปลี่ยนตามสีปุ่มหรือธีมของคุณ) */ opacity: 0; /*
  เริ่มต้นซ่อนลูกศร */ animation: blink-arrow 1.5s infinite ease-in-out; /* ใช้
  animation ที่สร้างไว้ */ animation-delay: 0.5s; /* หน่วงเวลาเล็กน้อยก่อน
  animation เริ่ม */ } /* หากต้องการให้ลูกศรหยุดกะพริบและปรากฏค้างเมื่อ hover */
  .download-btn:hover::after { opacity: 1; /* ทำให้ลูกศรปรากฏค้าง */ transform:
  translateY(-50%) translateX(0); /* เลื่อนกลับตำแหน่งปกติ */ transition:
  transform 0.3s ease, opacity 0.3s ease; /* เพิ่ม transition ให้ดู smooth */ }
  .indent-paragraph { text-indent: 30px; /* กำหนดระยะย่อหน้าสำหรับบรรทัดแรก 30px
  (ปรับค่าได้ตามต้องการ) */ margin-bottom: 1em; /* เพิ่มระยะห่างระหว่างย่อหน้า
  */ } /* -- CSS สำหรับปรับปรุงปุ่ม Previous/Next -- */ /*
  สไตล์สำหรับหน้าจอขนาดเล็กกว่า 992px (เช่น Tablet หรือ Mobile Landscape) */
  @media (max-width: 991.98px) { .project-detail .d-grid { /*
  ทำให้ปุ่มเรียงกันใน 1 คอลัมน์ หรือจัดกลาง */ display: flex; /* ใช้ flexbox */
  flex-direction: column; /* เรียงเป็นคอลัมน์ */ gap: 10px; /*
  เพิ่มระยะห่างระหว่างปุ่ม */ padding: 0 15px; /* เพิ่ม padding ด้านข้าง */ }
  .project-detail .d-grid .btn { width: 100%; /* ทำให้ปุ่มกว้างเต็มพื้นที่ */
  text-align: center; /* จัดข้อความกลาง */ padding: 12px 20px; /* เพิ่มขนาดปุ่ม
  */ font-size: 1.05em; /* ปรับขนาดตัวอักษรเล็กน้อย */ } /* อาจจะต้องปรับ
  margin-top ของปุ่ม Back to Portfolio ด้วยถ้าชนกัน */ .project-detail
  .btn-back-portfolio { margin-bottom: 20px; /* เพิ่มระยะห่างด้านล่าง */ } } /*
  สไตล์สำหรับหน้าจอขนาดเล็กกว่า 576px (เช่น Mobile Portrait) */ @media
  (max-width: 575.98px) { /* อาจจะปรับขนาด font หรือ padding เพิ่มเติมถ้าจำเป็น
  */ .project-detail .btn-back-portfolio, .project-detail .d-grid .btn {
  font-size: 0.95em; } } /* ===== About Section Feature Cards ===== */ .about
  .about-feature-card { background: var(--card); /* ใช้สีการ์ดจากธีมของคุณ */
  border: 1px solid var(--ring); /* ใช้สีขอบจากธีมของคุณ */ border-radius: 16px;
  /* ทำให้มุมมนเหมือนการ์ดอื่นๆ */ padding: 24px; text-align: center; height:
  100%; /* ทำให้การ์ดสูงเท่ากันในแถว */ transition: transform 0.3s ease,
  box-shadow 0.3s ease; } .about .about-feature-card:hover { transform:
  translateY(-5px); /* เพิ่ม effect ตอน hover */ box-shadow: 0 16px 40px rgba(0,
  0, 0, 0.45); } .about .about-feature-card i { font-size: 48px; /* ขนาดไอคอน */
  color: var(--accent2); /* สีไอคอน (สีฟ้า) */ margin-bottom: 15px; display:
  block; } .about .about-feature-card h3 { font-size: 1.25rem; font-weight: 700;
  color: var(--text); /* สีหัวข้อ */ margin-bottom: 10px; } .about
  .about-feature-card p { font-size: 0.9rem; color: var(--muted); /*
  สีตัวอักษรย่อย */ margin-bottom: 0; line-height: 1.6; } /* ===== Mobile Navbar
  Improvements ===== */ @media (max-width: 991.98px) { /* 1.
  ทำให้กล่องเมนูที่เปิด (navbar-collapse) มีพื้นหลังทึบ/เบลอ */ .topnav
  .navbar-collapse { /* ใช้สไตล์เดียวกับ Navbar ตอนเลื่อน (is-solid) */
  background: rgba(11, 15, 21, 0.9) !important; backdrop-filter: saturate(180%)
  blur(8px); /* จัดสไตล์ให้สวยงาม */ margin-top: 10px; /* เว้นระยะจากปุ่ม
  Toggler */ padding: 16px; border-radius: 12px; border: 1px solid rgba(255,
  255, 255, 0.06); } /* 2. จัดให้รายการเมนู (ul) อยู่ตรงกลาง */ .topnav
  .navbar-nav { align-items: center !important; } /* 3. ทำให้ลิงก์ (nav-link)
  กว้างเต็มกล่อง และจัดกลาง */ .topnav .nav-item { width: 100%; } .topnav
  .nav-link { text-align: center; padding-top: 10px; padding-bottom: 10px;
  width: 100%; } /* 4. (ทางเลือก) ทำให้ลิงก์ที่ active หรือ hover มีพื้นหลังจางๆ
  */ .topnav .nav-link.active, .topnav .nav-link:hover { background: rgba(255,
  255, 255, 0.08); border-radius: 8px; } } /* ===== Mobile Navbar Improvements
  ===== */ /* เปลี่ยนจาก 991.98px เป็น 1199.98px เพื่อให้ตรงกับ breakpoint "xl"
  ใหม่ */ @media (max-width: 1199.98px) { /* 1. ทำให้กล่องเมนูที่เปิด
  (navbar-collapse) มีพื้นหลังทึบ/เบลอ */ .topnav .navbar-collapse { /*
  ใช้สไตล์เดียวกับ Navbar ตอนเลื่อน (is-solid) */ background: rgba(11, 15, 21,
  0.9) !important; backdrop-filter: saturate(180%) blur(8px); /*
  จัดสไตล์ให้สวยงาม */ margin-top: 10px; /* เว้นระยะจากปุ่ม Toggler */ padding:
  16px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.06); } /*
  2. จัดให้รายการเมนู (ul) อยู่ตรงกลาง */ .topnav .navbar-nav { align-items:
  center !important; } /* 3. ทำให้ลิงก์ (nav-link) กว้างเต็มกล่อง และจัดกลาง */
  .topnav .nav-item { width: 100%; } .topnav .nav-link { text-align: center;
  padding-top: 10px; padding-bottom: 10px; width: 100%; } /* 4. (ทางเลือก)
  ทำให้ลิงก์ที่ active หรือ hover มีพื้นหลังจางๆ */ .topnav .nav-link.active,
  .topnav .nav-link:hover { background: rgba(255, 255, 255, 0.08);
  border-radius: 8px; } } body { padding-top: 64px; }
</section>