/* Foxden By ThemeEaster */

/*  ==========================================================================
    Table of Contets
    ==========================================================================
    
    1.0 Common Styles
    2.0 Header Section
    3.0 Slider Section
    4.0 About Section
    5.0 Portfolio Section
    6.0 Testimonial Section
    7.0 Pricing Section
    8.0 CTA Section
    9.0 Instafeed Section
    10.0 Widget Section
    11.0 Footer Section
    12.0 Scroll To Top
    13.0 Gallery Mode
    
    ==========================================================================
    Foxden Photography Portfolio Template
    ========================================================================== */

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500|Unna:400,700');

/*  ==========================================================================
    Common Styles
    ========================================================================== */
* {
    padding: 0;
    margin: 0;
}

/* Bỏ toàn bộ outline (kể cả viền focus mặc định của trình duyệt) */
*,
*:focus,
*:focus-visible {
    outline: none !important;
}

body {
    background-color: #222530;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    line-height: 26px;
    color: #fff;
    font-weight: 400;
    position: relative;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Unna', sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #fff;
}

h1 {
    font-size: 45px;
    font-weight: 400;
    line-height: 55px;
    margin: 0 0 10px;
    color: #fff;
}

h2 {
    font-size: 42px;
    color: #fff;
    margin: 0 0 10px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.5px;
}

h3,
h4 {
    margin: 0 0 10px;
    font-weight: 400;
    line-height: 1.7;
    color: #fff;
    letter-spacing: -0.01em;
}

h3 {
    font-size: 22px;
}

h4 {
    font-size: 16px;
}

h5,
h6 {
    font-size: 14px;
    margin: 0 0 10px;
}

img {
    border: none;
    outline: none;
    max-width: 100%;
}

ul {
    display: block;
    list-style: none;
    padding: 0;
    margin: 0;
}

p,
li,
a,
span {}

p {
    font-size: 15px;
    margin-bottom: 15px;
}

a,
a:hover {
    text-decoration: none;
}

a:focus {
    outline: 0;
    text-decoration: none;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #ddd !important;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
    /* Firefox 18- */
    color: #ddd !important;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    /* Firefox 19+ */
    color: #ddd !important;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #ddd !important;
}

button {
    border: none;
    background: none;
}

/* Helper Class */
.padding {
    padding: 80px 0;
}

.no-padding {
    padding: 0;
}

.padding-5 {
    padding: 5px;
}

.padding-10 {
    padding: 10px;
}

.padding-15 {
    padding: 15px;
}

.padding-20 {
    padding: 20px;
}

.bg-white {
    background-color: #fff;
}

.bg-grey {
    background-color: #eef3f9;
}

.bg-dark {
    background-color: #232323;
}

.bd-top {
    border-top: 1px solid #eaeaea;
}

