*{outline:none;}
:root{
    --sprite_sheet_width:1000;
    --sprite_sheet_height:1000;

    --font-max:16px;

    --svg_sun:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' width='100%25' height='100%25'%3E%3Cdefs%3E%3CradialGradient id='goldenFade' cx='100' cy='100' r='90' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0%25' stop-color='%23FFD700' stop-opacity='1' /%3E%3Cstop offset='30%25' stop-color='%23FFD700' stop-opacity='0.8' /%3E%3Cstop offset='100%25' stop-color='%23FFD700' stop-opacity='0' /%3E%3C/radialGradient%3E%3C/defs%3E%3Cg stroke='url(%23goldenFade)' stroke-width='1' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 100 100' to='360 100 100' dur='15s' repeatCount='indefinite' /%3E%3Canimate attributeName='opacity' values='0.5; 1; 0.5' dur='4s' repeatCount='indefinite' /%3E%3Cline x1='10' y1='100' x2='190' y2='100' transform='rotate(0 100 100)' /%3E%3Cline x1='10' y1='100' x2='190' y2='100' transform='rotate(10 100 100)' /%3E%3Cline x1='10' y1='100' x2='190' y2='100' transform='rotate(20 100 100)' /%3E%3Cline x1='10' y1='100' x2='190' y2='100' transform='rotate(30 100 100)' /%3E%3Cline x1='10' y1='100' x2='190' y2='100' transform='rotate(40 100 100)' /%3E%3Cline x1='10' y1='100' x2='190' y2='100' transform='rotate(50 100 100)' /%3E%3Cline x1='10' y1='100' x2='190' y2='100' transform='rotate(60 100 100)' /%3E%3Cline x1='10' y1='100' x2='190' y2='100' transform='rotate(70 100 100)' /%3E%3Cline x1='10' y1='100' x2='190' y2='100' transform='rotate(80 100 100)' /%3E%3Cline x1='10' y1='100' x2='190' y2='100' transform='rotate(90 100 100)' /%3E%3Cline x1='10' y1='100' x2='190' y2='100' transform='rotate(100 100 100)' /%3E%3Cline x1='10' y1='100' x2='190' y2='100' transform='rotate(110 100 100)' /%3E%3Cline x1='10' y1='100' x2='190' y2='100' transform='rotate(120 100 100)' /%3E%3Cline x1='10' y1='100' x2='190' y2='100' transform='rotate(130 100 100)' /%3E%3Cline x1='10' y1='100' x2='190' y2='100' transform='rotate(140 100 100)' /%3E%3Cline x1='10' y1='100' x2='190' y2='100' transform='rotate(150 100 100)' /%3E%3Cline x1='10' y1='100' x2='190' y2='100' transform='rotate(160 100 100)' /%3E%3Cline x1='10' y1='100' x2='190' y2='100' transform='rotate(170 100 100)' /%3E%3C/g%3E%3C/svg%3E");
    --svg_triangle_dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 86.603'%3E%3Cpath d='M 0 86.603 L 50 0 L 100 86.603' fill='%23211610' stroke='%23f4d03f' stroke-width='1' vector-effect='non-scaling-stroke' shape-rendering='geometricPrecision' /%3E%3C/svg%3E");
    --svg_fabric_1:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cline x1='15' y1='0' x2='15' y2='60' stroke='%23d4af37' stroke-width='0.6' stroke-opacity='0.2' /%3E%3Cline x1='18' y1='0' x2='18' y2='60' stroke='%23d4af37' stroke-width='0.3' stroke-opacity='0.1' /%3E%3Cline x1='45' y1='0' x2='45' y2='60' stroke='%23d4af37' stroke-width='0.6' stroke-opacity='0.2' /%3E%3Cline x1='48' y1='0' x2='48' y2='60' stroke='%23d4af37' stroke-width='0.3' stroke-opacity='0.1' /%3E%3Cline x1='0' y1='30' x2='60' y2='30' stroke='%23d4af37' stroke-width='0.5' stroke-opacity='0.15' /%3E%3Cline x1='0' y1='32' x2='60' y2='32' stroke='%23d4af37' stroke-width='0.2' stroke-opacity='0.05' /%3E%3C/svg%3E");
    --svg_fabric_2:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'%3E%3C!-- Cum 6 chi doc --%3E%3Cline x1='250' y1='0' x2='250' y2='800' stroke='%23373631' stroke-width='8' /%3E%3Cline x1='310' y1='0' x2='310' y2='800' stroke='%23373631' stroke-width='8' /%3E%3Cline x1='370' y1='0' x2='370' y2='800' stroke='%23373631' stroke-width='8' /%3E%3Cline x1='430' y1='0' x2='430' y2='800' stroke='%23373631' stroke-width='8' /%3E%3Cline x1='490' y1='0' x2='490' y2='800' stroke='%23373631' stroke-width='8' /%3E%3Cline x1='550' y1='0' x2='550' y2='800' stroke='%23373631' stroke-width='8' /%3E%3C!-- Cum 6 chi ngang --%3E%3Cline x1='0' y1='250' x2='800' y2='250' stroke='%23373631' stroke-width='8' /%3E%3Cline x1='0' y1='310' x2='800' y2='310' stroke='%23373631' stroke-width='8' /%3E%3Cline x1='0' y1='370' x2='800' y2='370' stroke='%23373631' stroke-width='8' /%3E%3Cline x1='0' y1='430' x2='800' y2='430' stroke='%23373631' stroke-width='8' /%3E%3Cline x1='0' y1='490' x2='800' y2='490' stroke='%23373631' stroke-width='8' /%3E%3Cline x1='0' y1='550' x2='800' y2='550' stroke='%23373631' stroke-width='8' /%3E%3C/svg%3E");
}

