/* V20A.2 - Khối Thư viện dạng triển lãm trên trang chủ */
.home-gallery-showcase{
    padding-top:14px;
    padding-bottom:24px;
}
.gallery-showcase-panel{
    position:relative;
    overflow:hidden;
    min-height:330px;
    display:grid;
    grid-template-columns:minmax(300px,.88fr) minmax(440px,1.35fr);
    align-items:center;
    gap:32px;
    padding:40px 46px;
    border:1px solid rgba(8,35,63,.10);
    border-radius:28px;
    background:
        radial-gradient(circle at 76% 18%,rgba(255,255,255,.72),transparent 24%),
        linear-gradient(135deg,#f4eee4 0%,#fffdf8 42%,#e9f2f1 100%);
    box-shadow:0 18px 44px rgba(8,35,63,.10);
}
.gallery-showcase-panel:before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:7px;
    background:linear-gradient(#c77643,#e4b36f,#b95e3c);
}
.gallery-showcase-copy{
    position:relative;
    z-index:2;
}
.gallery-showcase-copy .kicker{
    color:#8c4a2d;
    letter-spacing:.15em;
}
.gallery-showcase-copy h2{
    margin:10px 0 12px;
    max-width:520px;
    color:#08233F;
    font-size:clamp(29px,3.1vw,45px);
    line-height:1.08;
}
.gallery-showcase-copy p{
    max-width:520px;
    margin:0 0 22px;
    color:#516a78;
    line-height:1.7;
}
.gallery-showcase-cta{
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.gallery-exhibition{
    position:relative;
    min-height:270px;
    perspective:1100px;
}
.gallery-exhibition:before{
    content:"";
    position:absolute;
    inset:14px 0 16px;
    border-radius:20px;
    background:
        linear-gradient(90deg,rgba(90,72,53,.045) 1px,transparent 1px),
        linear-gradient(rgba(90,72,53,.035) 1px,transparent 1px);
    background-size:24px 24px;
}
.gallery-exhibition:after{
    content:"";
    position:absolute;
    left:5%;
    right:3%;
    bottom:11px;
    height:20px;
    border-radius:50%;
    background:rgba(51,43,36,.10);
    filter:blur(13px);
}

.gallery-frame{
    position:absolute;
    z-index:3;
    display:block;
    width:210px;
    padding:9px 9px 12px;
    color:#102a43;
    text-decoration:none;
    background:#fffdf8;
    border:7px solid #6c4b35;
    outline:2px solid rgba(255,255,255,.65);
    box-shadow:
        0 16px 24px rgba(46,35,25,.20),
        inset 0 0 0 2px #c8a47b;
    transition:transform .25s ease,box-shadow .25s ease;
}
.gallery-frame:hover{
    z-index:10;
    transform:translateY(-7px) rotate(0deg) scale(1.035);
    box-shadow:0 24px 36px rgba(46,35,25,.28),inset 0 0 0 2px #c8a47b;
}
.gallery-frame-1{
    left:2%;
    top:42px;
    transform:rotate(-5deg);
}
.gallery-frame-2{
    left:34%;
    top:8px;
    width:230px;
    transform:rotate(3deg);
}
.gallery-frame-3{
    right:1%;
    top:57px;
    width:195px;
    transform:rotate(-2deg);
}
.gallery-frame-mat{
    display:grid;
    place-items:center;
    overflow:hidden;
    aspect-ratio:4/3;
    padding:7px;
    background:#eee7db;
    border:1px solid rgba(71,51,35,.15);
}
.gallery-frame-mat img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}
.gallery-frame-placeholder{
    width:100%;
    height:100%;
    display:grid;
    place-items:center;
    font-size:42px;
    font-weight:900;
    color:#8fa8ae;
    background:linear-gradient(145deg,#d9eef0,#f8fbf8);
}
.gallery-frame-caption{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:8px;
    padding:8px 2px 0;
}
.gallery-frame-caption strong{
    min-width:0;
    font-family:Georgia,"Times New Roman",serif;
    font-size:12px;
    line-height:1.25;
}
.gallery-frame-caption span{
    flex:none;
    color:#8c6f59;
    font-size:9px;
    font-weight:800;
    text-transform:uppercase;
}
.gallery-wall-label{
    position:absolute;
    right:5px;
    bottom:2px;
    z-index:4;
    display:flex;
    align-items:center;
    gap:7px;
    color:#8b725e;
}
.gallery-wall-label span{
    font-family:Georgia,"Times New Roman",serif;
    font-size:21px;
    font-weight:700;
}
.gallery-wall-label small{
    font-size:8px;
    font-weight:900;
    letter-spacing:.17em;
}

.gallery-art-shape{
    width:100%;
    height:100%;
}
.gallery-art-a{
    background:
        radial-gradient(circle at 25% 32%,#f2b56b 0 18%,transparent 19%),
        linear-gradient(155deg,#183e5a 0 36%,#dfe8df 37% 64%,#b84e38 65%);
}
.gallery-art-b{
    background:
        linear-gradient(35deg,transparent 0 28%,#d1784f 29% 48%,transparent 49%),
        radial-gradient(circle at 67% 39%,#244f67 0 22%,transparent 23%),
        #eadfc9;
}
.gallery-art-c{
    background:
        repeating-linear-gradient(135deg,#d6e9e5 0 14px,#f8f1df 14px 28px);
}

@media(max-width:1050px){
    .gallery-showcase-panel{
        grid-template-columns:1fr;
        padding:34px;
    }
    .gallery-exhibition{
        min-height:300px;
    }
    .gallery-frame-1{left:7%}
    .gallery-frame-2{left:36%}
    .gallery-frame-3{right:7%}
}
@media(max-width:700px){
    .gallery-showcase-panel{
        padding:28px 20px 26px;
        border-radius:22px;
    }
    .gallery-exhibition{
        min-height:500px;
    }
    .gallery-frame{
        width:190px;
    }
    .gallery-frame-1{
        left:2%;
        top:30px;
    }
    .gallery-frame-2{
        left:auto;
        right:2%;
        top:165px;
        width:200px;
    }
    .gallery-frame-3{
        left:7%;
        right:auto;
        top:300px;
        width:180px;
    }
    .gallery-wall-label{
        right:4%;
        bottom:12px;
    }
}