/* ===== WRAPPER ===== */
.seila-hub-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

/* ===== HEADER ===== */
.seila-hub-header img {
    max-width: 300px;
    margin-bottom: 12px;
}

.seila-hub-header h2 {
    font-size: 65px;
    font-weight: 500;
    color: #292A76;
    margin: 10px 0;
}

.seila-hub-header p {
    font-size: 36px;
    color: #646367;
    margin: 0 auto 80px;
}

/* ===== HUB GRID ===== */
.seila-hub {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 64px;
}

/* ===== CENTER LOGO ===== */
.seila-hub-center {
    width: 266px;
    height: 266px;
    border-radius: 133px;
    border: 1px dashed #292A76;
    background: linear-gradient(180deg, #FFBC47 0%, #FF9500 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.seila-hub-center img {
    max-width: 60%;
}

.content-svg-hub {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.seila-hub-side.left .icon-svg-hub {
    margin-right: -54px;
}

.seila-hub-side.left .seila-hub-item:nth-child(2) {
    left: -20%;
    position: relative;
}

.seila-hub-side.right .seila-hub-item:nth-child(2) {
    right: -20%;
    position: relative;
}

.seila-hub-side.right .icon-svg-hub {
    margin-left: -54px;
}

/* ===== SIDES ===== */
.seila-hub-side {
    display: flex;
    flex-direction: column;
    gap: 100px;
}

.seila-hub-side.left {
    align-items: flex-end;
    text-align: right;
}

.seila-hub-side.right {
    align-items: flex-start;
    text-align: left;
}

/* ===== ITEM ===== */
/*.seila-hub-item {
    display: flex;
    align-items: center;
    gap: 32px;
    max-width: 380px;
}*/

.seila-hub-side.left .seila-hub-item {
    position: relative;
}

/* ===== CONNECTOR ===== */
.hub-connector {
    width: 120px;
    height: 40px;
    flex-shrink: 0;
    position: absolute;
    z-index: 1;
}

/*.hub-connector.left svg {
    transform: rotate(180deg);
}*/

/* ===== ITEM CONTENT RIGHT ===== */
.seila-hub-side.right .hub-content {
    border-radius: 16px 0 0 16px;
    background: linear-gradient(90deg, #E0E1FF 0%, #FFF 100%);
    z-index: 9;
}

.hub-content {
    display: flex;
    gap: 24px;
}

.seila-hub-side.right .hub-content h4 {
    font-size: 24px;
    font-weight: 500;
    color: #292A76;
    margin: 0 0 6px;
}

.seila-hub-side.right .hub-content p {
    font-size: 18px;
    color: #363636;
    margin: 0;
}

/* ===== ITEM CONTENT LEFT ===== */
.seila-hub-side.left .hub-content {
    border-radius: 0 16px 16px 0;
    background: linear-gradient(90deg, #FFF 0%, #E0E1FF 100%);
    flex-direction: row-reverse;
    z-index: 9;
}

.seila-hub-side.left .hub-content h4 {
    font-size: 24px;
    font-weight: 500;
    color: #292A76;
    text-align: right;
    margin: 0 0 6px;
}

.seila-hub-side.left .hub-content p {
    font-size: 18px;
    color: #363636;
    text-align: right;
    margin: 0;
}

/* ===== MOBILE ===== */
@media (max-width: 900px) {
    .seila-hub {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .seila-hub-side {
        align-items: center;
    }

    .seila-hub-item {
        flex-direction: column;
        text-align: center;
    }

    .hub-connector {
        display: none;
    }

    .seila-hub-center {
        margin: 0 auto 32px;
    }

    .hub-content {
        border-radius: 16px !important;
    }
}

/* =====================================================
   ADD-ON: HUB CENTER RING + SVG CONNECTOR
===================================================== */

/* Outer ring ~30px */
.seila-hub-center {
    position: relative;
    z-index: 5;
}

.seila-hub-center::before {
    content: "";
    position: absolute;
    inset: -30px;
    border-radius: 50%;
    border: 1px solid rgba(41, 42, 118, .25);
    pointer-events: none;
    z-index: -1;
}

/* SVG connector layer */
.seila-hub {
    position: relative;
}

.seila-hub-links {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

/* SVG path */
.seila-hub-links .seila-link {
    fill: none;
    stroke: rgba(224, 225, 255, .75);
    stroke-width: 10;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .95;

    stroke-dasharray: var(--dash, 1);
    stroke-dashoffset: var(--dash, 1);
    transition: stroke .25s ease, stroke-width .25s ease, filter .25s ease;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .08));
}

.seila-hub.is-links-ready .seila-link {
    stroke-dashoffset: 0;
}

.seila-hub-links .seila-link.is-active {
    stroke: rgba(41, 42, 118, .55);
    stroke-width: 12;
    filter: drop-shadow(0 14px 22px rgba(41, 42, 118, .18));
}

/* Hide old connector after SVG ready */
.seila-hub.is-links-ready .hub-connector {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Icon anchor */
.icon-svg-hub {
    position: relative;
}

/* Mobile: giữ nguyên hành vi cũ */
@media (max-width: 900px) {
    .seila-hub-links {
        display: none;
    }
}

/* =====================================================
   SVG BAR CONNECTOR (USING PROVIDED SVG)
===================================================== */

.seila-hub-links {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

/* mỗi connector */
.seila-hub-links .svg-link {
    position: absolute;
    left: 50%;
    top: 50%;
    transform-origin: left center;
    opacity: 0.95;
    transition: opacity .25s ease, filter .25s ease;
}

/* hover highlight */
.seila-hub-links .svg-link.is-active {
    opacity: 1;
    filter: drop-shadow(0 12px 20px rgba(41, 42, 118, .25));
}

/* ẩn connector cũ khi SVG mới active */
.seila-hub.is-links-ready .hub-connector {
    opacity: 0 !important;
    visibility: hidden !important;
}

@media (max-width: 900px) {
    .seila-hub-links {
        display: none;
    }
}


/* =====================================================
   FIX: SVG BAR CONNECTOR ALIGNMENT (ADDON ONLY)
===================================================== */

/* đảm bảo layer connector nằm dưới content */
.seila-hub {
    position: relative;
}

.seila-hub-links {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* dưới hub-content */
    pointer-events: none;
}

/* hub-content cần position để z-index của bạn có hiệu lực (addon, không phá layout) */
.hub-content {
    position: relative;
    z-index: 9;
}

/* mỗi svg connector: đặt theo toạ độ left/top, transform quay quanh điểm (0,29) */
.seila-hub-links .svg-link {
    position: absolute;
    width: 319px;
    height: 58px;
    transform-origin: 0px 29px;
    /* tâm chiều cao svg */
    opacity: .85;
    transition: opacity .2s ease, filter .2s ease;
}

.seila-hub-links .svg-link.is-active {
    opacity: 1;
    filter: drop-shadow(0 12px 20px rgba(41, 42, 118, .25));
}

/* khi svg chạy OK -> ẩn connector cũ */
.seila-hub.is-links-ready .hub-connector {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* ring 30px quanh hub-center */
.seila-hub-center {
    position: relative;
    z-index: 5;
}

.seila-hub-center::before {
    content: "";
    position: absolute;
    inset: -30px;
    border-radius: 50%;
    border: 1px solid rgba(41, 42, 118, .25);
    pointer-events: none;
    z-index: -1;
}

/* mobile: giữ như bạn set (ẩn connector) */
@media (max-width: 900px) {
    .seila-hub-links {
        display: none;
    }
}

/* FIX: ensure svg connector visible */
.seila-hub-links {
    z-index: 4 !important;
}

/* content vẫn nằm trên connector */
.hub-content {
    position: relative;
    z-index: 9;
}

/* =====================================================
   FINAL FIX – SVG CONNECTOR VISIBILITY & LAYER
===================================================== */

/* 1. Hub container PHẢI cho phép vươn ra ngoài */
.seila-hub {
    position: relative !important;
    overflow: visible !important;
}

/* 2. SVG layer – thống nhất 1 lần */
.seila-hub-links {
    position: absolute !important;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 4 !important;
    /* dưới content, trên nền */
    display: block !important;
}

/* 3. SVG bar */
.seila-hub-links .svg-link {
    position: absolute;
    width: 319px;
    height: 58px;
    transform-origin: 0px 29px;
    opacity: 0.85;
}

/* 4. Content luôn nằm trên connector */
.hub-content {
    position: relative;
    z-index: 9 !important;
}

/* 5. Chỉ ẨN SVG khi mobile (1 chỗ DUY NHẤT) */
@media (max-width: 900px) {
    .seila-hub-links {
        display: none !important;
    }
}
@media (max-width:768px){
	.seila-hub-header img{
		width:100px;
	}
	.seila-hub-header h2{
		font-size:32px;
	}
	.seila-hub-side{
		gap:20px;
	}
	.seila-hub-side.left .seila-hub-item:nth-child(2){
		left:0;
	}
	.hub-content .icon-svg-hub svg{
		    width: 60px;
    height: 60px;
	}
	.seila-hub-side.left .hub-content h4{
		font-size:18px;
	}
	.seila-hub-side.left .hub-content p{
		    font-size: 16px;
	}
	.seila-hub-side.left .hub-content{
		margin-right:45px;
	}
	.seila-hub-side.left .icon-svg-hub {
    margin-right: -28px;
}
	.seila-hub-side.right .hub-content h4{
		font-size:18px;
	}
	.seila-hub-side.right .hub-content p{
		    font-size: 16px;
	}
	.seila-hub-side.right .hub-content{
		margin-left:45px;
	}
	.seila-hub-side.right .hub-content{
		text-align:left;
	}
	.seila-hub-side.right .seila-hub-item:nth-child(2){
		right:0;
	}
	.seila-hub-side.right .icon-svg-hub {
    margin-left: -28px;
}
	.seila-hub-center{
		width:150px;
		height:150px;
	}
	.svg-link{
        display: none !important;
    }
}