i.sprite.logo{
    display:inline-block;
    --sprite_width:300;
    --sprite_height:150;
    --x:0;
    --y:0;

    --icon_fill:var(--color);
    
    --width:300;
    --height:calc(var(--width) * var(--sprite_height) / var(--sprite_width));
}
.readmore::after{
    content:'Read More';
}
.readmore span{
    position:absolute;opacity:0;pointer-events:none;
}
body{
    background:#fff;position:relative;z-index:1;
}
.wrapper{
    display:block;box-sizing:border-box;margin:auto;position:relative;z-index:1;
    width:min(100%,1200px);
}

.golden_button {
  position: relative;
  display: inline-flex; /* Giúp <a> và <button> có hành vi hiển thị y hệt nhau */
  text-decoration: none;
  border: none;
  outline: none;
  background: linear-gradient(145deg, #f9e29a 0%, #d4af37 50%, #aa7b18 100%);
  border-radius: var(--radius_pill);
  cursor: pointer;
  overflow: hidden; /* Giữ hiệu ứng ánh sáng không bị tràn ra ngoài viền bo tròn */
  font-family: 'Georgia', serif; /* Đồng bộ với font tiêu đề của anh */
  
  /* Tạo khối 3D nhẹ nhàng (inset tạo viền chìm nổi, shadow ngoài tạo độ nổi) */
  box-shadow: 
    0 4px 10px rgba(0, 0, 0, 0.25), 
    0 8px 20px rgba(212, 175, 55, 0.3),
    inset 0 1px 2px rgba(255, 255, 255, 0.8),
    inset 0 -1px 2px rgba(0, 0, 0, 0.15);
  
  transition:box-shadow 1s ease;
  -ms-user-select:none;
  user-select:none;
}

/* --- PHẦN NỘI DUNG CHỮ (SPAN) --- */
.golden_button span {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:1rem;
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 1px;
  color: #2b2214; /* Màu nâu đen đậm cực kỳ hợp với nền vàng, sang hơn màu đen tuyền */
  text-transform: uppercase;
  z-index: 2; /* Nằm trên lớp ánh sáng hover */
  
  /* Thêm một lớp nền trong suốt siêu nhẹ để chữ tách bạch khỏi dải gradient */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%);
  border-radius: var(--radius_pill);
}

/* --- HIỆU ỨNG TIA SÁNG QUÉT QUA KHI HOVER --- */
.golden_button::after {
  content: '';
  position: absolute;
  top: 0;
  left: -50%;
  width: 50%;
  height: 100%;
  /* Tia sáng màu trắng trong suốt, vát chéo */
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-25deg);
  z-index: 1; /* Nằm dưới text (span) nhưng trên background */
  transition: left 0.6s ease;
}