.bd-bottom {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-15 {
    margin-bottom: 15px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-25 {
    margin-bottom: 25px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mb-35 {
    margin-bottom: 35px;
}

.mb-40 {
    margin-bottom: 40px;
}

.mb-45 {
    margin-bottom: 45px;
}

.mb-50 {
    margin-bottom: 50px;
}

.mt-15 {
    margin-top: 15px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-25 {
    margin-top: 25px;
}

.mt-30 {
    margin-top: 30px;
}

.mt-35 {
    margin-top: 35px;
}

.mt-40 {
    margin-top: 40px;
}

.text-black {
    color: #333;
}

.text-white {
    color: #ffffff;
}

.align-left {
    text-align: left;
}

.align-right {
    text-align: right;
}

.align-center {
    text-align: center;
}

.fl-right {
    float: right;
}

.fl-left {
    float: left;
}

.display-table {
    width: 100%;
    height: 100%;
    display: table;
}

.table-cell {
    display: table-cell;
    vertical-align: middle;
}

.overlay {
    width: 100%;
    position: relative;
    z-index: 1;
}

.overlay:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

/* Preloader Styles */
.loaded .site-preloader-wrap {
    opacity: 0;
    visibility: hidden;
}

.site-preloader-wrap {
    position: fixed;
    z-index: 9999;
    height: 100%;
    width: 100%;
    background: #222530;
    top: 0;
    left: 0
}

.site-preloader-wrap .spinner {
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -20px;
    margin-top: -20px;
}

.spinner {
    width: 40px;
    height: 40px;

    border-radius: 100%;
    -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
    animation: sk-scaleout 1.0s infinite ease-in-out;
}

@-webkit-keyframes sk-scaleout {
    0% {
        -webkit-transform: scale(0)
    }

    100% {
        -webkit-transform: scale(1.0);
        opacity: 0;
    }
}

@keyframes sk-scaleout {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    100% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
        opacity: 0;
    }
}

/* Button Style */
.btn_group {}

.btn_group a {
    margin: 5px;
}

.btn_group_left a {
    margin-right: 15px;
    margin-bottom: 15px;
}

/* Style nút của foxden, đảo màu cho nền tối:
   nền trắng chữ tối; hover chỉ còn viền + chữ trắng trên nền trang */
.default-btn {
    font-family: "Poppins", sans-serif;
    background-color: #fff;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 600;
    color: #222530;
    padding: 12px 30px;
    letter-spacing: 1px;
    display: inline-block;
    border: 1px solid #fff;
    cursor: pointer;
}

.default-btn:hover,
.default-btn:focus-visible {
    background-color: transparent;
    color: #fff;
}

/* Transition Effect */
a,
a:hover,
.overlay,
img,
.form-control,
.form-control:hover,
button {
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

/* ==========================================================================
   Header Section
   ========================================================================== */
.header-section {
    background-color: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    height: 80px;
    z-index: 999;
    position: fixed;
    left: 0;
    top: 0;
    padding: 10px 0;
}

.navbar-fixed-top.header-section {
    background-color: #fff;
    -moz-box-shadow: 0 2px 5px rgba(16, 16, 16, .07);
    -webkit-box-shadow: 0 2px 5px rgba(16, 16, 16, .07);
    box-shadow: 0 2px 5px rgba(16, 16, 16, .07);
    height: 70px;
    border-bottom: 0;
    padding: 0;
}

.logo-light,
.navbar-fixed-top .logo-light,
.logo-dark,
.navbar-fixed-top .logo-dark,
.navbar-fixed-top.header-section,
.header-section {
    transition: all 0.3s ease-in-out;
}

.logo-dark {
    display: none;
}

.navbar-fixed-top .logo-light {
    display: none;
}

.navbar-fixed-top .logo-dark {
    display: block;
}

.navbar {
    border: medium none;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -ms-border-radius: 0;
    border-radius: 0;
    margin: 0;
    position: relative;
    padding: 0;
}

.navbar-header {
    padding: 17px 0;
}

.navbar-header .brand {
    font-size: 25px;
    color: #333;
    font-family: 'Poppins', sans-serif;
    letter-spacing: -1px;
    font-weight: 600;
    margin-left: 13px;
}

.navbar-header .nav-btn {
    padding: 8px;
    border-radius: 1px;
}

.navbar-header .nav-btn .icon-bar {
    background-color: #fff;
    width: 18px;
}

.navbar-fixed-top .navbar-header .nav-btn .icon-bar {
    background-color: #777;
}

.navbar-header .nav-btn:hover,
.navbar-header .nav-btn:focus {
    opacity: 0.8;
}

/* Nav Menu */
#navbar {
    z-index: 999;
    padding: 0 15px;
}

ul.nav {}

ul.nav > li {}

ul.nav > li > a {
    color: #ddd;
    font-family: 'Poppins', sans-serif;
    display: inline-block;
    vertical-align: middle;
    padding: 0 20px;
    font-size: 12px;
    font-weight: 700;
    line-height: 70px;
    z-index: 1;
    text-transform: uppercase;
    letter-spacing: 2px;
}

ul.nav > li > a:hover,
ul.nav > li > a:focus,
ul.nav > li > a.active {
    background: none;
    color: #fff;
    opacity: 1;
}

.navbar-fixed-top ul.nav > li > a {
    color: #555;
}

.navbar-fixed-top ul.nav > li > a:hover,
.navbar-fixed-top ul.nav > li > a:focus,
.navbar-fixed-top ul.nav > li.active > a {
    color: #000;
}

.menu-btn {
    margin-left: 10px;
    margin-top: 10px;
}

/*Mobile Menu */
.menu-wrap {
    position: relative;
}

.slicknav_menu {
    background: none;
    padding: 4px 0;
    display: none;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
}

.slicknav_nav {
    background-color: #fff;
}

.slicknav_btn {
    background-color: transparent;
    margin: 17px 5px 19px;
}

.slicknav_nav .slicknav_row:hover,
.slicknav_nav .slicknav_row,
.slicknav_nav a,
.slicknav_nav a:hover {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
}

.slicknav_nav .slicknav_row,
.slicknav_nav a {
    padding: 10px 15px;
    margin: 0;
    color: #777;
}

.slicknav_nav a .caret {
    display: none;
}

.slicknav_nav ul {
    margin: 0;
}

.slicknav_nav ul li a {
    padding-left: 30px;
    font-size: 12px;
}

.slicknav_nav .slicknav_row:hover,
.slicknav_nav a:hover {
    background-color: transparent;
    color: #333;
}

/* ==========================================================================
   3.0 Slider Section
   ========================================================================== */
.slider-section {}

.slider-text {
    width: 100%;
}

.slider-text span {
    font-family: "Poppins", sans-serif;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 5px;
    font-weight: 500;
    color: #fff;
    display: block;
}

.slider-text h1 {
    font-size: 100px;
    font-weight: bold;
    color: #fff;
    line-height: 1.2;
    letter-spacing: -2px;
    margin: 0;
}

.nivo-caption a {
    display: inline-block !important;
}

.slider-text p {
    color: #fff;
    font-size: 13px;
    letter-spacing: 0px;
    font-weight: 500;
    padding: 0;
}

.slider-wrapper {
    position: relative;
    background-color: #eceae5;
}

/* Không đặt src tĩnh để tránh "nháy" ảnh cũ; chỉ hiện khi cms.js gán src (ảnh CMS). */
.hero-image {
    display: block;
    width: 100%;
    height: 100vh;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.hero-image[src] {
    opacity: 1;
}

/* Gợi ý kéo xuống: nằm ở đáy phần ảnh đang thấy trên màn hình */
.scroll-cue {
    --cue-vh: 100vh;
    position: absolute;
    left: 50%;
    top: min(100%, var(--cue-vh));
    -webkit-transform: translate(-50%, calc(-100% - 24px));
    transform: translate(-50%, calc(-100% - 24px));
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px 8px 14px;
    border-radius: 999px;
    background-color: rgba(0, 0, 0, 0.35);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    z-index: 2;
}

@supports (height: 100dvh) {
    .scroll-cue {
        --cue-vh: 100dvh;
    }
    .hero-image {
        height: 100dvh;
    }
}

.scroll-cue:hover,
.scroll-cue:focus {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
}

.scroll-cue i {
    font-size: 14px;
    -webkit-animation: scroll-cue-bounce 1.6s ease-in-out infinite;
    animation: scroll-cue-bounce 1.6s ease-in-out infinite;
}

.scroll-cue.is-hidden {
    opacity: 0;
    visibility: hidden;
}

@-webkit-keyframes scroll-cue-bounce {
    0%, 100% { -webkit-transform: translateY(-3px); opacity: 0.6; }
    50% { -webkit-transform: translateY(4px); opacity: 1; }
}

@keyframes scroll-cue-bounce {
    0%, 100% { transform: translateY(-3px); opacity: 0.6; }
    50% { transform: translateY(4px); opacity: 1; }
}

@media (max-width: 767px) {
    .scroll-cue {
        -webkit-transform: translate(-50%, calc(-100% - 12px));
        transform: translate(-50%, calc(-100% - 12px));
        padding: 6px 14px 6px 12px;
        font-size: 10px;
        gap: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-cue i {
        -webkit-animation: none;
        animation: none;
    }
}

.nivo-caption {
    height: 100%;
    opacity: 1;
    background: transparent;
    overflow: visible;
}

/* nivo directionNav css */
.nivo-directionNav a {
    font-size: 25px;
    color: #fff !important;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    top: 50%;
    transform: translateY(-50%);
}

.nivo-directionNav a.nivo-prevNav {}

.nivo-directionNav a.nivo-nextNav {}

.slider-wrapper:hover .nivo-directionNav a.nivo-prevNav {}

.slider-wrapper:hover .nivo-directionNav a.nivo-nextNav {}

.nivo-directionNav a:hover {
    opacity: 1 !important;
}

/* nivo controlNav css */
.nivo-controlNav {
    padding: 0;
    position: absolute;
    z-index: 12;
    bottom: 30px;
    width: 100%;
}

.nivo-controlNav a {
    background-color: transparent;
    display: inline-block;
    font-size: 0;
    cursor: pointer;
    margin: 0 5px;
    transition: all 0.3s linear;
    line-height: 12px;
}

.nivo-controlNav a.active {}

/* ==========================================================================
   About Section
   ========================================================================== */
.about-section {}

.about-content h2 {
    font-size: 32px;
}

.about-content img {
    filter: invert(1);
    mix-blend-mode: screen;
}

/* Nút dưới đoạn giới thiệu */
.about-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
}

/* ==========================================================================
   Portfolio Section
   ========================================================================== */
.portfolio-section {
    padding-top: 0;
}

/* Viền trắng 1px cách ảnh 3px; viền nằm ở khung ngoài để không bị zoom theo ảnh */
.portfolio-item {
    position: relative;
    padding: 3px;
    border: 1px solid #fff;
}

.portfolio-item a {
    display: block;
    overflow: hidden;
}

.portfolio-item img {
    display: block;
    width: 100%;
    height: auto;
}

.portfolio-item:hover img {
    transform: scale(1.05);
}

/*Load More*/
.load-more {}

.load-more a {
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
    color: #000;
    border: 2px solid #000;
    padding: 10px 20px;
    letter-spacing: 2px;
}

.load-more a:hover {
    background-color: #000;
    color: #fff;
}

/* ==========================================================================
   Testimonial Section
   ========================================================================== */
.testimonial-section {
    position: relative;
}

.testimonial-section .bg-shape {
    background-image: url(../img/bg-shape-2.png);
    background-repeat: no-repeat;
    background-position: left top;
    position: absolute;
    width: 500px;
    height: 607px;
    left: 0;
    top: 0;
    z-index: -1;
}

.testimonial-section h2 {
    margin-bottom: 20px;
}

.clients-thumb {
    position: relative;
}

.clients-thumb .ct-thumb {
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    left: 0;
    top: 0;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .20)
}

.clients-thumb .ct-thumb.thumb-1 {
    background-image: url(../img/testi-1.jpg);
    width: 100px;
    height: 100px;
    -webkit-animation: thumb-scale-up-one 7s infinite linear;
    animation: thumb-scale-up-one 7s infinite linear;

}

.clients-thumb .ct-thumb.thumb-2 {
    background-image: url(../img/testi-2.jpg);
    width: 120px;
    height: 120px;
    left: 150px;
    top: -50px;
    -webkit-animation: thumb-scale-up-two 6s infinite linear;
    animation: thumb-scale-up-two 6s infinite linear;
}

.clients-thumb .ct-thumb.thumb-3 {
    background-image: url(../img/testi-3.jpg);
    width: 90px;
    height: 90px;
    top: 170px;
    left: 50px;
    -webkit-animation: thumb-scale-up-three 8s infinite linear;
    animation: thumb-scale-up-three 8s infinite linear;
}

.clients-thumb .ct-thumb.thumb-4 {
    background-image: url(../img/testi-4.jpg);
    width: 110px;
    height: 110px;
    left: 300px;
    top: 100px;
    -webkit-animation: thumb-scale-up-one 4s infinite linear;
    animation: thumb-scale-up-one 4s infinite linear;
}

.clients-thumb .ct-thumb.thumb-5 {
    background-image: url(../img/testi-5.jpg);
    width: 130px;
    height: 130px;
    left: 150px;
    top: 260px;
    -webkit-animation: thumb-scale-up-three 8s infinite linear;
    animation: thumb-scale-up-three 8s infinite linear;

}

.testi-item {}

.testi-item p {
    margin-bottom: 30px;
}

.testi-item .testi-thumb {
    margin-bottom: 30px;
}

.testi-item .testi-thumb {
    display: flex;
    align-items: center;
}

.testi-item .testi-thumb img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 20px;
}

.testi-item .testi-thumb h3 {
    display: inline-block;
    margin-bottom: 0;
    line-height: 1.5;
}

.testi-item .testi-thumb h3 span {
    display: block;
    font-size: 13px;
    letter-spacing: 1px;
}

.owl-nav div {
    display: inline-block;
    margin-right: 20px;
}

@-webkit-keyframes thumb-thumb-scale-up-one {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    40% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes thumb-scale-up-one {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    40% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@-webkit-keyframes thumb-scale-up-two {
    0% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }

    40% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }

    100% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }
}

@keyframes thumb-scale-up-two {
    0% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }

    40% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }

    100% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }
}

