/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 10 2025 | 17:02:07 */
/* === TOÀN BỘ CODE CSS HOÀN CHỈNH - ĐÃ SỬA LỖI VÀ TỐI ƯU HÓA === */

/* --- CÀI ĐẶT CHUNG --- */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;600;700&display=swap');

html {
    scroll-behavior: smooth;
}


.navbar {
    padding-top: 3rem;
    padding-bottom: 1.5rem;
}

/* Lớp 1 (dưới cùng): Chỉ có màu nền tối */
body.page-template-template-sora-universe-php {
    background-color: #08031a;
    position: relative; /* Cần thiết để lớp giả ::before hoạt động đúng */
    z-index: 0;
}

/* Lớp 2 (ở giữa): Lớp giả chứa ảnh nhân vật được làm mờ */
body.page-template-template-sora-universe-php::before {
    content: '';
    position: fixed; /* Cố định so với màn hình */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Đặt ảnh nhân vật GỐC vào lớp giả này */
    background-image: url('/wp-content/uploads/2025/10/narrator_live2D_smile.png');
    
    /* Các thuộc tính hiệu ứng giữ nguyên */
    background-attachment: fixed;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;
    
    /* LÀM MỜ BẰNG CSS: Giảm độ trong suốt của chỉ riêng lớp này */
    opacity: 0.1; /* Bạn có thể thử các giá trị khác như 0.15 hoặc 0.2 */
    
    /* Đẩy lớp này ra phía sau nội dung (Lớp 3) */
    z-index: -1;
}