/* --- TRẠNG THÁI HOVER (Ấn tượng) --- */
.golden_button:hover {
  /* Bóng đổ sâu và rực rỡ màu vàng hơn */
  box-shadow: 
    0 6px 15px rgba(0, 0, 0, 0.3), 
    0 12px 25px rgba(212, 175, 55, 0.5),
    inset 0 1px 2px rgba(255, 255, 255, 0.9),
    inset 0 -1px 2px rgba(0, 0, 0, 0.2);
}

/* Kích hoạt tia sáng quét từ trái sang phải */
.golden_button:hover::after {
  left: 100%;
  transition: left 1.5s ease-out;
}

/* --- TRẠNG THÁI ACTIVE (Khi click/bấm chuột xuống) --- */
.golden_button:active {
  box-shadow: 
    0 2px 5px rgba(0, 0, 0, 0.2), 
    0 4px 10px rgba(212, 175, 55, 0.2),
    inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* --- PHIÊN BẢN DARK BUTTON (Gỗ sậm / Da lộn sang trọng) --- */
.dark_button {
  position: relative;
  display: inline-flex;
  text-decoration: none;
  border: none;
  outline: none;
  /* Dải gradient nền: Từ nâu nhạt hơn -> nâu sậm -> đen tuyền tạo độ cong 3D */
  background: linear-gradient(145deg, #3d281a 0%, #24170f 50%, #150d08 100%);
  border-radius: var(--radius_pill);
  cursor: pointer;
  overflow: hidden;
  font-family: 'Georgia', serif;
  
  /* Bóng đổ tone trầm, viền chìm nổi sắc nét nhưng không gắt */
  box-shadow: 
    0 4px 10px rgba(0, 0, 0, 0.5), 
    0 8px 20px rgba(20, 10, 5, 0.4),
    inset 0 1px 2px rgba(255, 255, 255, 0.15),
    inset 0 -1px 2px rgba(0, 0, 0, 0.5);
  
  transition: box-shadow 1s ease;
  -ms-user-select: none;
  user-select: none;
}

/* --- PHẦN NỘI DUNG CHỮ --- */
.dark_button span {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:1rem;
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 1px;
  color: #d4af37; /* Chữ màu vàng gold trên nền nâu đen tạo độ vương giả */
  text-transform: uppercase;
  z-index: 2;
  
  /* Lớp phủ siêu mỏng tạo chiều sâu, làm khối text nổi bật lên nền */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.2) 100%);
  border-radius: var(--radius_pill);
}

/* --- HIỆU ỨNG TIA SÁNG QUÉT QUA --- */
.dark_button::after {
  content: '';
  position: absolute;
  top: 0;
  left: -50%;
  width: 50%;
  height: 100%;
  /* Tia sáng mờ và dịu hơn bản Golden để phù hợp với nền tối */
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-25deg);
  z-index: 1;
  transition: left 0.6s ease;
}

/* --- TRẠNG THÁI HOVER --- */
.dark_button:hover {
  /* Bóng đổ sâu hơn, viền sáng lóe nhẹ lên */
  box-shadow: 
    0 6px 15px rgba(0, 0, 0, 0.6), 
    0 12px 25px rgba(36, 23, 15, 0.5),
    inset 0 1px 2px rgba(255, 255, 255, 0.25),
    inset 0 -1px 2px rgba(0, 0, 0, 0.6);
}

.dark_button:hover::after {
  left: 100%;
  transition: left 1.5s ease-out;
}

/* --- TRẠNG THÁI ACTIVE --- */
.dark_button:active {
  /* Nút bị ấn lún xuống, bóng đổ thu hẹp lại */
  box-shadow: 
    0 2px 5px rgba(0, 0, 0, 0.6), 
    0 4px 10px rgba(36, 23, 15, 0.4),
    inset 0 2px 4px rgba(0, 0, 0, 0.8);
}