@-webkit-keyframes thumb-scale-up-three {
    0% {
        -webkit-transform: scale(0.7);
        transform: scale(0.7);
    }

    40% {
        -webkit-transform: scale(0.4);
        transform: scale(0.5);
    }

    100% {
        -webkit-transform: scale(0.7);
        transform: scale(0.7);
    }
}

@keyframes thumb-scale-up-three {
    0% {
        -webkit-transform: scale(0.7);
        transform: scale(0.7);
    }

    40% {
        -webkit-transform: scale(0.4);
        transform: scale(0.5);
    }

    100% {
        -webkit-transform: scale(0.7);
        transform: scale(0.7);
    }
}

/* ==========================================================================
   Pricing Section
   ========================================================================== */
.pricing-section {
    position: relative;
    z-index: 2;
}

.pricing-section .bg-shape {
    background-image: url(../img/bg-shape-3.png);
    background-repeat: no-repeat;
    background-position: top right;
    position: absolute;
    width: 762px;
    height: 875px;
    right: 0;
    top: 0;
    z-index: -1;
}

.pricing-box {
    background-color: #fff;
    text-align: center;
    -moz-box-shadow: 0 2px 5px rgba(16, 16, 16, .20);
    -webkit-box-shadow: 0 2px 5px rgba(16, 16, 16, .20);
    box-shadow: 0 2px 5px rgba(16, 16, 16, .20);
}