/* --- THIẾT KẾ CHO DESKTOP (Màn hình lớn > 991px) --- */
@media (min-width: 992px) {
	
  /* Ghi đè max-width của container trong header để menu ra sát lề */
	nav#site-navbar .container-xxl {
		max-width: 100%;
	}
	
  /* 1. Ẩn các thành phần không cần thiết trên desktop */
  .mobile-header-block,
  nav#site-navbar form#searchform,
  nav#site-navbar .navbar-brand { /* THÊM VÀO: Ẩn chữ "untitled" */
    display: none !important;
  }

  /* 2. Header gốc của theme */
  nav#site-navbar {
    background: transparent !important;
    border-bottom: none !important;
  }

  /* 3. Menu chính (trong header gốc) */
  .navbar-nav {
    /* LƯU Ý: Hãy dùng URL đầy đủ cho ảnh nền */
    background-image: url('/wp-content/themes/b5st-main/img/menubar.png');
    background-repeat: no-repeat;
        background-position: center 110%;
        background-size: 100%;
        margin-left: auto;
        align-items: center;
        padding-right: 0;
        height: 200px;
        position: absolute;
        right: 0;
  }
  .navbar-nav .nav-item .nav-link {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 600;
    font-size: 1.5rem; /* <<< TĂNG KÍCH THƯỚC CHỮ */
    text-transform: uppercase;
    transition: all 0.3s ease;
    padding: 1rem 1.5rem !important; /* <<< TĂNG NHẸ KHOẢNG CÁCH NGANG */
    color: #3366FF !important;
  }
  .navbar-nav .nav-item:not(:first-child) .nav-link:hover {
    color: #FFFFFF !important;
    text-shadow: 0 0 5px #FFFFFF;
  }
  .navbar-nav .nav-item:first-child .nav-link {
    color: #C9A31A !important;
    /* LƯU Ý: Hãy dùng URL đầy đủ cho ảnh nền */
    background-image: url('/wp-content/themes/b5st-main/img/menucircle.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    min-height: 80px;
    min-width: 130px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .navbar-nav .nav-item:first-child .nav-link:hover {
    filter: brightness(1.2);
  }

  /* 4. Các tùy chỉnh layout và nội dung khác của bạn */
  .desktop-logo {
    display: block;
    max-width: 450px;
    height: auto;
    margin-top: 3rem;
    margin-left: 0;
  }
  .hero-character-image img {
    max-width: 620px;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .desktop-content {
	  display: grid;
	  align-items: center;
	  position: relative;
}
  .desktop-content::after {
    content: '';
    display: block;
    position: absolute;
    top: 20%;
    right: 0;
    width: 500px;
    height: 2000px;
    background-image: url('/wp-content/themes/b5st-main/img/decoration1.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top right;
    z-index: -1;
  }
  .mobile-content {
    display: none;
  }
	
	.hero-text-group {
    text-align: left;
    margin-left: 0; /* Xóa bỏ lề trái */
    /* Nếu bạn muốn có một chút khoảng cách, hãy dùng padding cho cột chứa nó */
	}
	
	.hero-video {
    width: 100%; /* Buộc khối video rộng bằng cột chứa nó */
    margin-left: 0;
    margin-right: 0;
    margin-top: 1.5rem;
    padding: 0; /* Reset padding để đảm bảo căn lề đúng */
	}
	
	
  body.page-template-template-sora-universe-php::before {
    background-size: 80%;
  }
	
	.hero-section-columns{
		position:relative;
		max-width:1000px!important;
	}
	
	/* Tinh chỉnh cho nhóm link mạng xã hội */
.social-links-group .wp-block-image {
    max-width: 200px; /* Giới hạn chiều rộng, bạn có thể thay đổi */
    margin-bottom: 0.75rem; /* Khoảng cách giữa các link */
}
	
.section-holder {
	max-width:100%!important;
    background: url(https://www.sora-universe.com/wp-content/uploads/2024/05/Rectangle-22_2.png);
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    padding: 0 0 50px 0;
    background-position: top 80px left 7vw;
}
	
/* === CSS HOÀN CHỈNH CHO TIÊU ĐỀ MỚI === */

/* 1. Container chính của toàn bộ tiêu đề */
h2.section-title {
    display: flex;
    flex-direction: column; /* Xếp các phần tử (chữ Nhật, đường kẻ, chữ Anh) theo chiều dọc */
    align-items: center;     /* Căn giữa tất cả theo chiều ngang */
    gap: 0.5rem;             /* Khoảng cách nhỏ giữa các phần tử */
    margin-bottom: 2rem;     /* Khoảng cách với nội dung bên dưới */
}

/* 2. Phần chữ tiếng Nhật và các ngôi sao hai bên */
.main-title-jap {
    display: inline-flex;
    align-items: center; /* Tự động căn giữa ngôi sao và chữ theo chiều dọc */
    font-size: 7rem;
    color: #FFFFFF;
    font-weight: bold;
}

/* Ngôi sao bên trái */
.main-title-jap::before {
    content: '';
    display: block;
    width: 80px;
    height: 80px;
    background-image: url('/wp-content/themes/b5st-main/img/hoshi_left.png');
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 1.5rem; /* Khoảng cách với chữ */
}

/* Ngôi sao bên phải */
.main-title-jap::after {
    content: '';
    display: block;
    width: 80px;
    height: 80px;
    background-image: url('/wp-content/themes/b5st-main/img/hoshi_right.png');
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 1.5rem; /* Khoảng cách với chữ */
}

/* 3. Đường kẻ vàng ở giữa */
.main-title-line {
    width: 100%;       /* Rộng 80% so với container cha */
}

/* 4. Phần chữ tiếng Anh (phụ đề) */
	.main-title-eng {
		font-size: 1.1rem;
		color: #DDD; /* Màu trắng xám */
		text-transform: uppercase;
		letter-spacing: 2px; /* Tăng khoảng cách chữ */
	}
	
	.hero-title{
		margin-left: 0 !important;
	}
	
	.hero-text{
		margin-left: 0 !important;
	}
	
/* === CSS CẬP NHẬT CHO KHU VỰC DATA (Sử dụng ảnh datadetail.png) === */

/* 1. Style cho toàn bộ khu vực */
.data-section {
    margin: 8rem auto;
    max-width: 600px;
    position: relative;
}

/* 2. Style cho ảnh đường kẻ datadetail.png */
.data-divider-image {
    max-width: 100%!important;
    opacity: 0.5;
    margin-left: auto;
    margin-right: auto;
}

/* 3. Style cho tiêu đề "DATA" (đã bỏ ::before và ::after) */
.data-title {
    color: #FFFFFF;
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5em;
    text-align: center;
    padding-top: 1rem;
    padding-bottom: 2rem;
    margin-bottom: 1rem;
}

/* 4. Style cho bảng dữ liệu (giữ nguyên) */
.data-labels p {
    color: #E0E0E0;
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    text-align: left;
}
.data-values p {
    font-weight: bold;
    color: #FFFFFF;
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    text-align: right;
}
	
	/* === CSS CHO TIÊU ĐỀ "DATA" VỚI POSITION: ABSOLUTE === */

/* 1. Container chính */
.data-title-container {
    position: relative; /* Rất quan trọng, làm "bệ phóng" cho chữ DATA */
    max-width: 100%!important; /* Giới hạn chiều rộng chung của cả khối */
    margin: 4rem auto; /* Căn giữa và tạo khoảng cách trên dưới */
}

/* 2. Style cho ảnh đường kẻ */
.data-title-container .wp-block-image {
    margin-bottom: 0; /* Xóa khoảng cách mặc định nếu có */
}
.data-title-container .wp-block-image img {
    width: 100%; /* Đảm bảo ảnh luôn co giãn theo container */
    height: auto;
}

/* 3. Style và định vị cho chữ DATA */
.data-title-container .wp-block-heading {
    /* Dùng position: absolute để đặt chữ lên trên ảnh */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -85%);
    /* Mẹo: Tạo nền màu trùng với nền trang để "xóa" đường kẻ */
    padding: 0 1.5rem; /* Tạo khoảng trống hai bên chữ để xóa đường kẻ */

    /* Định dạng chữ */
    color: #FFFFFF;
    font-size: 3.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5em; /* Khoảng cách giữa các chữ cái */
    margin: 0;
    white-space: nowrap; /* Đảm bảo chữ "DATA" không bị xuống dòng */
}
	
	

/* === CSS CHO KHU VỰC FOOTER/CONTACTS === */

/* 1. Style cho khung chứa chính */
.site-footer-section {
    /* Thêm ảnh nền */
    background-image: url('/wp-content/themes/b5st-main/assets/img/footer1.png');
    background-size: contain; /* Phóng to để lấp đầy khu vực */
    background-position: center; /* Căn giữa ảnh nền */
    background-repeat: no-repeat;
    
    /* Giữ lại các style cũ */
    min-height: 500px;
    padding: 2rem 0;
    display: flex;
    align-items: center;
	max-width:100%!important;
}
	
	/* 2. Cột social links bên trái */
/* (Class .footer-social-links đang nằm trên wp-block-columns) */
.footer-social-links > .wp-block-column:first-child {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Căn giữa các link theo chiều dọc */
}
.footer-social-links .wp-block-image {
    max-width: 200px;
    margin-bottom: 1rem;
}
/* Thêm một text "Youtube" giả sau ảnh link bằng CSS */
/* Lặp lại cho từng link */
.footer-social-links .wp-block-image:nth-child(1) a::after {
    content: '';
    color: #FFFFFF;
    margin-left: 0.5rem;
    font-weight: bold;
    text-decoration: none;
}
.footer-social-links .wp-block-image:nth-child(2) a::after {
    content: '';
    color: #FFFFFF;
    margin-left: 0.5rem;
    font-weight: bold;
    text-decoration: none;
}
.footer-social-links .wp-block-image:nth-child(3) a::after {
    content: '';
	color: #FFFFFF;
    margin-left: 0.5rem;
    font-weight: bold;
    text-decoration: none;
}


/* 3. Cột contact info bên phải */
.footer-contact-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.footer-contact-info .wp-block-heading {
    color: #FFFFFF;
    font-size: 2rem;
    font-weight: bold;
}
/* Style cho ảnh mail.png */
.footer-contact-info .wp-block-image {
        width: 400px;
        height: auto;
        margin: 1rem 0 0.5rem 0;
        transform: translateX(0px) !important;
	max-width: none!important;
}
	
.footer-contact-info p {
    color: #FFFFFF;
    font-size: 1.1rem;
    margin: 0;
    padding: 0;
}
	.site-footer-section > .wp-block-group__inner-container {
		width:65%;
	}

/* 4. Tùy chỉnh cho mobile (giữ nguyên) */
@media (max-width: 768px) {
    .site-footer-section .wp-block-columns {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }
    .footer-social-links,
    .footer-contact-info {
        text-align: center;
        align-items: center; /* Căn giữa các mục bên trong cột */
    }
}

/* Tùy chỉnh cho mobile */
@media (max-width: 768px) {
    /* Căn giữa chữ trong bảng trên mobile */
    .data-labels p,
    .data-values p {
        text-align: center;
    }
}
	.hero-scroll{
		z-index: 100;
        display: block;
        position: absolute;
        top: 200px;
        right: -100px;
        opacity: .8;
	}
	
	.hero-scroll:hover{
		opacity:1;
	}
	
	.footer-social-links{
		max-width:600px!important;
		gap:10em!important;
	}
	
	.footer-social-links .wp-block-column .wp-block-image a{
		opacity: .8;
	}
	
	.footer-social-links .wp-block-column .wp-block-image a:hover{
		opacity: 1;
	}
}

/* === CODE HOÀN CHỈNH CUỐI CÙNG CHO MOBILE === */
@media (max-width: 991.98px) {

  /* 1. Ẩn header gốc và logo desktop */
  nav#site-navbar,
  .desktop-logo {
    display: none !important;
  }

  /* 2. Hiển thị và căn chỉnh header mobile */
  .mobile-header-block {
    display: flex !important;
	flex-direction: row !important;
    align-items: flex-start;
    padding: 1.5rem;
  }

  /* 3. SỬA LỖI: Thu nhỏ logo mobile */
  /* Nhắm trực tiếp vào thẻ <img> để đảm bảo có tác dụng */
  .mobile-header-block .sora-logo img {
    width: 100%; /* Luôn cố gắng lấp đầy chiều rộng của cột chứa nó */
    max-width: 150px; /* Nhưng không bao giờ được phép lớn hơn 150px */
    height: auto;
    margin: 0;
  }
  
  /* 4. Vô hiệu hóa collapse và các thành phần của nó */
  .mobile-header-block .wp-block-navigation__responsive-container-open,
  .mobile-header-block .wp-block-navigation__responsive-container-close {
    display: none !important;
  }
  .mobile-header-block .wp-block-navigation__responsive-container,
  .mobile-header-block .wp-block-navigation__responsive-dialog {
    display: block !important;
    position: static !important;
    background: none !important;
    transform: none !important;
    width: 100%;
  }

  /* 5. Ép hiển thị và định dạng danh sách menu */
  .mobile-header-block .wp-block-navigation__container {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    width: 100% !important;
  }

  /* 6. SỬA LỖI: Đặt lại màu chữ cho các mục menu */
  .mobile-header-block .wp-block-navigation-item__content {
    color: #3366FF !important; /* Thêm !important để ghi đè */
    font-weight: 600;
    text-transform: uppercase;
    font-family: 'Josefin Sans', sans-serif;
    padding-bottom: 1rem; /* Thêm khoảng cách giữa các mục */
  }
  .mobile-header-block .wp-block-navigation-item:first-child .wp-block-navigation-item__content {
    color: #C9A31A !important;
    background-image: url('/wp-content/themes/b5st-main/img/menucircle.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80px;
    min-width: 100px;
  }
	
	.hero-character-image img {
    /* Trên mobile, các cột sẽ tự xếp dọc.
       Ảnh sẽ nằm dưới chữ. */
    max-width: 200%; /* Cho ảnh rộng bằng 75% màn hình */
    margin-top: 2rem; /* Tạo khoảng cách với chữ ở trên */
  }
	
	.hero-section-columns {
	  display: flex;
	  flex-direction: column; /* Đảm bảo các cột xếp dọc */
}

.hero-section-columns > .wp-block-column:nth-child(1) {
  /* Cột thứ nhất (chứa chữ) sẽ hiển thị thứ 2 */
  order: 2;
}

.hero-section-columns > .wp-block-column:nth-child(2) {
  /* Cột thứ hai (chứa ảnh) sẽ hiển thị thứ 1 */
  order: 1;
}
	
	/* Ẩn nội dung của desktop đi */
  .desktop-content {
    display: none;
  }
  
  /* Hiển thị nội dung của mobile */
  .mobile-content {
    display: block;
  }
	
	/* Cập nhật khối mobile-content để làm "bệ phóng" */
.mobile-content {
    position: relative;
    /* overflow: hidden; có thể thêm dòng này nếu họa tiết bị tràn ra ngoài */
}

/* Tạo lớp giả chứa ảnh trang trí cho mobile */
.mobile-content::after {
    content: '';
    display: block;
    position: absolute;

    /* Vị trí (giá trị khởi điểm, bạn có thể thay đổi) */
    top: 40%; 
    right: 0; 

    /* Kích thước (nhỏ hơn cho mobile, bạn có thể thay đổi) */
    width: 100px; 
    height: 300px;

    /* Ảnh nền */
    background-image: url('/wp-content/uploads/2025/10/decoration1.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top right;
    
    /* Làm mờ một chút để không quá nổi bật (tùy chọn) */
    opacity: 0.7;

    /* Đẩy ra sau nội dung */
    z-index: -1;
}
	
	html, body {
    overflow-x: hidden;
}

	.mob-content{
		padding: 5px;
	}
	
	/* === CSS SỬA LỖI CHO KHU VỰC DATA TRÊN MOBILE === */

    /* 1. Tùy chỉnh lại container chính */
    .data-section {
        max-width: 100%; /* Bỏ giới hạn chiều rộng, cho phép chiếm toàn màn hình */
        margin-top: 4rem;
        margin-bottom: 4rem;
        padding: 0 1rem; /* Thêm một chút đệm hai bên */
		position:relative;
    }

    /* 2. Vô hiệu hóa layout tiêu đề phức tạp trên mobile cho gọn */
    .data-title::before,
    .data-title::after {
        display: none; /* Ẩn các đường kẻ và ngôi sao trang trí */
    }
    .data-title {
        padding-top: 0;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
		position:absolute;
		top: 0;
        left: 50%;
        transform: translate(-50%, 50%);
    }

    /* 4. Căn giữa chữ trong bảng dữ liệu cho đẹp hơn */
    .data-labels p,
    .data-values p {
        text-align: left;
        margin-bottom: 1rem; /* Giảm khoảng cách giữa các hàng */
    }
    .data-labels p {
        font-weight: bold; /* In đậm cả nhãn trên mobile cho dễ nhìn */
        color: #FFFFFF;
    }
	.data-values p{
		text-align:right;
	}
	
	
	.data-divider-image {
		max-width: 100%!important;
		opacity: 0.5;
		margin-left: auto;
		margin-right: auto;
	}
	
	.site-footer-section {
    /* Thêm ảnh nền */
    background-image: url('/wp-content/themes/b5st-main/assets/img/footer1.png');
    background-size: contain; /* Phóng to để lấp đầy khu vực */
    background-position: center; /* Căn giữa ảnh nền */
    background-repeat: no-repeat;
    
    /* Giữ lại các style cũ */
    padding: 2rem 0;
    display: flex;
    align-items: center;
}
	
	.footer-contact-info .wp-block-image {
        width: 150px;
        height: auto;
        margin: 1rem 0 0.5rem 0;
        transform: translateX(0px) !important;
		max-width: none!important;
	}
	
	.hero-scroll{
		z-index: 100;
		display: block;
		position: absolute;
		top: 300px;
		right: 50px;
		opacity: .8;
	}
	
	.section-title{
		text-align:center;
	}
	
	.main-title-jap{
		font-size:50px;
	}
	
	.main-title-eng{
		font-size:25px!important;
	}
}

	/* Dòng tiêu đề chính (tagline) */
.hero-title {
  color: #FFFFFF; /* Màu vàng nhạt */
  font-size: 2.2rem; /* Kích thước chữ */
  font-weight: 700;
  text-shadow: 0 0 8px rgba(242, 229, 166, 0.5); /* Hiệu ứng phát sáng nhẹ */
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
}

/* Đoạn văn mô tả */
.hero-text {
  color: #E0E0E0; /* Màu trắng xám */
  font-size: 1rem;
  line-height: 1.8; /* Tăng chiều cao dòng cho dễ đọc */
}

.wp-block-group.desktop.content > .wp-block-group__inner-container > * {
    margin-left: 0;
    margin-right: 0;
}