header#header{
    background:#000;
    min-height:100vh;
    display:flex;position:relative;z-index:1;
    flex-direction:column;
}
header#header>.background{
    display:block;width:100%;height:100%;position:absolute;z-index:1;
    overflow:hidden;
}
header#header>.background>.image{
    display:block;width:100%;height:100%;;
}
header#header>.background>.image>img{
    display:block;width:100%;height:100%;object-fit:cover;
}
header#header>.overlay{
    display:block;width:100%;height:100%;position:absolute;z-index:1;
    background: linear-gradient(to bottom, rgba(18, 18, 18, 0.4) 0%, rgba(18, 18, 18, 0.8) 100%);
}
header#header>.sun{
    --size:min(100vh,100vw);
    display:block;width:var(--size);height:var(--size);
    position:absolute;z-index:1;top:0%;left:50%;margin-left:calc(-1 * var(--size) / 2);margin-top:calc(-1 * var(--size) / 2);
    background:var(--svg_sun);
    opacity:0;
    transition:opacity 5s;
}
header#header .section_container{
    flex-grow:1;
    display:flex;flex-direction:column;
    position:relative;z-index:1;
}
header#header .section_container>.top{
    display:block;text-align:center;padding:2rem 0;
}
header#header .section_container>.top>a.logo{display:inline-block;transform:scale(0);transition:transform 2s,opacity 2s;opacity:0;}
header#header .section_container>.top>a.logo>span{position:absolute;display:block;opacity:0;}
header#header .section_container>.top>a.logo>.sprite.logo{
    --color:#fff;
    --width:300;
}
@media (max-width:576px){
    header#header .section_container>.top>a.logo>.sprite.logo{
        --width:200;
    }
}

header#header .section_container>.middle{
    /* Tốc độ Animation */
    --hero-sweep-speed: 12s;
    --hero-twinkle-speed: 5s;
    
    /* Màu sắc Gradient cho chữ */
    --hero-text-gradient: linear-gradient(-45deg,#d4af37 0%,#d4af37 40%,#ffeb99 48%,#ffffff 50%,#ffeb99 52%,#d4af37 60%,#d4af37 100%);

    /* Màu sắc cho ngôi sao */
    --hero-star-center: #ffffff; /* Màu lõi sáng nhất */
    --hero-star-glow: #ffd700;   /* Màu tỏa hào quang / lấp lánh */
    
    display:flex;
    flex-grow:1;
    min-height:400px;
}
header#header .section_container>.middle>.wrapper{
    display:flex;align-items:center;justify-content:center;text-align:center;
    flex-direction:column;gap:1rem;
}

header#header .section_container>.middle h1,
header#header .section_container>.middle h1>span {
position: relative;
display: inline-block;
}
header#header .section_container>.middle h1>span>span{
    display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
    gap:0.25em;
}

header#header .section_container>.middle h1 {
    font-family: 'Georgia', serif; 
    font-size:clamp(2rem,5vw,4rem);
    margin: 0;
    text-transform:uppercase;
    transform:translateY(-2rem);
    opacity:0;
    transition:transform 2s,opacity 2s;
    -ms-user-select:none;
    user-select:none;
}

/* 1. Hiệu ứng chữ Golden và Ánh sáng chạy ngang */
header#header .section_container>.middle h1>span {
    background: var(--hero-text-gradient,linear-gradient(-45deg,#d4af37 0%,#d4af37 40%,#ffeb99 48%,#ffffff 50%,#ffeb99 52%,#d4af37 60%,#d4af37 100%));
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;

    /* Sử dụng biến tốc độ chạy sáng */
    animation: hero_banner_sweep_light var(--hero-sweep-speed,12s) linear infinite; 
    text-align:center;
}

/* 2. Tạo hình gốc cho 4 ngôi sao lấp lánh */
header#header .section_container>.middle h1::before, 
header#header .section_container>.middle h1::after,
header#header .section_container>.middle h1>span::before,
header#header .section_container>.middle h1>span::after {
content: '';
position: absolute;
/* Sử dụng biến màu lõi và màu hào quang sao */
background: radial-gradient(circle, var(--hero-star-center,#fff) 10%, var(--hero-star-glow,#ffd700) 30%, transparent 60%);
clip-path: polygon(50% 0%, 55% 45%, 100% 50%, 55% 55%, 50% 100%, 45% 55%, 0% 50%, 45% 45%);
pointer-events: none; 
opacity: 0;

/* Sử dụng biến tốc độ lấp lánh */
animation: hero_banner_twinkle var(--hero-twinkle-speed,5s) ease-in-out infinite; 
}

/* Ngôi sao 1: Góc trên, bên trái (Không delay) */
header#header .section_container>.middle h1::before {
width: 30px; height: 30px;
top: -10px; left: 5%;
animation-delay: 0s;
}

/* Ngôi sao 2: Góc dưới, bên phải (Delay 25% chu kỳ) */
header#header .section_container>.middle h1::after {
width: 20px; height: 20px;
bottom: -5px; right: 10%;
animation-delay: calc(var(--hero-twinkle-speed,5s) * 0.25); 
}