.pricing-box .pricing-head {
    position: relative;
}

.pricing-box .pricing-head img {
    width: 100%;
}

.pricing-box .pricing-head h2 {
    position: absolute;
    width: auto;
    height: auto;
    left: 50%;
    top: 50%;
    font-weight: bold;
    color: #fff;
    transform: translateX(-50%) translateY(-50%);
    margin-bottom: 0;
}

.pricing-list {
    margin: 20px 0;
}

.pricing-list li {
    line-height: 30px;
    font-size: 13px;
    font-weight: 600;
}

.price h2 {
    font-size: 70px;
    line-height: 70px;
    font-weight: bold;
    margin-bottom: 0;
}

.pricing-footer {
    margin-top: 30px;
}

.pricing-footer .default-btn {
    display: block;
}

/* ==========================================================================
   CTA Section
   ========================================================================== */
.cta-section {
    position: relative;
    z-index: 2;
}

.cta-section .row {
    border: 1px solid #eaeaea;
    padding: 50px 30px;
}

/* ==========================================================================
   Instafeed Section
   ========================================================================== */
.instafeed-section {
    position: relative;
    z-index: 1;
}

.instafeed-section .bg-shape {
    background-image: url(../img/bg-shape-3.png);
    background-repeat: no-repeat;
    background-position: top right;
    position: absolute;
    width: 600px;
    height: 637px;
    right: 0;
    top: -200px;
    z-index: -1;
}

