/* Vision Background Glass */
 .vision-box {
   background: rgba(255, 255, 255, 0.85);
   /* padding: 60px 40px; */
   /* padding เดิมเยอะไป */
   padding: 30px 25px;
   /* ✨ ลด padding ลงเพื่อให้กรอบกระชับขึ้น */
   border-radius: 20px;
   box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
   max-width: 900px;
   margin: 0 auto;
 }

 /* เพิ่ม CSS นี้เข้าไปเพื่อช่วยให้กล่องขวาที่พันธกิจเยอะๆ ดูไม่อึดอัดเกินไป */
 .col-lg-4.text-start .vision-box {
   margin-top: -30px;
   /* ยกกล่องพันธกิจขึ้นเล็กน้อยเพื่อให้ดูกระชับ */
 }

 /* ปรับระยะขอบของหัวข้อให้ชิดกันขึ้น */
 .vision-title {
   font-size: 1.1rem;
   letter-spacing: 3px;
   color: #7a6a6a;
   /* margin-bottom: 20px; */
   /* margin เดิมเยอะไป */
   margin-bottom: 10px;
   /* ✨ ลด margin-bottom ลง */
   position: relative;
   display: inline-block;
 }

 /* ปรับระยะขอบของข้อความหลักให้ชิดปุ่มขึ้น */
 .vision-text {
   font-size: 1.8rem;
   line-height: 1.8;
   color: #555;
   /* margin-bottom: 30px; */
   /* margin เดิมเยอะไป */
   margin-bottom: 15px;
   /* ✨ ลด margin-bottom ลง */
 }


 /* สำหรับพื้นหลังมีรูป */
 .section-faculty-statement {
   background: url("image/artart.jpg") center/cover no-repeat;
   position: relative;
 }


 /* ===== Scroll Animation Base ===== */
 .animate-on-scroll {
   opacity: 0;
   transform: translateY(40px);
   transition: all 0.8s ease;
 }

 .animate-on-scroll.show {
   opacity: 1;
   transform: translateY(0);
 }


 :root {
   --art-primary: #1a1a1a;
   /* Carbon Black */
   --art-accent: #c5a059;
   /* Muted Gold */
   --art-bg: #f8f9fa;
   /* Off-White */
   --art-pastel-red: #ffcccb;
   /* แดงพาสเทลสำหรับ Quick Links แบบที่ 2 */
   --font-main: 'Prompt', sans-serif;
   --font-heading: 'Montserrat', sans-serif;
 }

 body {
   font-family: var(--font-main);
   background-color: var(--art-bg);
   color: var(--art-primary);
   overflow-x: hidden;
   margin: 0;
   padding: 0;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
   font-family: var(--font-heading);
   letter-spacing: 0.5px;
 }

 .fw-bold {
   font-weight: 700 !important;
 }

 /* --- Header & Navigation --- */
 .header {
   background: #c62828 !important; /* สีแดงตามที่ผู้ใช้ต้องการ */
   backdrop-filter: blur(15px);
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
   padding: 10px 0;
   transition: all 0.3s ease;
 }

 .logo h1 {
   font-size: 1.4rem;
   margin: 0;
   color: #ffffff;
   font-weight: 700;
   text-transform: uppercase;
 }

 .logo img {
   background-color: #ffffff;
   padding: 5px 12px;
   border-radius: 6px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
 }

 .logo i {
   font-size: 1.8rem;
   color: var(--art-accent);
   margin-right: 10px;
 }

 /* --- ปรับแต่งระยะห่างเมนูให้สวยงามและพอดีบรรทัดเดียว --- */
 .navmenu ul {
   margin: 0;
   padding: 0;
   display: flex;
   list-style: none;
   align-items: center;
   flex-wrap: nowrap;
   /* ✨ บังคับไม่ให้ขึ้นบรรทัดใหม่ */
 }

 .navmenu li {
   position: relative;
   padding: 0 6px;
   /* ✨ ลดระยะห่างซ้าย-ขวาจาก 10px เหลือ 6px เพื่อประหยัดพื้นที่ */
 }

 .navmenu a {
   color: #ffffff;
   text-decoration: none;
   font-size: 0.8rem;
   /* ✨ ลดขนาดฟอนต์ลงนิดเดียวจาก 0.85rem เพื่อให้ลงตัวกับความกว้างหน้าจอ */
   font-weight: 400;
   transition: 0.3s;
   text-transform: uppercase;
   white-space: nowrap;
   /* ✨ ป้องกันข้อความเมนูตัดบรรทัดเอง */
 }

 .navmenu a:hover,
 .navmenu .active {
   color: #f8d053; /* สีทองสว่างเพื่อให้ตัดกับพื้นแดง */
 }

 .navmenu .dropdown ul {
   display: block;
   position: absolute;
   left: 10px;
   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: 4px;
   min-width: 220px;
 }

 .navmenu .dropdown:hover>ul {
   opacity: 1;
   top: 100%;
   visibility: visible;
 }

 .navmenu .dropdown ul a {
   padding: 10px 20px;
   font-size: 0.85rem;
   text-transform: none;
   color: var(--art-primary); /* คืนค่าสีดำให้เมนูย่อยเพราะพื้นหลังมันสีขาว */
   display: block;
 }

 .navmenu .dropdown ul a:hover {
   color: var(--art-accent);
   background: #fdfaf3;
 }

 /* ปรับปุ่มสมัครเรียนให้กระชับขึ้น */
 .btn-apply {
   background: #ffffff;
   color: #c62828 !important;
   padding: 6px 15px !important;
   /* ✨ ลด Padding ปุ่มลงนิดหน่อย */
   border-radius: 4px;
   /* ใส่ความโค้งเล็กน้อยให้ดูทันสมัย */
   font-size: 0.75rem;
   font-weight: 700;
   margin-left: 5px;
 }

 .btn-apply:hover {
   background: var(--art-accent);
   border-color: var(--art-accent);
   color: #fff !important;
 }

 /* --- ปรับแต่ง Hero ให้รองรับวิดีโอ --- */
 .hero {
   position: relative;
   overflow: hidden;
   /* ป้องกันวิดีโอล้นขอบ */
   min-height: 75vh;
   /* ปรับความสูงให้พอดีกับความอลังการ */
   display: flex;
   align-items: center;
   padding: 100px 0;
   background: #000;
   /* ใส่สีดำสำรองไว้ระหว่างวิดีโอโหลด */
 }

 /* ตัววิดีโอพื้นหลัง */
 #hero-video {
   position: absolute;
   top: 50%;
   left: 50%;
   min-width: 100%;
   min-height: 100%;
   width: auto;
   height: auto;
   z-index: 0;
   transform: translateX(-50%) translateY(-50%);
   object-fit: cover;
   /* บังคับให้วิดีโอเต็มพื้นที่เหมือน background-size: cover */
   filter: saturate(0.8) contrast(1.1) brightness(0.7);
   /* ✨ ใส่ Filter ปรับอารมณ์ศิลปะ */
 }

 /* Layer ทับหน้าวิดีโอเพื่อให้ข้อความอ่านง่าย (Overlay) */
 .hero-overlay {
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, 0.3);
   /* ม่านสีดำบางๆ */
   z-index: 1;
 }

 .hero .container {
   position: relative;
   z-index: 2;
   /* ดันเนื้อหาขึ้นมาเหนือวิดีโอและ Overlay */
   display: block !important;
   /* ปลดล็อกเพื่อให้เนื้อหาแสดงผล */
 }

 .hero::after {
   content: "";
   position: absolute;
   inset: 0;
   background: url('https://www.transparenttextures.com/patterns/paper-fibers.png');
   opacity: 0.25;
   pointer-events: none;
 }


 .hero h1 {
   font-size: 3.5rem;
   margin-bottom: 20px;
   line-height: 1.2;
   font-weight: 800;
 }

 /* --- Quick Links Section --- */
 .quick-links-container {
   margin-top: -80px;
   z-index: 10;
   position: relative;
   margin-bottom: 40px;
 }

 .quick-link-item {
   background: #fff;
   padding: 35px 20px;
   text-align: center;
   transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-decoration: none !important;
   border: 2px solid var(--art-pastel-red);
   border-radius: 25px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
   position: relative;
   overflow: hidden;
 }

 .quick-link-item:hover {
   transform: translateY(-12px) scale(1.02);
   background-color: #fff;
   border-color: #ff9999;
   box-shadow: 0 15px 30px rgba(255, 179, 186, 0.25);
 }

 .quick-link-item i {
   font-size: 2.8rem;
   margin-bottom: 15px;
   color: #ff8b94;
   transition: 0.3s;
 }

 .quick-link-item:hover i {
   transform: rotate(-5deg);
 }

 .quick-link-item h4 {
   font-size: 1.1rem;
   font-weight: 700;
   margin-bottom: 5px;
   text-transform: uppercase;
   color: var(--art-primary);
 }

 .quick-link-item span {
   font-size: 0.8rem;
   color: #999;
   font-weight: 400;
   letter-spacing: 0.5px;
 }

 /* --- NEW: Faculty Statement Section --- */
 .section-faculty-statement {
   padding: 80px 0 40px;
   background-color: #fff;
   text-align: center;
 }

 .section-faculty-statement h2 {
   font-weight: 700;
   color: var(--art-primary);
   margin-bottom: 15px;
   font-size: 2.2rem;
 }

 .section-faculty-statement p {
   font-size: 1.25rem;
   color: #555;
   max-width: 850px;
   margin: 0 auto;
   line-height: 1.8;
   font-weight: 400;
 }

 /* --- Statistics Section (NEW) --- */
 .section-stats {
   position: relative;
   padding: 80px 0;
   background: linear-gradient(rgba(26, 26, 26, 0.75), rgba(26, 26, 26, 0.75)),
     url('https://images.unsplash.com/photo-1497366216548-37526070297c?q=80&w=1200&auto=format&fit=crop') center/cover fixed;
   color: #fff;
   text-align: center;
   margin-bottom: 40px;
 }

 .stat-item h2 {
   font-size: 3.5rem;
   font-weight: 700;
   margin-bottom: 5px;
   color: #fff;
   font-family: var(--font-heading);
 }

 .stat-item p {
   font-size: 1.1rem;
   font-weight: 400;
   margin-bottom: 0;
   text-transform: uppercase;
   letter-spacing: 2px;
   opacity: 0.8;
 }

 /* --- Banner Slider Section --- */
 .section-banner-slider {
   padding: 20px 0 60px;
   background-color: #fff;
 }

 .banner-card {
   position: relative;
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
   transition: 0.3s;
   height: 280px;
   background: #eee;
 }

 .banner-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
 }

 .banner-card img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

 .banner-overlay {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   padding: 20px;
   background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
   color: #fff;
 }

 .banner-overlay h4 {
   font-size: 1.1rem;
   font-weight: 600;
   margin-bottom: 5px;
 }

 .banner-overlay p {
   font-size: 0.85rem;
   margin-bottom: 0;
   opacity: 0.9;
 }

 .carousel-control-prev,
 .carousel-control-next {
   width: 45px;
   height: 45px;
   background: var(--art-primary);
   border-radius: 50%;
   top: 50%;
   transform: translateY(-50%);
   opacity: 0.9;
 }

 .carousel-control-prev {
   left: -20px;
 }

 .carousel-control-next {
   right: -20px;
 }

 /* --- Programs Section --- */
 .section-programs {
   background-color: #fff;
   padding: 80px 0;
 }

 .program-card {
   position: relative;
   overflow: hidden;
   height: 380px;
   cursor: pointer;
   display: block;
   border-radius: 4px;
 }

 .program-card img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.6s ease;
 }

 .program-card:hover img {
   transform: scale(1.1);
 }

 .program-card .overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.3);
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;
   padding: 30px;
   transition: 0.3s;
 }

 .program-card:hover .overlay {
   background: rgba(26, 26, 26, 0.8);
 }

 .program-card h3 {
   color: #fff;
   font-size: 1.5rem;
   font-weight: 700;
   text-transform: uppercase;
   transform: translateY(20px);
   transition: 0.4s;
 }

 .program-card p {
   color: #e0e0e0;
   opacity: 0;
   transform: translateY(20px);
   transition: 0.4s;
 }

 .program-card .btn-view {
   margin-top: 20px;
   border: 1px solid #fff;
   color: #fff;
   padding: 8px 20px;
   opacity: 0;
   transform: translateY(20px);
   transition: 0.4s;
   text-transform: uppercase;
 }

 .program-card:hover h3,
 .program-card:hover p,
 .program-card:hover .btn-view {
   transform: translateY(0);
   opacity: 1;
 }

 .program-card:hover .btn-view {
   background: var(--art-accent);
   border-color: var(--art-accent);
 }

 /* --- PR News Tabs Section --- */
 .section-pr-tabs {
   background-color: #ffffff;
   padding: 100px 0;
   border-top: 1px solid rgba(0, 0, 0, 0.05);
 }

 .pr-tabs-container {
   max-width: 1000px;
   margin: 0 auto;
 }

 .custom-nav-tabs {
   border: none;
   justify-content: center;
   margin-bottom: 50px;
   gap: 10px;
 }

 .custom-nav-tabs .nav-link {
   border: 1px solid #eee !important;
   border-radius: 50px !important;
   background: #fcfcfc;
   color: #666;
   font-weight: 500;
   padding: 10px 25px;
   transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
   cursor: pointer;
   font-size: 0.95rem;
 }

 .custom-nav-tabs .nav-link:hover {
   background: #fff;
   color: var(--art-accent);
   border-color: var(--art-accent) !important;
 }

 .custom-nav-tabs .nav-link.active {
   color: #fff !important;
   background: var(--art-primary) !important;
   border-color: var(--art-primary) !important;
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 }

 .news-list-item {
   border-bottom: 1px solid #f1f1f1;
   padding: 22px 15px;
   transition: all 0.3s ease;
   display: flex;
   align-items: center;
   text-decoration: none !important;
   position: relative;
 }

 .news-list-item:last-child {
   border-bottom: none;
 }

 .news-list-item:hover {
   background-color: #fff;
   transform: translateX(10px);
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
 }

 .news-list-item::before {
   content: '';
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 3px;
   height: 0;
   background: var(--art-accent);
   transition: 0.3s;
 }

 .news-list-item:hover::before {
   height: 60%;
 }

 .news-list-date-box {
   min-width: 100px;
   padding-right: 25px;
   border-right: 1px solid #eee;
   margin-right: 25px;
   text-align: center;
 }

 .news-list-date-box .day {
   display: block;
   font-size: 1.4rem;
   font-weight: 700;
   color: var(--art-primary);
   line-height: 1;
 }

 .news-list-date-box .month-year {
   font-size: 0.75rem;
   color: #999;
   text-transform: uppercase;
   font-weight: 600;
 }

 .news-list-title-box {
   flex-grow: 1;
 }

 .news-list-title-box .title {
   color: var(--art-primary);
   font-weight: 500;
   font-size: 1.05rem;
   transition: 0.3s;
   display: block;
   margin-bottom: 2px;
 }

 .news-list-item:hover .news-list-title-box .title {
   color: var(--art-accent);
 }

 .news-list-title-box .category {
   font-size: 0.75rem;
   color: #b1b1b1;
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }

 .badge-modern {
   background-color: var(--art-accent);
   color: white;
   font-size: 0.65rem;
   padding: 3px 8px;
   border-radius: 4px;
   margin-left: 12px;
   font-weight: 600;
   letter-spacing: 0.5px;
   vertical-align: middle;
 }

 .btn-view-all-modern {
   margin-top: 50px;
   display: inline-flex;
   align-items: center;
   color: var(--art-primary);
   text-decoration: none;
   font-weight: 600;
   font-size: 0.9rem;
   padding: 12px 30px;
   border: 1px solid var(--art-primary);
   transition: 0.3s;
   letter-spacing: 1px;
 }

 .btn-view-all-modern i {
   margin-left: 10px;
   transition: 0.3s;
 }

 .btn-view-all-modern:hover {
   background: var(--art-primary);
   color: #fff;
 }

 .btn-view-all-modern:hover i {
   transform: translateX(5px);
 }

 /* --- News & Events Activity Slider --- */
 .section-news {
   background-color: #f8f9fa;
   padding: 80px 0;
 }

 .news-slider-container {
   overflow-x: auto;
   overflow-y: hidden;
   white-space: nowrap;
   padding-bottom: 20px;
   scrollbar-width: none;
 }

 .news-slider-container::-webkit-scrollbar {
   display: none;
 }

 .news-card {
   display: inline-block;
   width: 350px;
   white-space: normal;
   margin-right: 20px;
   vertical-align: top;
   scroll-snap-align: start;
   background: #fff;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
   transition: 0.3s;
 }

 .news-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
 }

 .news-card .img-wrapper {
   overflow: hidden;
   aspect-ratio: 16/10;
 }

 .news-card .card-img-top {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: 0.5s ease;
 }

 .news-card .card-body {
   padding: 25px;
 }

 .news-card .news-date {
   font-size: 0.8rem;
   color: var(--art-accent);
   font-weight: 700;
   margin-bottom: 10px;
   display: block;
 }

 .news-card .card-title {
   font-size: 1.15rem;
   font-weight: 700;
   line-height: 1.4;
   margin-bottom: 15px;
   color: var(--art-primary);
 }

 /* --- Event Calendar --- */
 .section-events {
   background-color: #fff;
   padding: 80px 0;
 }

 .event-card {
   display: flex;
   background: #fff;
   border: 1px solid #eee;
   border-radius: 4px;
   overflow: hidden;
   transition: 0.3s;
   height: 100%;
   text-decoration: none;
 }

 .event-card:hover {
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
   transform: translateY(-5px);
   border-color: var(--art-accent);
 }

 .event-date-box {
   background-color: var(--art-primary);
   color: #fff;
   width: 110px;
   min-width: 110px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   transition: 0.3s;
   padding: 15px;
   text-align: center;
 }

 .event-card:hover .event-date-box {
   background-color: var(--art-accent);
 }

 .event-date-box .day {
   font-size: 2.2rem;
   font-weight: 700;
   line-height: 1;
 }

 .event-date-box .month {
   font-size: 0.85rem;
   text-transform: uppercase;
   margin-top: 5px;
 }

 .event-details {
   padding: 25px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   width: 100%;
 }

 .event-details h5 {
   font-size: 1.1rem;
   font-weight: 700;
   margin-bottom: 10px;
   line-height: 1.4;
   color: var(--art-primary);
 }

 .event-meta {
   font-size: 0.85rem;
   color: #777;
   display: flex;
   gap: 15px;
   flex-wrap: wrap;
 }

 .event-meta i {
   color: var(--art-accent);
   margin-right: 5px;
 }

 /* --- Footer --- */
 footer {
   background: var(--art-primary);
   color: #fff;
   padding: 80px 0 30px;
 }

 .footer-nav a {
   display: block;
   color: rgba(255, 255, 255, 0.6);
   text-decoration: none;
   margin-bottom: 10px;
   transition: 0.3s;
   font-size: 0.9rem;
 }

 .footer-nav a:hover {
   color: var(--art-accent);
   padding-left: 5px;
 }

 .social-links a {
   font-size: 1.5rem;
   color: #fff;
   margin-right: 20px;
   transition: 0.3s;
   text-decoration: none;
 }

 .social-links a:hover {
   color: var(--art-accent);
 }

 /* ซ่อนข้อความทั้งหมดใน Hero Header */

 .hero .container {
   display: none;
   /* <--- น้องเต้ยจังแนะนำให้ลบบรรทัดนี้ออก หรือคอมเมนต์ไว้ค่ะ */
   /* เปลี่ยนเป็น block หรือลบทิ้งเพื่อให้ค่า Default ของ Bootstrap ทำงาน */
 }

 /* ===== Faculty Statement (Vision Style) ===== */
 .section-faculty-statement {
   padding: 70px 0;
 }


 .faculty-vision-wrapper {
   display: flex;
   flex-direction: column;
   /* บน–ล่าง */
   align-items: center;
   text-align: center;
   gap: 20px;
 }

 /* กล่องปรัชญา + วิสัยทัศน์ */
 .hero-vision-box {
   background: rgba(255, 255, 255, 0.9);
   padding: 25px;
   border-radius: 15px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
 }

 /* หัวข้อ */
 .vision-title {
   font-size: 0.9rem;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: var(--art-accent);
   margin-bottom: 8px;
   font-weight: 600;
 }

 /* ข้อความ */
 .vision-text {
   font-size: 0.9rem;
   line-height: 1.6;
   color: #444;
 }

 /* เส้นคั่น */
 .vision-divider {
   height: 1px;
   background: #ddd;
   margin: 15px 0;
 }

 /* กรอบขวา */
 .hero-frame-right {
   height: 180px;
   border: 2px solid rgba(255, 255, 255, 0.6);
   border-radius: 20px;
 }

 /* responsive */
 @media(max-width:991px) {

   .hero-vision-box {
     margin-bottom: 20px;
   }

 }

 /* กล่องพันธกิจ */
 .hero-mission-box {
   background: rgba(255, 255, 255, 0.9);
   padding: 25px;
   border-radius: 15px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
   max-height: 300px;
   overflow: auto;
 }

 /* หัวข้อ */
 .mission-title {
   font-size: 0.9rem;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: var(--art-accent);
   margin-bottom: 10px;
   font-weight: 600;
 }

 /* รายการ */
 .mission-list {
   font-size: 0.85rem;
   line-height: 1.5;
   color: #444;
   padding-left: 18px;
 }

 .mission-list li {
   margin-bottom: 6px;
 }

 /* Layout กล่อง Vision */
 .vision-layout {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 30px;
 }

 /* กรอบด้านข้าง */
 .side-frame {
   width: 120px;
   height: 300px;
   background: rgba(255, 255, 255, 0.35);
   border-radius: 20px;
   backdrop-filter: blur(5px);
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
 }

 /* กล่อง Vision กลาง */
 .vision-box {
   background: rgba(255, 255, 255, 0.85);
   padding: 60px 40px;
   border-radius: 20px;
   max-width: 800px;
 }

 /* Layout hero */
 .hero-frame-wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 30px;
 }

 /* กล่องเนื้อหากลาง */
 .hero-content-box {
   background: rgba(255, 255, 255, 0.85);
   padding: 60px 40px;
   border-radius: 20px;
   backdrop-filter: blur(6px);
   max-width: 800px;
   text-align: center;
 }

 /* กรอบซ้าย-ขวา */
 .hero-side-frame {
   width: 120px;
   height: 280px;
   background: rgba(255, 255, 255, 0.35);
   border-radius: 20px;
   backdrop-filter: blur(4px);
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
 }

 /* ซ่อนในมือถือ */
 @media (max-width:991px) {
   .hero-side-frame {
     display: none;
   }
 }

 /* ทำภาพให้เป็น icon */
 /* บังคับขนาดรูปภาพลูกศรให้ใหญ่ขึ้นและเท่ากันทั้ง 2 กล่อง */
 .faculty-vision-image img {
   width: 60px !important;
   /* ปรับขนาดตามต้องการ (แนะนำ 60px - 80px) */
   height: 60px !important;
   /* บังคับให้เป็นจัตุรัสเพื่อความสมดุล */
   object-fit: contain;
   margin-bottom: 15px;
 }

 /* ปรับระยะห่างภายใน vision-box ให้กระชับ */
 .vision-box {
   background: rgba(255, 255, 255, 0.85);
   padding: 35px 30px;
   /* ลด Padding เพื่อให้กรอบพอดีข้อความ */
   border-radius: 20px;
   box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
   max-width: 900px;
   margin: 0 auto;
 }

 /* ปรับระยะข้อความให้ชิดกันขึ้นตามศิลปกรรมศาสตร์ */
 .vision-title {
   font-size: 1.1rem;
   letter-spacing: 3px;
   color: #7a6a6a;
   margin-bottom: 15px;
   /* ปรับลดระยะห่าง */
   position: relative;
   display: inline-block;
 }

 .vision-text {
   font-size: 1.6rem;
   /* ปรับขนาดฟอนต์ให้สมดุลกับ 2 กล่อง */
   line-height: 1.6;
   color: #555;
   margin-bottom: 20px;
 }

 .vision-btn {
   padding: 10px 35px;
   border-radius: 30px;
   border: 1px solid #9a8f8f;
   background: transparent;
   color: #555;
   transition: 0.3s;
 }

 .vision-btn:hover {
   background-color: #9a8f8f;
   color: #fff;
 }

 .social-links a {
   display: inline-block;
   transition: transform 0.3s ease, color 0.3s ease;
 }

 .social-links a:hover {
   color: var(--art-accent) !important;
   transform: translateY(-3px);
   /* ไอคอนเด้งขึ้นเล็กน้อย */
 }