/* Ngôi sao 3: Ở giữa, phía trên (Delay 50% chu kỳ) */
header#header .section_container>.middle h1>span::before {
width: 25px; height: 25px;
top: 10px; right: 30%;
animation-delay: calc(var(--hero-twinkle-speed,5s) * 0.5);
}

/* Ngôi sao 4: Ở giữa, phía dưới (Delay 75% chu kỳ) */
header#header .section_container>.middle h1>span::after {
width: 15px; height: 15px;
bottom: 15px; left: 25%;
animation-delay: calc(var(--hero-twinkle-speed,5s) * 0.75);
}

/* --- CÁC KEYFRAMES ANIMATION --- */

@keyframes hero_banner_sweep_light {
0% { background-position: 300% 50%; }
100% { background-position: -100% 50%; }
}

@keyframes hero_banner_twinkle {
0%, 100% { 
    transform: scale(0) rotate(0deg); 
    opacity: 0; 
}
50% { 
    transform: scale(1) rotate(90deg); 
    opacity: 1; 
    /* Gắn biến màu vào hiệu ứng tỏa sáng (drop-shadow) */
    filter: drop-shadow(0 0 5px var(--hero-star-glow,#ffd700)); 
}
}

header#header .section_container>.middle h2{
    font-weight:normal;color:#fff;margin:0;

    transform:translateY(2rem);
    opacity:0;
    transition:transform 2s,opacity 2s;

    
    font-size:clamp(1.2rem,1.5vw,2rem);
    display:flex;align-items:center;justify-content:center;
    gap:0.2em;flex-wrap:wrap;

    -ms-user-select:none;
    user-select:none;
}

header#header .section_container>.middle .golden_button{
    transform:translateY(2rem);
    opacity:0;
    transition:transform 2s,opacity 2s;
}