/* Social Feed CSS */
.instafeed {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    align-items: center;
    gap: 10px;
}

@media (max-width: 992px) {
    .instafeed {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 767px) {
    .instafeed {
        grid-template-columns: repeat(2, 1fr);
    }
}

.instafeed a {
    overflow: hidden;
    border-radius: 5px;
}

.instafeed a img {
    width: 100%;
    height: 100px;
    max-width: 100%;
    object-fit: cover;
    object-position: center center;
}

.instafeed a:hover img {
    transform: scale(1.05);
    transition: all 0.2s ease-in-out;
}

/* ==========================================================================
   Widget Section
   ========================================================================== */
.widget-section {
    position: relative;
    z-index: 1;
    padding-top: 0;
}

.widget-content {}

.widget-content.mid-content {
    padding-left: 130px;
}

.widget-content img {
    margin-bottom: 30px;
}

.widget-link {}

.widget-link li {
    line-height: 35px;
}

.widget-link li a {
    color: #fff;
}

.widget-link li a:hover {
    color: #fff;
    text-decoration: underline;
}

.widget-link li i {
    margin-right: 10px;
    color: #fff;
}

.widget-social {
    margin-top: 20px;
}

.widget-social li {
    display: inline-block;
}

.widget-social li a {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.1);
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    color: #fff;
    font-size: 18px;
    margin-right: 5px;
}

