.breadcrumbs-bg {
        height: 250px;
        max-height: -moz-fit-content;
        max-height: fit-content;
        position: relative;
        overflow: hidden
    }

    .logo-list img {
        height: 50px;

    }

    .webhd-shap-bg {
      width: 698px;
    height: 480px;
    position: fixed;
    filter: blur(260px);
    opacity: 0.65;
        background:
            radial-gradient(38% 46% at 34% 34%, #7cc8ff 0%, transparent 70%),
            radial-gradient(42% 50% at 64% 30%, #37b6ff 0%, transparent 72%),
            radial-gradient(46% 52% at 60% 74%, #0d8ae0 0%, transparent 72%),
            radial-gradient(40% 48% at 30% 66%, #66c4ff 0%, transparent 72%);
    }

    .webhd-shap-bg::after {
        /* lỗ giữa -> dạng vòng */
        content: "";
        position: absolute;
        inset: 26% 30%;
        border-radius: 50%;
        background: radial-gradient(closest-side, #fff 0%, transparent 75%);
    }

    .breadcrumbs-bg>img {
        object-fit: cover;
        object-position: center;
        width: 100%;
        height: 100%;
        display: block
    }

    .breadcrumbs {
        font-size: 13px
    }

    .breadcrumbs>li {
        color: var(--text-color);
        position: relative
    }

    .breadcrumbs>li>a:hover {
        color: var(--text-color-1)
    }

    .breadcrumbs>li:not(:last-child):after {
        content: "|";
        color: var(--text-color);
        font-size: 13px;
        position: absolute;
        top: 0;
        right: -10px
    }

    .breadcrumbs>li.current {
        font-weight: 500
    }

    .pagination {
        font-size: 15px
    }

    .pagination>li>:where(a, span:not(.sr-only)) {
        width: 100%;
        height: 100%;
        color: var(--text-color);
        border: 1px solid #0003;
        border-radius: 9999px;
        justify-content: center;
        align-items: center;
        display: flex
    }

    :where(.dark, .dark *) .pagination>li>:where(a, span:not(.sr-only)) {
        border: 1px solid #fff3
    }

    .pagination>li>:where(a, span:not(.sr-only)):hover {
        border-color: var(--text-color-1);
        color: var(--text-color-1)
    }

    .pagination>li>.current {
        background-color: var(--text-color-1);
        border-color: var(--text-color-1);
        color: #fff
    }

    .pagination>li>.dots {
        border-color: #0000 !important
    }

    [id^=gallery-] {
        flex-flow: wrap;
        gap: .75rem;
        margin-top: 24px;
        margin-bottom: 24px;
        display: flex
    }

    @media only screen and (min-width: 48rem) {
        [id^=gallery-] {
            gap: 1.5rem
        }
    }

    [id^=gallery-]>.gallery-item {
        flex: 1 0 auto;
        max-width: 100%;
        margin: 0;
        padding: 0
    }

    [id^=gallery-]>.gallery-item .gallery-icon {
        height: 100%
    }

    @media only screen and (max-width: 47.9988rem) {
        [id^=gallery-]>.gallery-item {
            width: 100% !important
        }
    }

    [id^=gallery-].gallery-columns-1>.gallery-item {
        width: 100%
    }

    [id^=gallery-].gallery-columns-1>.gallery-item a {
        height: 100%;
        display: block
    }

    [id^=gallery-].gallery-columns-1>.gallery-item img {
        object-fit: cover;
        object-position: center;
        width: 100%;
        height: 100%;
        display: block
    }

    [id^=gallery-].gallery-columns-2>.gallery-item {
        width: calc(50% - .75rem)
    }

    [id^=gallery-].gallery-columns-2>.gallery-item a {
        height: 100%;
        display: block
    }

    [id^=gallery-].gallery-columns-2>.gallery-item img {
        object-fit: cover;
        object-position: center;
        width: 100%;
        height: 100%;
        display: block
    }

    [id^=gallery-].gallery-columns-3>.gallery-item {
        width: calc(33.3333% - 1rem)
    }

    [id^=gallery-].gallery-columns-3>.gallery-item a {
        height: 100%;
        display: block
    }

    [id^=gallery-].gallery-columns-3>.gallery-item img {
        object-fit: cover;
        object-position: center;
        width: 100%;
        height: 100%;
        display: block
    }

    [id^=gallery-].gallery-columns-4>.gallery-item {
        width: calc(25% - 1.125rem)
    }

    [id^=gallery-].gallery-columns-4>.gallery-item a {
        height: 100%;
        display: block
    }

    [id^=gallery-].gallery-columns-4>.gallery-item img {
        object-fit: cover;
        object-position: center;
        width: 100%;
        height: 100%;
        display: block
    }

    [id^=gallery-].gallery-columns-5>.gallery-item {
        width: calc(20% - 1.2rem)
    }

    [id^=gallery-].gallery-columns-5>.gallery-item a {
        height: 100%;
        display: block
    }

    [id^=gallery-].gallery-columns-5>.gallery-item img {
        object-fit: cover;
        object-position: center;
        width: 100%;
        height: 100%;
        display: block
    }

    [id^=gallery-].gallery-columns-6>.gallery-item {
        width: calc(16.6667% - 1.25rem)
    }

    [id^=gallery-].gallery-columns-6>.gallery-item a {
        height: 100%;
        display: block
    }

    [id^=gallery-].gallery-columns-6>.gallery-item img {
        object-fit: cover;
        object-position: center;
        width: 100%;
        height: 100%;
        display: block
    }

    [id^=gallery-].gallery-columns-7>.gallery-item {
        width: calc(14.2857% - 1.28571rem)
    }

    [id^=gallery-].gallery-columns-7>.gallery-item a {
        height: 100%;
        display: block
    }

    [id^=gallery-].gallery-columns-7>.gallery-item img {
        object-fit: cover;
        object-position: center;
        width: 100%;
        height: 100%;
        display: block
    }

    [id^=gallery-].gallery-columns-8>.gallery-item {
        width: calc(12.5% - 1.3125rem)
    }

    [id^=gallery-].gallery-columns-8>.gallery-item a {
        height: 100%;
        display: block
    }

    [id^=gallery-].gallery-columns-8>.gallery-item img {
        object-fit: cover;
        object-position: center;
        width: 100%;
        height: 100%;
        display: block
    }

    [id^=gallery-].gallery-columns-9>.gallery-item {
        width: calc(11.1111% - 1.33333rem)
    }

    [id^=gallery-].gallery-columns-9>.gallery-item a {
        height: 100%;
        display: block
    }

    [id^=gallery-].gallery-columns-9>.gallery-item img {
        object-fit: cover;
        object-position: center;
        width: 100%;
        height: 100%;
        display: block
    }

    .section.singular .all_category_time_post .terms-links {
        text-transform: uppercase;
        gap: 12px;
        font-size: 11px;
        display: flex
    }

    .section.singular .all_category_time_post .terms-links svg {
        display: none
    }

    .section.singular .all_category_time_post .terms-links a {
        color: #fff;
        background-color: var(--color-primary);
        white-space: nowrap;
        text-overflow: ellipsis;
        border: 1px solid #0000;
        border-radius: 9999px;
        flex: auto;
        justify-content: center;
        align-items: center;
        gap: 8px;
        max-width: 280px;
        padding: 4px 12px 3px;
        font-size: 11px;
        font-weight: 500;
        transition: box-shadow .3s;
        display: flex;
        position: relative;
        overflow: hidden;
        box-shadow: 0 20px 25px -5px #fe52424d, 0 10px 10px -5px #fe52424d
    }

    .section.singular .all_category_time_post .terms-links a:hover {
        box-shadow: 0 10px 15px -3px #fe5242cc, 0 4px 6px -2px #fe5242cc
    }

    .section.singular .meta .views-svg {
        cursor: pointer;
        background: #f2ecfc;
        border-radius: 6px;
        align-items: center;
        gap: 6px;
        padding: 5px 8px;
        display: flex
    }

    .section.singular .sidebar .sidebar-inner {
        position: sticky;
        top: 145px
    }

    .section.singular .content {
        flex: 1 1 0%;
        min-width: 0
    }

    .section.singular .content article #toc_container {
        display: none
    }

    .section.singular .sidebar-toc .sidebar-inner {
        position: sticky;
        top: 145px
    }

    .section.singular .sidebar-toc #toc_container {
        box-shadow: none;
        background: 0 0;
        border: none;
        padding: 0
    }

    .section.singular .sidebar-toc #toc_container .toc_title {
        padding: 0;
        font-size: 17px;
        font-weight: 700
    }

    .section.singular .sidebar-toc #toc_container .toc_title:before,
    .section.singular .sidebar-toc #toc_container .toc_title:after {
        content: none
    }

    .section.singular .sidebar-toc #toc_container .toc_title .toc_toggle {
        background: var(--color-primary);
        border-radius: 50%;
        width: 24px;
        height: 24px
    }

    .section.singular .sidebar-toc #toc_container .toc_title .toc_toggle a:after {
        background-color: #fff
    }

    .section.singular .sidebar-toc #toc_container .toc_list {
        scrollbar-width: none;
        -ms-overflow-style: none;
        max-height: calc(100vh - 200px);
        margin-left: 0;
        padding-left: 24px;
        position: relative;
        overflow-y: auto
    }

    .section.singular .sidebar-toc #toc_container .toc_list::-webkit-scrollbar {
        display: none
    }

    .section.singular .sidebar-toc #toc_container .toc_list:before {
        content: "";
        background-color: #0000001a;
        width: 1px;
        height: 100%;
        position: absolute;
        top: 0;
        left: 3px
    }

    .section.singular .sidebar-toc #toc_container .toc_list li {
        position: relative
    }

    .section.singular .sidebar-toc #toc_container .toc_list li a {
        font-size: 14px;
        font-weight: 400;
        transition: color .3s
    }

    .section.singular .sidebar-toc #toc_container .toc_list li a.active,
    .section.singular .sidebar-toc #toc_container .toc_list li.active>a {
        color: var(--text-color-1)
    }

    .section.singular .sidebar-toc #toc_container .toc_list>li:before {
        content: "";
        background-color: #000;
        border-radius: 50%;
        width: 6px;
        height: 6px;
        position: absolute;
        top: 15px;
        left: -23px
    }

    .section.singular .sidebar-toc #toc_container .toc_list>li>a {
        font-size: 16px;
        font-weight: 500
    }

    .section.singular .sidebar-toc #toc_container .toc_list>li.active:before {
        background-color: var(--color-primary)
    }

    .section.singular .entry-content .excerpt {
        margin-bottom: 24px;
        font-weight: 500
    }

    @media only screen and (min-width: 64rem) {
        .section.singular .entry-content .excerpt {
            margin-bottom: 32px
        }
    }

    .section.singular .entry-content :where(h1, h2, h3, h4, h5, h6) {
        margin-bottom: 16px;
        font-weight: 600
    }

    .section.singular .entry-content h6 {
        font-size: 16px
    }

    .section.singular .entry-content h5,
    .section.singular .entry-content h4 {
        font-size: max(1rem, min(.866071rem + .334821vw, 1.1875rem))
    }

    .section.singular .entry-content h3 {
        font-size: max(1.0625rem, min(.794643rem + .669643vw, 1.4375rem))
    }

    .section.singular .entry-content h2 {
        font-size: max(1.1875rem, min(.785714rem + 1.00446vw, 1.75rem))
    }

    .section.singular .entry-content h1 {
        font-size: max(1.625rem, min(.955357rem + 1.67411vw, 2.5625rem))
    }

    .section.singular .entry-content .h6 {
        font-size: 16px
    }

    .section.singular .entry-content .h5,
    .section.singular .entry-content .h4 {
        font-size: max(1rem, min(.866071rem + .334821vw, 1.1875rem))
    }

    .section.singular .entry-content .h3 {
        font-size: max(1.0625rem, min(.794643rem + .669643vw, 1.4375rem))
    }

    .section.singular .entry-content .h2 {
        font-size: max(1.1875rem, min(.785714rem + 1.00446vw, 1.75rem))
    }

    .section.singular .entry-content .h1 {
        font-size: max(1.625rem, min(.955357rem + 1.67411vw, 2.5625rem))
    }

    .section.singular .entry-content :where(ul, ol) {
        margin-bottom: 16px;
        margin-left: 24px
    }

    .section.singular .entry-content :where(ul, ol) li {
        padding-block-start: 4px;
        padding-block-end: 4px
    }

    .section.singular .entry-content ul {
        list-style: outside
    }

    .section.singular .entry-content ol {
        list-style: decimal
    }

    .section.singular .entry-content img {
        border-radius: var(--radius-md, 6px);
        height: auto
    }

    .section.singular .entry-content figure figcaption {
        padding-top: 12px;
        font-size: 14px;
        font-weight: 500
    }

    .section.singular .entry-content blockquote {
        margin-bottom: 32px;
        padding: 24px 12px 24px 40px;
        font-style: italic;
        font-weight: 500;
        position: relative
    }

    .section.singular .entry-content blockquote:before {
        content: "";
        background-color: var(--text-color-1);
        width: 2rem;
        height: 2rem;
        position: absolute;
        top: 4px;
        left: 0;
        transform: scaleX(-1)scaleY(-1);
        -webkit-mask-image: url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20d%3D%22M6%206a2%202%200%200%200-2%202v3a2%202%200%200%200%202%202h3a3%203%200%200%201-3%203H5a1%201%200%201%200%200%202h1a5%205%200%200%200%205-5V8a2%202%200%200%200-2-2zm9%200a2%202%200%200%200-2%202v3a2%202%200%200%200%202%202h3a3%203%200%200%201-3%203h-1a1%201%200%201%200%200%202h1a5%205%200%200%200%205-5V8a2%202%200%200%200-2-2z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
        mask-image: url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20d%3D%22M6%206a2%202%200%200%200-2%202v3a2%202%200%200%200%202%202h3a3%203%200%200%201-3%203H5a1%201%200%201%200%200%202h1a5%205%200%200%200%205-5V8a2%202%200%200%200-2-2zm9%200a2%202%200%200%200-2%202v3a2%202%200%200%200%202%202h3a3%203%200%200%201-3%203h-1a1%201%200%201%200%200%202h1a5%205%200%200%200%205-5V8a2%202%200%200%200-2-2z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat
    }

    .section.singular .nocomments {
        border-left: 4px solid var(--text-color-1);
        padding-left: 16px;
        border-radius: var(--radius-sm, 4px);
        background-color: #0000000d;
        margin-top: 32px;
        padding-block-start: 12px;
        padding-block-end: 12px;
        font-size: 15px
    }

    :where(.dark, .dark *) .section.singular .nocomments {
        background-color: #ffffff0d
    }

    #toc_container {
        border-radius: var(--radius-md, var(--radius-md, 6px));
        background-color: #f4f4f4;
        border: 1px solid #0000001f;
        max-width: 600px;
        margin: 0 auto 24px;
        padding: 24px;
        box-shadow: inset 0 0 12px #0000000f;
        width: 100% !important
    }

    :where(.dark, .dark *) #toc_container {
        background-color: #1d1d1d;
        border: 1px solid #ffffff1f;
        box-shadow: inset 0 0 12px #ffffff0f
    }

    #toc_container .toc_title {
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0;
        padding-left: 52px;
        font-size: max(1rem, min(.866071rem + .334821vw, 1.1875rem));
        font-weight: 500;
        display: flex;
        position: relative
    }

    #toc_container .toc_title:before {
        content: "";
        z-index: 1;
        background-color: #fff;
        border-radius: 50%;
        width: 1.75rem;
        height: 1.75rem;
        padding: 12px;
        position: absolute;
        top: 50%;
        left: 6px;
        transform: translateY(-50%);
        -webkit-mask-image: url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M10.779%2017.779L4.36%2019.918L6.5%2013.5m4.279%204.279l8.364-8.643a3.027%203.027%200%200%200-2.14-5.165a3.03%203.03%200%200%200-2.14.886L6.5%2013.5m4.279%204.279L6.499%2013.5m2.14%202.14l6.213-6.504M12.75%207.04L17%2011.28%22%2F%3E%3C%2Fsvg%3E);
        mask-image: url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M10.779%2017.779L4.36%2019.918L6.5%2013.5m4.279%204.279l8.364-8.643a3.027%203.027%200%200%200-2.14-5.165a3.03%203.03%200%200%200-2.14.886L6.5%2013.5m4.279%204.279L6.499%2013.5m2.14%202.14l6.213-6.504M12.75%207.04L17%2011.28%22%2F%3E%3C%2Fsvg%3E);
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat
    }

    #toc_container .toc_title:after {
        content: "";
        background-color: var(--text-color-1);
        border-radius: 50%;
        width: 2.5rem;
        height: 2.5rem;
        position: absolute;
        left: 0;
        box-shadow: 3px 1px 12px #fe524233
    }

    #toc_container .toc_toggle {
        width: 2rem;
        height: 2rem;
        position: relative
    }

    #toc_container .toc_toggle .toc_brackets {
        display: none
    }

    #toc_container .toc_toggle>a {
        font-size: 0
    }

    #toc_container .toc_toggle>a:after {
        content: "";
        background-color: var(--text-color);
        width: 100%;
        height: 100%;
        transition: rotate .15s ease-in-out;
        position: absolute;
        top: 50%;
        left: 50%;
        translate: -50% -50%;
        -webkit-mask-image: url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22m16%2014l-4-4l-4%204%22%2F%3E%3C%2Fsvg%3E);
        mask-image: url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22m16%2014l-4-4l-4%204%22%2F%3E%3C%2Fsvg%3E);
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat
    }

    #toc_container .toc_list {
        scrollbar-width: thin;
        max-height: 400px;
        margin-top: 20px;
        margin-bottom: 0;
        margin-left: 12px;
        list-style: none;
        overflow: auto
    }

    #toc_container .toc_list li {
        padding-block-start: 0 !important;
        padding-block-end: 0 !important
    }

    #toc_container .toc_list li a {
        align-items: baseline;
        gap: 8px;
        padding-block-start: 5px;
        padding-block-end: 5px;
        font-size: 15px;
        display: flex
    }

    #toc_container .toc_list li a .toc_number {
        font-size: 13px;
        font-weight: 500;
        text-decoration: underline
    }

    #toc_container .toc_list li a:hover {
        color: var(--text-color-1)
    }

    #toc_container .toc_list li>ul {
        margin-bottom: 0;
        margin-left: 12px;
        list-style: none
    }

    #toc_container.contracted .toc_toggle>a:after {
        transform-origin: 50%;
        rotate: 180deg
    }

    .suggestion-list ul {
        margin-left: 0 !important;
        list-style: none !important
    }

    .suggestion-list ul li {
        padding-left: 36px;
        font-size: 15px;
        position: relative
    }

    .suggestion-list ul li:before {
        content: "";
        background-color: var(--text-color-1);
        width: 2.25rem;
        height: 2.25rem;
        transition: opacity .15s ease-in-out;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        -webkit-mask-image: url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212.1%22%20cy%3D%2212.1%22%20r%3D%221%22%2F%3E%3C%2Fsvg%3E);
        mask-image: url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212.1%22%20cy%3D%2212.1%22%20r%3D%221%22%2F%3E%3C%2Fsvg%3E);
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat
    }

    .suggestion-list ul li .title {
        font-weight: 500
    }

    .suggestion-list ul li .title:hover {
        color: var(--text-color-1)
    }

    :where(.terms-links, .hashtag-links) {
        margin-top: 16px
    }

    :where(.terms-links, .hashtag-links) svg {
        color: var(--text-color-1)
    }

    :where(.terms-links, .hashtag-links) a {
        border-radius: var(--radius-sm, 4px);
        border: 1px solid #0003;
        padding: 1px 12px;
        font-size: 14px;
        font-weight: 500
    }

    :where(.dark, .dark *) :where(.terms-links, .hashtag-links) a {
        border: 1px solid #fff3
    }

    :where(.terms-links, .hashtag-links) a:hover {
        color: var(--text-color-1)
    }

    .section.section-author {
        border-top: 1px solid #0000001a
    }

    :where(.dark, .dark *) .section.section-author {
        border-top: 1px solid #ffffff1a
    }

    .section.section-author .author-desc {
        font-weight: 300 !important
    }

    .section.section-author .author-desc :where(h2, h3, h4, h5, h6, b, strong) {
        font-weight: 600 !important
    }

    .section.section-related .swiper .swiper-slide {
        width: calc(83.3333% - .125rem);
        height: auto
    }

    @media only screen and (min-width: 40rem) {
        .section.section-related .swiper .swiper-slide {
            width: calc(50% - .75rem)
        }
    }

    @media only screen and (min-width: 64rem) {
        .section.section-related .swiper .swiper-slide {
            width: calc(33.3333% - 1rem)
        }
    }

    .section.section-du-an .tp-portfolio-heading .tp-section-subtitle {
        text-transform: uppercase;
        align-items: center;
        gap: 12px;
        margin-top: 10px;
        font-size: 18px;
        font-weight: 400;
        line-height: 1;
        display: flex;
        position: relative
    }

    @media only screen and (max-width: 47.9988rem) {
        .section.section-du-an .tp-portfolio-heading .tp-section-subtitle {
            font-size: 16px
        }
    }

    .section.section-du-an .tp-portfolio-heading .tp-section-subtitle:before {
        content: "";
        background-color: #fe5242;
        border-radius: 4px;
        width: 8px;
        height: 8px;
        display: inline-block;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%)
    }

    @media only screen and (max-width: 63.9988rem) {
        .section-du-an.archive .filter-menu {
            text-align: center
        }

        .section-du-an.archive .filter-menu>div {
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 100%;
            display: flex
        }

        .section-du-an.archive .filter-menu .tp-portfolio-inner {
            height: 0;
            overflow: hidden
        }
    }

    .section-du-an.archive .filter-title {
        position: relative
    }

    @media only screen and (max-width: 63.9988rem) {
        .section-du-an.archive .tp-portfolio-inner {
            flex-flow: wrap;
            justify-content: center;
            align-items: center;
            width: 100%;
            margin-bottom: 20px;
            display: flex
        }
    }

    .section-du-an.archive .tp-portfolio-inner .tp-portfolio-item {
        padding-left: 32px;
        font-size: 15px;
        transition: all .3s ease-out;
        display: block;
        position: relative
    }

    .section-du-an.archive .tp-portfolio-inner .tp-portfolio-item:after {
        content: "";
        opacity: .25;
        border: 1px solid #000;
        border-radius: 100px;
        width: 18px;
        height: 18px;
        transition: opacity .3s;
        display: block;
        position: absolute;
        top: 5px;
        left: 0;
        transform: none;
        background: 0 0 !important
    }

    .section-du-an.archive .tp-portfolio-inner .tp-portfolio-item:before {
        content: "";
        background-color: #000;
        border-radius: 100px;
        width: 10px;
        height: 10px;
        transition: transform .3s;
        display: block;
        position: absolute;
        top: 9px;
        left: 4px;
        transform: scale(0)
    }

    .section-du-an.archive .tp-portfolio-inner .tp-portfolio-item.active:before {
        transform: scale(1)
    }

    .section.section-feedback .swiper .swiper-slide {
        width: calc(83.3333% - .125rem);
        height: auto
    }

    @media only screen and (min-width: 40rem) {
        .section.section-feedback .swiper .swiper-slide {
            width: calc(45.4545% - .818182rem)
        }
    }

    @media only screen and (min-width: 64rem) {
        .section.section-feedback .swiper .swiper-slide {
            width: calc(33.3333% - 1rem)
        }
    }

    .section.section-feedback .swiper-controls .swiper-pagination {
        margin-top: 0 !important
    }

    .section.section-steps .swiper .swiper-slide {
        width: 100%;
        height: auto
    }

    @media only screen and (min-width: 40rem) {
        .section.section-steps .swiper .swiper-slide {
            width: calc(45.4545% - 1.09091rem)
        }
    }

    @media only screen and (min-width: 64rem) {
        .section.section-steps .swiper .swiper-slide {
            width: calc(33.3333% - 1.33333rem)
        }
    }

    @media only screen and (min-width: 80rem) {
        .section.section-steps .swiper .swiper-slide {
            width: calc(25% - 1.5rem)
        }
    }

    .section.section-steps .swiper .swiper-slide .item {
        position: relative
    }

    .section.section-steps .swiper-controls .swiper-pagination {
        margin-top: 0 !important
    }

    @media only screen and (min-width: 40rem) {
        .section.section-steps .swiper-container .swiper:before {
            content: "";
            background-color: color-mix(in oklab, var(--color-primary) 80%, transparent);
            pointer-events: none;
            z-index: 0;
            width: calc(100% - 24px);
            height: 1px;
            position: absolute;
            top: 90px;
            left: 12px
        }
    }

    .section.section-form .items-start .quote_images {
        align-items: flex-end;
        margin-bottom: 15px;
        display: flex
    }

    @media only screen and (max-width: 47.9988rem) {
        .section.section-form .items-start .quote_images {
            justify-content: center
        }
    }

    .section.section-form .items-start .quote_images .default-logo {
        filter: brightness(0)invert();
        width: 400px;
        height: auto;
        display: block
    }

    @media only screen and (max-width: 47.9988rem) {
        .section.section-form .items-start .quote_images .default-logo {
            max-width: 60%
        }
    }

    .section.section-form .items-start .quote_images .logo-title {
        pointer-events: none;
        clip: rect(0, 0, 0, 0);
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        display: inline;
        overflow: hidden;
        overflow-wrap: normal !important;
        position: absolute !important
    }

    .section.section-form .items-start .quote_images figure:first-child {
        width: 445px;
        height: 140px
    }

    @media only screen and (max-width: 47.9988rem) {
        .section.section-form .items-start .quote_images figure:first-child {
            width: 60%;
            height: auto
        }
    }

    .section.section-form .items-start .quote_images figure:first-child img {
        object-fit: contain;
        width: 100%;
        height: 100%
    }

    .section.section-form .items-start .quote_images figure:last-child {
        width: 157px;
        height: 165px;
        margin-left: -25px
    }

    @media only screen and (max-width: 47.9988rem) {
        .section.section-form .items-start .quote_images figure:last-child {
            width: 30%;
            height: auto;
            margin-left: 0
        }
    }

    .section.section-form .items-start .quote_images figure:last-child img {
        object-fit: contain;
        width: 100%;
        height: 100%
    }

    .section.section-thank-you .content {
        border: 1px solid color-mix(in oklab, var(--color-primary) 80%, transparent);
        background-color: var(--color-white);
        box-shadow: 0 0 6px color-mix(in oklab, var(--color-primary) 24%, transparent);
        transition: all .3s ease-in-out
    }

    .section.section-thank-you .content:hover {
        border-color: var(--color-primary);
        box-shadow: 0 0 12px color-mix(in oklab, var(--color-primary) 48%, transparent)
    }

    .section.section-project .swiper .swiper-slide {
        width: 100%;
        height: auto
    }

    @media only screen and (min-width: 40rem) {
        .section.section-project .swiper .swiper-slide {
            width: 100%
        }
    }

    @media only screen and (min-width: 64rem) {
        .section.section-project .swiper .swiper-slide {
            width: calc(50% - .75rem)
        }
    }