header#header .section_container>.bottom{
    flex-basis:100px;
    flex-shrink:0;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 150' preserveAspectRatio='none' shape-rendering='geometricPrecision'%3E%3Cdefs%3E%3Cstyle%3E.sx-layer { animation-name: wgMove; animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes wgMove { from { transform: translate3d(-1200px,0,0); } to { transform: translate3d(0,0,0); } } .sx-l0 { animation-duration: 13.37s; } .sx-l1 { animation-duration: 18.50s; } %3C/style%3E%3C/defs%3E%3Cg class='sx-layer sx-l1'%3E%3Cpath d='M0,150L0,74.79L0,74.79L12,71.57L24,67.83L36,63.77L48,59.61L60,55.59L72,51.9L84,48.73L96,46.19L108,44.37L120,43.27L132,42.87L144,43.1L156,43.87L168,45.09L180,46.65L192,48.48L204,50.49L216,52.64L228,54.89L240,57.21L252,59.55L264,61.87L276,64.14L288,66.27L300,68.21L312,69.87L324,71.19L336,72.1L348,72.56L360,72.54L372,72.03L384,71.04L396,69.6L408,67.77L420,65.61L432,63.2L444,60.63L456,58L468,55.4L480,52.93L492,50.68L504,48.74L516,47.16L528,46L540,45.28L552,45.01L564,45.19L576,45.8L588,46.83L600,48.28L612,50.14L624,52.41L636,55.1L648,58.2L660,61.7L672,65.51L684,69.55L696,73.65L708,77.63L720,81.23L732,84.21L744,86.34L756,87.38L768,87.21L780,85.74L792,83.02L804,79.16L816,74.39L828,68.98L840,63.28L852,57.6L864,52.28L876,47.58L888,43.7L900,40.77L912,38.82L924,37.83L936,37.71L948,38.36L960,39.62L972,41.38L984,43.5L996,45.9L1008,48.52L1020,51.31L1032,54.24L1044,57.29L1056,60.44L1068,63.65L1080,66.86L1092,69.98L1104,72.9L1116,75.5L1128,77.63L1140,79.15L1152,79.96L1164,79.95L1176,79.07L1188,77.33L1200,74.79L1212,71.57L1224,67.83L1236,63.77L1248,59.61L1260,55.59L1272,51.9L1284,48.73L1296,46.19L1308,44.37L1320,43.27L1332,42.87L1344,43.1L1356,43.87L1368,45.09L1380,46.65L1392,48.48L1404,50.49L1416,52.64L1428,54.89L1440,57.21L1452,59.55L1464,61.87L1476,64.14L1488,66.27L1500,68.21L1512,69.87L1524,71.19L1536,72.1L1548,72.56L1560,72.54L1572,72.03L1584,71.04L1596,69.6L1608,67.77L1620,65.61L1632,63.2L1644,60.63L1656,58L1668,55.4L1680,52.93L1692,50.68L1704,48.74L1716,47.16L1728,46L1740,45.28L1752,45.01L1764,45.19L1776,45.8L1788,46.83L1800,48.28L1812,50.14L1824,52.41L1836,55.1L1848,58.2L1860,61.7L1872,65.51L1884,69.55L1896,73.65L1908,77.63L1920,81.23L1932,84.21L1944,86.34L1956,87.38L1968,87.21L1980,85.74L1992,83.02L2004,79.16L2016,74.39L2028,68.98L2040,63.28L2052,57.6L2064,52.28L2076,47.58L2088,43.7L2100,40.77L2112,38.82L2124,37.83L2136,37.71L2148,38.36L2160,39.62L2172,41.38L2184,43.5L2196,45.9L2208,48.52L2220,51.31L2232,54.24L2244,57.29L2256,60.44L2268,63.65L2280,66.86L2292,69.98L2304,72.9L2316,75.5L2328,77.63L2340,79.15L2352,79.96L2364,79.95L2376,79.07L2388,77.33L2400,74.79L2400,150Z' fill='%23ccae88' fill-opacity='0.80'%3E%3C/path%3E%3C/g%3E%3Cg class='sx-layer sx-l0'%3E%3Cpath d='M0,150L0,73.21L0,73.21L12,70.03L24,67.18L36,64.71L48,62.64L60,60.98L72,59.73L84,58.88L96,58.43L108,58.42L120,58.85L132,59.75L144,61.15L156,63.05L168,65.41L180,68.19L192,71.27L204,74.55L216,77.84L228,81L240,83.83L252,86.21L264,88.01L276,89.14L288,89.6L300,89.38L312,88.55L324,87.2L336,85.46L348,83.42L360,81.22L372,78.96L384,76.73L396,74.59L408,72.59L420,70.75L432,69.09L444,67.59L456,66.26L468,65.08L480,64.07L492,63.23L504,62.6L516,62.24L528,62.21L540,62.59L552,63.47L564,64.94L576,67.05L588,69.82L600,73.21L612,77.14L624,81.43L636,85.89L648,90.24L660,94.2L672,97.49L684,99.87L696,101.13L708,101.18L720,99.99L732,97.64L744,94.28L756,90.14L768,85.47L780,80.56L792,75.66L804,71L816,66.74L828,63L840,59.84L852,57.29L864,55.35L876,53.98L888,53.19L900,52.95L912,53.28L924,54.18L936,55.69L948,57.8L960,60.5L972,63.76L984,67.49L996,71.57L1008,75.85L1020,80.15L1032,84.27L1044,88.01L1056,91.19L1068,93.65L1080,95.27L1092,95.99L1104,95.78L1116,94.69L1128,92.81L1140,90.25L1152,87.19L1164,83.78L1176,80.21L1188,76.64L1200,73.21L1212,70.03L1224,67.18L1236,64.71L1248,62.64L1260,60.98L1272,59.73L1284,58.88L1296,58.43L1308,58.42L1320,58.85L1332,59.75L1344,61.15L1356,63.05L1368,65.41L1380,68.19L1392,71.27L1404,74.55L1416,77.84L1428,81L1440,83.83L1452,86.21L1464,88.01L1476,89.14L1488,89.6L1500,89.38L1512,88.55L1524,87.2L1536,85.46L1548,83.42L1560,81.22L1572,78.96L1584,76.73L1596,74.59L1608,72.59L1620,70.75L1632,69.09L1644,67.59L1656,66.26L1668,65.08L1680,64.07L1692,63.23L1704,62.6L1716,62.24L1728,62.21L1740,62.59L1752,63.47L1764,64.94L1776,67.05L1788,69.82L1800,73.21L1812,77.14L1824,81.43L1836,85.89L1848,90.24L1860,94.2L1872,97.49L1884,99.87L1896,101.13L1908,101.18L1920,99.99L1932,97.64L1944,94.28L1956,90.14L1968,85.47L1980,80.56L1992,75.66L2004,71L2016,66.74L2028,63L2040,59.84L2052,57.29L2064,55.35L2076,53.98L2088,53.19L2100,52.95L2112,53.28L2124,54.18L2136,55.69L2148,57.8L2160,60.5L2172,63.76L2184,67.49L2196,71.57L2208,75.85L2220,80.15L2232,84.27L2244,88.01L2256,91.19L2268,93.65L2280,95.27L2292,95.99L2304,95.78L2316,94.69L2328,92.81L2340,90.25L2352,87.19L2364,83.78L2376,80.21L2388,76.64L2400,73.21L2400,150Z' fill='%23ccae88' fill-opacity='1.00'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