.widget-social li a:hover {
    background-color: #fff;
    color: #222530;
}

/* ==========================================================================
   Footer Section
   ========================================================================== */
.footer-section {
    background-color: #222530;
    display: block;
    color: #fff;
    text-align: center;
    padding: 30px 0;
}

.footer-section p {
    font-size: 14px;
    color: #fff;
    margin: 0;
}

/* ==========================================================================
   Scroll To Top
   ========================================================================== */
#scroll-to-top {
    background-color: #fff;
    display: none;
    width: 45px;
    height: 45px;
    text-align: center;
    font-size: 14px;
    border-radius: 50%;
    line-height: 45px;
    color: #222530;
    position: fixed;
    bottom: 50px;
    right: 50px;
    z-index: 999;
}

#scroll-to-top:hover {
    background-color: #fff;
    color: #222530;
    opacity: 0.8;
}

/* ==========================================================================
   Popup toàn màn hình (Tôi là ai? / Liên hệ)
   ========================================================================== */
.popup {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10000;
    /* Màu nền web (#222530) nhưng ngả xám hơn */
    background-color: #2b2c30;
    /* Fade-out 0.5s; visibility đổi sau khi mờ hết để popup không chặn click/focus */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}

/* Fade-in 0.5s */
.popup.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease;
}

/* Viền 1px cách mép màn hình 10px, cách nội dung bên trong 10px */
.popup-frame {
    position: absolute;
    top: 10px;
    right: 10px;
    bottom: 10px;
    left: 10px;
    border: 1px solid #fff;
    padding: 10px;
}

.popup-content {
    height: 100%;
    overflow-y: auto;
    /* Thanh cuộn mảnh, hợp nền tối */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}

.popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    font-size: 22px;
    line-height: 44px;
    cursor: pointer;
    /* Không dùng `transition: all` của template: nút sẽ tự chuyển visibility chậm
       hơn popup và không nhận focus ngay khi popup mở */
    transition: opacity 0.5s;
}

.popup-close:hover {
    opacity: 0.7;
}

body.popup-open {
    overflow: hidden;
}

/* Popup "Tôi là ai?": bài viết một cột giữa (theo trang chi tiết của nhau), cuộn trong khung */
.post {
    max-width: 640px;
    margin: 0 auto;
    padding: 60px 20px 40px;
}

.post-title {
    font-size: clamp(28px, 4vw, 38px);
    line-height: 1.25;
    margin: 0;
}

.post-image {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    margin: 28px 0 0;
}

.post-content {
    margin-top: 24px;
    font-size: 15px;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.85);
}

.post-content p {
    margin: 0 0 18px;
}

.post-content h2 {
    font-size: 24px;
    margin: 32px 0 12px;
}

.post-content h3 {
    font-size: 19px;
    margin: 26px 0 10px;
}

.post-content ul,
.post-content ol {
    margin: 0 0 18px;
    padding-left: 22px;
}

/* Template bỏ list-style của mọi ul nên phải bật lại cho bài viết */
.post-content ul {
    list-style: disc;
}

.post-content ol {
    list-style: decimal;
}

.post-content li {
    margin-bottom: 8px;
}

.post-content a {
    color: #fff;
    text-decoration: underline;
}

.post-content blockquote {
    margin: 24px 0;
    padding-left: 18px;
    border-left: 1px solid #fff;
    color: rgba(255, 255, 255, 0.65);
}

.post-content hr {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    margin: 28px 0;
}

.post-figure {
    margin: 24px 0;
}

.post-figure img {
    display: block;
    width: 100%;
    height: auto;
}

/* Popup Liên hệ: form bên trái, ảnh cao hết popup bên phải */
.contact-layout {
    display: flex;
    overflow: hidden;
}

.contact-form-col {
    flex: 0 0 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 30px;
    overflow-y: auto;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 560px;
}

.contact-title {
    font-size: 32px;
    margin-bottom: 18px;
}

/* Ô nhập cùng style với nút (trạng thái hover): viền + chữ trắng trên nền trong suốt */
.form-input {
    display: block;
    width: 100%;
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: 1px;
    color: #fff;
    background-color: transparent;
    border: 1px solid #fff;
    border-radius: 0;
    padding: 12px 30px;
}

.form-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Không có outline nên đánh dấu ô đang nhập bằng nền sáng nhẹ */
.form-input:focus {
    background-color: rgba(255, 255, 255, 0.08);
}

textarea.form-input {
    min-height: 110px;
    resize: vertical;
}

.contact-form.was-validated .form-input:invalid {
    border-color: #e4002b;
}

.contact-form .default-btn {
    align-self: flex-start;
    margin-top: 8px;
}

.contact-form .default-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* Bẫy spam: đẩy ra ngoài màn hình */
.contact-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.contact-status {
    min-height: 26px;
    margin: 0;
    font-size: 13px;
}

.contact-status.is-error {
    color: #ff6b81;
}

.contact-media {
    position: relative;
    flex: 1 1 auto;
}

.contact-media img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Gradient từ màu nền popup sang trong suốt để ảnh nối mượt với cột form.
   Độ đậm giảm theo đường cong (không tuyến tính) để không lộ vệt ở mép ảnh */
.contact-media::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 80%;
    background: linear-gradient(to right,
            rgba(43, 44, 48, 1) 0%,
            rgba(43, 44, 48, 0.97) 12%,
            rgba(43, 44, 48, 0.88) 25%,
            rgba(43, 44, 48, 0.72) 38%,
            rgba(43, 44, 48, 0.5) 52%,
            rgba(43, 44, 48, 0.28) 67%,
            rgba(43, 44, 48, 0.11) 82%,
            rgba(43, 44, 48, 0) 100%);
}

/* Nút X nằm trên ảnh: thêm bóng nhẹ cho dễ thấy */
#popup-contact .popup-close {
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

/* Màn hình hẹp: bỏ ảnh, form chiếm hết popup */
@media (max-width: 767px) {
    .contact-form-col {
        flex-basis: 100%;
        align-items: flex-start;
        padding: 60px 10px 20px;
    }

    .contact-media {
        display: none;
    }
}

/* ==========================================================================
   Gallery Mode
   ========================================================================== */
#swipebox-slider .slide {
    position: relative;
}

/* Tên ảnh đã có trong nhãn tác phẩm nên bỏ thanh tiêu đề */
#swipebox-top-bar {
    display: none !important;
}

/* Mũi tên chuyển ảnh luôn hiện */
#swipebox-bottom-bar {
    -webkit-transform: translate3d(0, -50px, 0) !important;
    transform: translate3d(0, -50px, 0) !important;
}

/* Nút đóng + mũi tên: icon nét mảnh (themify) cùng style nút X của popup,
   thay cho sprite img/icons.png của swipebox */
#swipebox-close,
#swipebox-prev,
#swipebox-next {
    background-image: none;
    color: #fff;
    font-family: themify;
    font-size: 22px;
    line-height: 50px;
    text-align: center;
    -webkit-font-smoothing: antialiased;
}

#swipebox-close:before {
    content: "\e646"; /* ti-close */
}

#swipebox-prev:before {
    content: "\e64a"; /* ti-angle-left */
}

#swipebox-next:before {
    content: "\e649"; /* ti-angle-right */
}

/* Cùng kích thước và vị trí với nút X của popup */
#swipebox-close {
    top: 21px;
    right: 21px;
    width: 44px;
    height: 44px;
    line-height: 44px;
}

#swipebox-close:hover,
#swipebox-prev:not(.disabled):hover,
#swipebox-next:not(.disabled):hover {
    color: #fff;
    opacity: 0.7;
}