header#header.scroll_active .section_container>.top>a.logo{
    transform:scale(1);opacity:1;
}
header#header.scroll_active .section_container>.top>a.logo>i.logo {
  /* Thay #ffffff bằng #ffe65c (Vàng chói óng ả) để giữ vững chất liệu kim loại */
  --icon_fill: linear-gradient(135deg, #a67c00 0%, #d4af37 25%, #ffe65c 50%, #d4af37 75%, #a67c00 100%);
  background-size: 300% 300%;
  animation: hero_banner_logo 6s ease-in-out infinite alternate;
}

@keyframes hero_banner_logo {
  0% { 
    background-position: 0% 50%; 
    filter: brightness(0.9) drop-shadow(0 0 0px rgba(255, 230, 92, 0));
  }
  50% {
    /* Đẩy brightness lên 1.2 để điểm vàng óng tự động phát sáng mạnh hơn khi ra giữa */
    filter: brightness(1.2) drop-shadow(0 0 12px rgba(255, 230, 92, 0.6));
  }
  100% { 
    background-position: 100% 50%; 
    filter: brightness(0.9) drop-shadow(0 0 0px rgba(255, 230, 92, 0));
  }
}

header#header.scroll_active>.sun{opacity:0.5;}

header#header.scroll_active .section_container>.middle h1{
    transform:translateY(0rem);
    opacity:1;
}

header#header.scroll_active .section_container>.middle h2{
    transform:translateY(0rem);
    opacity:1;
}