.artwork {
    --vw: 100vw;
    --vh: 100vh;
    --pad-x: 40px;
    --pad-y: 70px;
    --gap: 32px;
    --label-w: 260px;
    --label-h: 140px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--pad-y) var(--pad-x);
    white-space: normal;
    line-height: normal;
    text-align: left;
    cursor: default;
}

@supports (height: 100dvh) {
    .artwork {
        --vh: 100dvh;
    }
}

.artwork-inner {
    position: relative;
}

#swipebox-slider .slide .artwork img {
    display: block;
    width: auto;
    height: auto;
    max-height: calc(var(--vh) - 2 * var(--pad-y));
    /* Viền trắng 1px cách ảnh 3px (border-box nên vẫn nằm trong max-width/height).
       !important để thắng `#swipebox-overlay img { border: none !important }` của swipebox */
    padding: 3px;
    border: 1px solid #fff !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

/* Ảnh dọc: ảnh căn giữa, nhãn nằm bên phải */
.artwork.is-portrait .artwork-label {
    position: absolute;
    left: calc(100% + var(--gap));
    bottom: 0;
    width: var(--label-w);
}

#swipebox-slider .slide .artwork.is-portrait img {
    max-width: calc(var(--vw) - 2 * (var(--pad-x) + var(--gap) + var(--label-w)));
}

/* Ảnh ngang: thu nhỏ ảnh, ảnh + nhãn căn giữa theo cụm */
.artwork.is-landscape .artwork-inner {
    display: flex;
    align-items: flex-end;
}

.artwork.is-landscape .artwork-label {
    flex: 0 0 var(--label-w);
    margin-left: var(--gap);
}

#swipebox-slider .slide .artwork.is-landscape img {
    max-width: calc(var(--vw) - 2 * var(--pad-x) - var(--gap) - var(--label-w));
}

/* Nhãn tác phẩm kiểu wall label trong gallery */
.artwork-label {
    background-color: #f4f1ea;
    color: #2a2a2a;
    padding: 18px 20px 16px;
    font-family: 'Poppins', sans-serif;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.3);
}

.artwork-label .artwork-title {
    font-family: 'Unna', serif;
    font-style: italic;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0;
    color: #111;
    margin: 0 0 10px;
}

.artwork-label .artwork-year {
    font-style: normal;
}

.artwork-label .artwork-year:before {
    content: ", ";
}

.artwork-label p {
    font-size: 12px;
    line-height: 1.6;
    color: #4a4a4a;
    margin: 0;
}

.artwork-label .artwork-title + p {
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    padding-top: 10px;
}

@media (max-width: 767px) {
    .artwork {
        --pad-x: 16px;
        --pad-y: 56px;
        --gap: 16px;
        --label-h: 116px;
    }

    .artwork-label {
        padding: 14px 16px 12px;
    }

    .artwork-label .artwork-title {
        font-size: 18px;
        margin-bottom: 8px;
    }

    .artwork-label .artwork-title + p {
        padding-top: 8px;
    }

    /* Ảnh ngang: ảnh căn giữa dọc, nhãn bên dưới */
    .artwork.is-landscape .artwork-inner {
        display: block;
    }

    .artwork.is-landscape .artwork-label {
        position: absolute;
        top: calc(100% + var(--gap));
        left: 0;
        right: 0;
        margin-left: 0;
    }

    #swipebox-slider .slide .artwork.is-landscape img {
        max-width: calc(var(--vw) - 2 * var(--pad-x));
        max-height: calc(var(--vh) - 2 * (var(--pad-y) + var(--gap) + var(--label-h)));
    }

    /* Ảnh dọc: thu nhỏ ảnh, ảnh + nhãn căn giữa theo cụm */
    .artwork.is-portrait .artwork-inner {
        padding-bottom: calc(var(--gap) + var(--label-h));
    }

    .artwork.is-portrait .artwork-label {
        top: calc(100% - var(--label-h));
        bottom: auto;
        left: 0;
        width: 100%;
    }

    #swipebox-slider .slide .artwork.is-portrait img {
        max-width: calc(var(--vw) - 2 * var(--pad-x));
        max-height: calc(var(--vh) - 2 * var(--pad-y) - var(--gap) - var(--label-h));
    }
}