header#header.scroll_active .section_container>.middle .golden_button{
    transform:translateY(0rem);
    opacity:1;
}


    section#intro{
        background:#ccae88;
        background:linear-gradient(180deg, #ccae88 0%, #9f7b57 100%);
    }
    section#intro .section_container{
        display:flex;gap:2rem;align-items:stretch;
        padding:2rem 0;
    }
    section#intro .section_container .column_thumbnail{
        flex-basis:30%;flex-shrink:0;
    }
    section#intro .section_container .column_thumbnail .thumbnail{
        display:block;position:relative;z-index:1;
        width:100%;
    }
    section#intro .section_container .column_thumbnail .thumbnail::before{
        display:block;content:'';
        padding-top:var(--aspect-ratio-3-4);
    }
    section#intro .section_container .column_thumbnail .thumbnail .image{
        display:block;position:absolute;width:100%;height:100%;z-index:0;top:0;left:0;
        border-radius:var(--radius_pill) var(--radius_pill) 0 0;overflow:hidden;
        box-sizing:border-box;
        box-shadow:0 0 1rem rgba(0,0,0,0.5);
        border:0.2rem solid #d0b68f;
    }

    section#intro .section_container .column_content{
        flex-grow:1;flex-shrink:0;width:0;display:flex;align-items:center;
    }
    section#intro .section_container .column_content .content_container{
        display:flex;flex-direction:column;gap:1rem;
    }
    section#intro .section_container .column_content .title{
        font-family: 'Georgia', serif; 
        font-weight:bold;
        font-size:1.5rem;
    }
    section#intro .section_container .column_content .description{
        font-family: 'Georgia', serif; 
        font-weight:bold;
        font-size:1.2rem;font-style:italic;
    }
    section#intro .section_container .column_content .content{
        display:flex;gap:0.2rem;flex-direction:column;
        text-align:justify;
        text-align-last:left;
    }
    section#intro .section_container .column_content .command{
        text-align:right;
    }
    section#intro::after{
        content:'';display:block;
        background:var(--svg_triangle_dark) repeat-x;
        height:15px;
    }
    
    @media (max-width:768px){
        section#intro .section_container{
            flex-direction:column;
        }
        section#intro .section_container .column_thumbnail{
            flex-basis:auto;margin:auto;
            width:min(90%,400px);
        }
        section#intro .section_container .column_content{
            width:100%;
        }
        section#intro .section_container .column_content .title{
            text-align:center;
        }
        section#intro .section_container .column_content .description{
            text-align:center;
        }
        section#intro .section_container .column_content .command{
            text-align:center;
        }
    }





        section#uniqueness{
            display:block;position:relative;z-index:1;
            background:#211610;
            background:linear-gradient(180deg, #211610 0%, #231812 100%);

            --title_color:#d4af37;
            --text_color:#d3bf9e;
        }
        section#uniqueness::before{
            content:'';
            display:block;position:absolute;top:0;left:0;width:100%;height:100%;
            background:var(--svg_fabric_1) repeat;z-index:1;
            background-size:5%;
            opacity:0.5;
        }
        section#uniqueness .section_container .header{
            padding-top:2rem;text-align:center;justify-content:center;
        }
        section#uniqueness .section_container .header .title{
            color:var(--title_color);
            font-family: 'Georgia', serif; 
            font-weight:bold;
            font-size:1.5rem;
        }
        section#uniqueness .section_container .header .description{
            color:var(--text_color);
            font-family: 'Georgia', serif; 
            font-weight:normal;
            font-size:1.2rem;font-style:italic;
        }

        section#uniqueness .section_container .main{
            display:flex;flex-direction:column;gap:2rem;padding:2rem 0;
        }
        section#uniqueness .section_container .main .column_thumbnail{
            display:block;position:relative;z-index:1;
            overflow:hidden;border-radius:1rem;
        }
        section#uniqueness .section_container .main .column_thumbnail::before{
            content:'';display:block;
            padding-top:25%;
        }
        section#uniqueness .section_container .main .column_thumbnail .image{
            display:block;position:absolute;width:100%;height:100%;z-index:1;top:0;left:0;
        }
        section#uniqueness .section_container .main .column_content{
            display:grid;gap:2rem;
            grid-template-columns:1fr 1fr 1fr 1fr;
        }
        section#uniqueness .section_container .main .column_content .thumbnail{
            display:block;position:relative;z-index:1;overflow:hidden;border-radius:1rem;
            margin:auto;width:100%;
        }
        section#uniqueness .section_container .main .column_content .thumbnail::before{
            content:'';display:block;padding-top:var(--aspect-ratio-3-4);
        }
        section#uniqueness .section_container .main .column_content .thumbnail .image{
            display:block;width:100%;height:100%;position:absolute;top:0;left:0;
        }
        section#uniqueness .section_container .main .column_content .content{
            text-align:center;color:var(--text_color);padding:1rem 0;
        }
        @media (max-width:992px){
            section#uniqueness .section_container .main .column_content .thumbnail{
                margin:auto;
                width:min(300px,80%);
            }
            section#uniqueness .section_container .main .column_content{
                grid-template-columns:1fr 1fr;
            }
        }
        @media (max-width:576px){
            section#uniqueness .section_container .main .column_content{
                grid-template-columns:1fr;
            }
        }

@media (max-width:1920px){
}

@media (max-width:1400px){
}

@media (max-width:1200px){
    .wrapper{
        padding:0 1rem;
    }
}

@media (max-width:992px){
}
@media (max-width:768px){
}
@media (max-width:576px){
}