/*
Theme: Ha Gia Minh - Home UI
File: home.css
Version: 1.4 Final
Tone: #1f4b78 / #ee8022
Flatsome + Flickity
*/


/* =========================================================
   HGM BLOG / SERVICE SLIDER - EQUAL CARD FINAL
   Chỉ áp dụng box-blog-post, không ảnh hưởng sản phẩm
   ========================================================= */

/* Cell Flickity */
.row-slider.flickity-enabled
.flickity-slider > .col:has(.box-blog-post) {
    display: flex !important;
    align-items: stretch !important;
    height: auto !important;
}

/* col-inner của bài viết */
.row-slider
.col-inner:has(.box-blog-post) {
    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    height: 100% !important;

    overflow: hidden;

    border: 1px solid #e1eaf2 !important;
    border-radius: 8px !important;

    background: #fff;

    box-shadow:
        0 2px 7px rgba(31,75,120,.07) !important;
}


/* =========================================================
   CARD
   ========================================================= */

.row-slider .box-blog-post {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;

    overflow: hidden;

    border: 0 !important;
    border-radius: 0 !important;

    background: #fff;

    box-shadow: none !important;
}


/* =========================================================
   IMAGE
   Tất cả ảnh cùng chiều cao
   ========================================================= */

.row-slider .box-blog-post .box-image {
    position: relative !important;

    flex: 0 0 145px !important;

    width: 100% !important;
    height: 145px !important;
    min-height: 145px !important;

    margin: 0 !important;

    overflow: hidden;

    background: #f5f8fa;
}


.row-slider .box-blog-post .box-image > div,
.row-slider .box-blog-post .box-image .image-cover {

    position: relative !important;

    width: 100% !important;
    height: 145px !important;
    min-height: 145px !important;

    padding-top: 0 !important;

    overflow: hidden;
}


.row-slider .box-blog-post .box-image img {

    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover !important;
    object-position: center !important;

    transform: none !important;

    transition:
        transform .3s ease !important;
}


/* Hover ảnh */

.row-slider
.box-blog-post:hover
.box-image img {

    transform: scale(1.035) !important;
}


/* =========================================================
   TEXT AREA
   ========================================================= */

.row-slider .box-blog-post .box-text {

    position: relative !important;

    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;

    width: 100% !important;

    height: 158px !important;
    min-height: 158px !important;
    max-height: 158px !important;

    margin: 0 !important;

    padding: 10px 10px 12px !important;

    border-top: 1px solid #edf2f6;

    background: #fff;

    text-align: left !important;
}


.row-slider .box-blog-post .box-text-inner {

    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;

    width: 100% !important;
    height: 100% !important;
}


/* =========================================================
   TITLE
   Luôn dành đúng diện tích cho 2 dòng
   ========================================================= */

.row-slider .box-blog-post .post-title {

    display: -webkit-box !important;

    flex: 0 0 42px !important;

    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;

    margin: 0 0 7px !important;

    overflow: hidden !important;

    color: #1f4b78 !important;

    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;

    text-align: left !important;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}


/* Link title */

.row-slider .box-blog-post .post-title a {

    color: #1f4b78 !important;
    text-decoration: none !important;
}


.row-slider .box-blog-post .post-title a:hover {

    color: #ee8022 !important;
}


/* =========================================================
   ĐƯỜNG PHÂN CÁCH
   ========================================================= */

.row-slider .box-blog-post .is-divider {

    flex: 0 0 auto;

    width: 28px !important;
    height: 2px !important;

    margin: 0 0 8px !important;

    background: #ee8022 !important;

    opacity: .8;
}


/* =========================================================
   EXCERPT
   Luôn dành đúng diện tích 3 dòng
   ========================================================= */

.row-slider .box-blog-post .from_the_blog_excerpt {

    display: -webkit-box !important;

    flex: 0 0 62px !important;

    height: 62px !important;
    min-height: 62px !important;
    max-height: 62px !important;

    margin: 0 !important;

    overflow: hidden !important;

    color: #727d87 !important;

    font-size: 12.5px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;

    text-align: left !important;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}


/* =========================================================
   DATE BADGE
   ========================================================= */

.row-slider .box-blog-post .badge {

    z-index: 5;
}


/* =========================================================
   HOVER CARD
   ========================================================= */

.row-slider
.col-inner:has(.box-blog-post) {

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}


.row-slider
.col-inner:has(.box-blog-post):hover {

    transform: translateY(-2px);

    border-color: #c8dbe9 !important;

    box-shadow:
        0 7px 17px rgba(31,75,120,.12) !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 849px) {

    .row-slider .box-blog-post .box-image,
    .row-slider .box-blog-post .box-image > div,
    .row-slider .box-blog-post .box-image .image-cover {

        height: 135px !important;
        min-height: 135px !important;
    }


    .row-slider .box-blog-post .box-image {

        flex-basis: 135px !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 549px) {

    .row-slider .box-blog-post .box-image,
    .row-slider .box-blog-post .box-image > div,
    .row-slider .box-blog-post .box-image .image-cover {

        height: 120px !important;
        min-height: 120px !important;
    }


    .row-slider .box-blog-post .box-image {

        flex-basis: 120px !important;
    }


    .row-slider .box-blog-post .box-text {

        height: 142px !important;
        min-height: 142px !important;
        max-height: 142px !important;

        padding: 8px !important;
    }


    .row-slider .box-blog-post .post-title {

        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;

        flex-basis: 38px !important;

        font-size: 13px !important;
        line-height: 1.4 !important;
    }


    .row-slider .box-blog-post .from_the_blog_excerpt {

        height: 54px !important;
        min-height: 54px !important;
        max-height: 54px !important;

        flex-basis: 54px !important;

        font-size: 12px !important;
        line-height: 1.5 !important;
    }
}

/* =========================================================
   1. SECTION TITLE - CĂN TRÁI, NỐI VỚI KHUNG SẢN PHẨM
   ========================================================= */
.section-title-container {
    display: block !important;
    width: 100% !important;
    margin: 18px 0 0 !important;
    padding: 0 !important;
    border: 1px solid #dfe8f0;
    border-bottom: 0;
    border-radius: 9px 9px 0 0;
    background: #f7fafc;
    overflow: hidden;
}

.section-title.section-title-normal {
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    width: 100%;
    min-height: 42px;
    margin: 0 !important;
    padding: 8px 12px !important;
    border: 0 !important;
    background: #f7fafc;
}

.section-title.section-title-normal > b {
    display: none !important;
}

.section-title.section-title-normal > span {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-start;
    margin: 0 !important;
    padding: 0 0 0 11px !important;
    border: 0 !important;
    background: transparent !important;
    color: #1f4b78 !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: .1px;
    text-transform: uppercase;
}

.section-title.section-title-normal > span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 18px;
    border-radius: 4px;
    background: #ee8022;
    transform: translateY(-50%);
}

.section-title.section-title-normal > span::after {
    display: none !important;
}

.section-title.section-title-normal i,
.section-title.section-title-normal .icon {
    margin-right: 6px;
    color: #1f4b78;
    font-size: 15px;
}

.section-title.section-title-normal > span a {
    color: inherit !important;
    text-decoration: none !important;
}

.section-title.section-title-normal > span a:hover {
    color: #ee8022 !important;
}

/* =========================================================
   2. PRODUCT GRID - EQUALIZE BOX
   ========================================================= */
.row.equalize-box.large-columns-5.medium-columns-3.small-columns-2 {
    display: flex;
    flex-wrap: wrap;
    width: 100% !important;
    margin: 0 0 16px !important;
    padding: 10px !important;
    border: 1px solid #dfe8f0;
    border-top: 1px solid #edf2f6;
    border-radius: 0 0 10px 10px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(31,75,120,.05);
}

.row.equalize-box.large-columns-5.medium-columns-3.small-columns-2 > .col {
    display: flex;
    margin: 0 !important;
    padding: 4px !important;
}

.row.equalize-box.large-columns-5 > .col > .col-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 1px solid #e3ebf2 !important;
    border-radius: 8px !important;
    background: #fff;
    box-shadow: 0 2px 6px rgba(31,75,120,.06) !important;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.row.equalize-box.large-columns-5 > .col:hover > .col-inner {
    transform: translateY(-2px);
    border-color: #c5d9e8 !important;
    box-shadow: 0 6px 15px rgba(31,75,120,.11) !important;
}

.row.equalize-box.has-shadow .box:not(.box-overlay):not(.box-shade) {
    box-shadow: none !important;
}

.row.equalize-box.large-columns-5 .box {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    margin: 0;
    background: #fff;
}

/* Grid image */
.row.equalize-box.large-columns-5 .box-image {
    position: relative;
    width: 100% !important;
    height: 180px !important;
    margin: 0 !important;
    overflow: hidden;
    background: #fff;
}

.row.equalize-box.large-columns-5 .box-image > div {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 180px !important;
    padding-top: 0 !important;
    overflow: hidden;
}

.row.equalize-box.large-columns-5 .box-image img {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 100% !important;
    height: 100% !important;
    padding: 7px;
    object-fit: contain !important;
    object-position: center;
    transform: translate(-50%,-50%) !important;
    transition: transform .28s ease;
}

.row.equalize-box.large-columns-5 .col:hover .box-image img {
    transform: translate(-50%,-50%) scale(1.03) !important;
}

/* Grid text - cùng chiều cao dù 1/2/3 dòng */
.row.equalize-box.large-columns-5 .box-text {
    display: flex !important;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 62px !important;
    padding: 7px 8px !important;
    border-top: 1px solid #f0f3f6;
    background: #fff;
    text-align: center;
}

.row.equalize-box.large-columns-5 .box-text-inner {
    width: 100%;
}

.row.equalize-box.large-columns-5 .box-text p,
.row.equalize-box.large-columns-5 .box-text .name,
.row.equalize-box.large-columns-5 .box-text .product-title,
.row.equalize-box.large-columns-5 .box-text a {
    margin: 0 !important;
    color: #3d4349;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
}

.row.equalize-box.large-columns-5 .box-text .name,
.row.equalize-box.large-columns-5 .box-text .product-title,
.row.equalize-box.large-columns-5 .box-text .product-title a {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.row.equalize-box.large-columns-5 .col:hover .box-text a {
    color: #1f4b78;
}

/* =========================================================
   3. FLICKITY PRODUCT SLIDER
   ========================================================= */
.row-slider.flickity-enabled {
    position: relative;
    display: block;
    width: 100% !important;
    margin: 0 0 16px !important;
    padding: 10px !important;
    border: 1px solid #dfe8f0;
    border-top: 1px solid #edf2f6;
    border-radius: 0 0 10px 10px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(31,75,120,.05);
}

.row-slider.flickity-enabled .flickity-viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: transparent;
}

.row-slider.flickity-enabled .flickity-slider {
    width: 100%;
}

.row-slider.flickity-enabled .flickity-slider > .col {
    display: flex;
    align-items: stretch;
    padding: 4px !important;
}

/* Slider card */
.row-slider .col-inner {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    height: 100% !important;
    overflow: hidden;
    border: 1px solid #e3ebf2 !important;
    border-radius: 8px !important;
    background: #fff;
    box-shadow: 0 2px 6px rgba(31,75,120,.06) !important;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.row-slider .col-inner:hover {
    transform: translateY(-2px);
    border-color: #c5d9e8 !important;
    box-shadow: 0 6px 15px rgba(31,75,120,.11) !important;
}

.row-slider .col-inner > .box,
.row-slider .box {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
    height: 100% !important;
    margin: 0;
    background: #fff;
}

/* Slider image đồng đều */
.row-slider .box-image {
    position: relative;
    flex: 0 0 auto;
    width: 100% !important;
    height: 180px !important;
    margin: 0 !important;
    overflow: hidden;
    background: #fff;
}

.row-slider .box-image > div,
.row-slider .box-image .image-cover,
.row-slider .box-image .image-fade_in_back {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 180px !important;
    padding-top: 0 !important;
    overflow: hidden;
    background: #fff;
}

.row-slider .box-image img {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    display: block;
    width: 100% !important;
    height: 100% !important;
    padding: 7px;
    object-fit: contain !important;
    object-position: center !important;
    transform: translate(-50%,-50%) !important;
    transition: transform .28s ease;
}

.row-slider .col-inner:hover .box-image img {
    transform: translate(-50%,-50%) scale(1.03) !important;
}

/* Slider text 3 dòng cố định */
.row-slider .box-text {
    display: flex !important;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 62px !important;
    min-height: 62px !important;
    max-height: 62px !important;
    margin-top: auto;
    padding: 7px 8px !important;
    border-top: 1px solid #f0f3f6;
    background: #fff;
    text-align: center;
}

.row-slider .box-text-inner {
    width: 100%;
}

.row-slider .box-text p,
.row-slider .box-text .name,
.row-slider .box-text .product-title,
.row-slider .box-text .product-title a {
    margin: 0 !important;
    color: #3d4349;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
}

.row-slider .box-text .name,
.row-slider .box-text .product-title,
.row-slider .box-text .product-title a {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

/* =========================================================
   4. FLICKITY PREV / NEXT
   ========================================================= */
.row-slider.flickity-enabled .flickity-prev-next-button {
    position: absolute;
    top: 50%;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 2px solid #fff !important;
    border-radius: 50% !important;
    background: rgba(31,75,120,.94) !important;
    box-shadow: 0 3px 10px rgba(0,0,0,.16);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50%) !important;
    transition: opacity .2s ease, visibility .2s ease, background .2s ease !important;
    z-index: 20;
}

/* Ẩn SVG mặc định, tránh icon bị méo */
.row-slider.flickity-enabled .flickity-prev-next-button svg,
.row-slider.flickity-enabled .flickity-prev-next-button .flickity-button-icon {
    display: none !important;
}

.row-slider.flickity-enabled .flickity-prev-next-button::before {
    content: "";
    position: absolute;
    top: 50%;
    width: 8px;
    height: 8px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}

.row-slider.flickity-enabled .flickity-prev-next-button.previous::before {
    left: 53%;
    transform: translate(-50%,-50%) rotate(-135deg);
}

.row-slider.flickity-enabled .flickity-prev-next-button.next::before {
    left: 47%;
    transform: translate(-50%,-50%) rotate(45deg);
}

.row-slider.flickity-enabled .flickity-prev-next-button.previous {
    left: 12px !important;
    right: auto !important;
}

.row-slider.flickity-enabled .flickity-prev-next-button.next {
    right: 12px !important;
    left: auto !important;
}

.row-slider.flickity-enabled:hover .flickity-prev-next-button {
    opacity: .96;
    visibility: visible;
}

.row-slider.flickity-enabled .flickity-prev-next-button:hover {
    background: #ee8022 !important;
}

.row-slider.flickity-enabled .flickity-prev-next-button:disabled {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* =========================================================
   5. FLICKITY DOTS
   ========================================================= */
.row-slider.flickity-enabled .flickity-page-dots {
    position: relative;
    bottom: auto;
    margin: 8px 0 0;
    padding: 0;
}

.row-slider.flickity-enabled .flickity-page-dots .dot {
    width: 7px;
    height: 7px;
    margin: 0 4px;
    border: 0;
    border-radius: 10px;
    background: #1f4b78;
    opacity: .20;
}

.row-slider.flickity-enabled .flickity-page-dots .dot.is-selected {
    width: 18px;
    background: #ee8022;
    opacity: 1;
}

/* =========================================================
   6. TABLET
   ========================================================= */
@media (max-width: 849px) {
    .row.equalize-box.large-columns-5.medium-columns-3.small-columns-2,
    .row-slider.flickity-enabled {
        padding: 7px !important;
    }

    .row.equalize-box.large-columns-5 > .col,
    .row-slider.flickity-enabled .flickity-slider > .col {
        padding: 4px !important;
    }

    .row.equalize-box.large-columns-5 .box-image,
    .row-slider .box-image {
        height: 165px !important;
    }

    .row.equalize-box.large-columns-5 .box-image > div,
    .row-slider .box-image > div,
    .row-slider .box-image .image-cover,
    .row-slider .box-image .image-fade_in_back {
        min-height: 165px !important;
    }

    .row-slider.flickity-enabled .flickity-prev-next-button {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        opacity: .92;
        visibility: visible;
    }
}

/* =========================================================
   7. MOBILE - 2 SẢN PHẨM / HÀNG THEO FLATSOME
   ========================================================= */
@media (max-width: 549px) {
    .section-title-container {
        margin-top: 12px !important;
        border-radius: 8px 8px 0 0;
    }

    .section-title.section-title-normal {
        min-height: 40px;
        padding: 7px 10px !important;
    }

    .section-title.section-title-normal > span {
        padding-left: 10px !important;
        font-size: 13px;
    }

    .section-title.section-title-normal > span::before {
        height: 17px;
    }

    .row.equalize-box.large-columns-5.medium-columns-3.small-columns-2,
    .row-slider.flickity-enabled {
        margin-bottom: 12px !important;
        padding: 5px !important;
        border-radius: 0 0 8px 8px;
    }

    .row.equalize-box.large-columns-5 > .col,
    .row-slider.flickity-enabled .flickity-slider > .col {
        padding: 3px !important;
    }

    .row.equalize-box.large-columns-5 > .col > .col-inner,
    .row-slider .col-inner {
        border-radius: 7px !important;
    }

    .row.equalize-box.large-columns-5 .box-image,
    .row-slider .box-image {
        height: 145px !important;
    }

    .row.equalize-box.large-columns-5 .box-image > div,
    .row-slider .box-image > div,
    .row-slider .box-image .image-cover,
    .row-slider .box-image .image-fade_in_back {
        min-height: 145px !important;
    }

    .row.equalize-box.large-columns-5 .box-image img,
    .row-slider .box-image img {
        padding: 5px;
    }

    .row.equalize-box.large-columns-5 .box-text,
    .row-slider .box-text {
        min-height: 58px !important;
        height: 58px !important;
        max-height: 58px !important;
        padding: 6px !important;
    }

    .row.equalize-box.large-columns-5 .box-text p,
    .row.equalize-box.large-columns-5 .box-text a,
    .row-slider .box-text p,
    .row-slider .box-text .name,
    .row-slider .box-text .product-title,
    .row-slider .box-text .product-title a {
        font-size: 12px;
        line-height: 1.4;
    }

    .row-slider.flickity-enabled .flickity-prev-next-button {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        border-width: 1px !important;
        opacity: .9;
        visibility: visible;
    }

    .row-slider.flickity-enabled .flickity-prev-next-button.previous {
        left: 8px !important;
    }

    .row-slider.flickity-enabled .flickity-prev-next-button.next {
        right: 8px !important;
    }
}

/* =========================================================
   8. ACCESSIBILITY / PERFORMANCE
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    .row.equalize-box *,
    .row-slider *,
    .row.equalize-box *::before,
    .row-slider *::before,
    .row.equalize-box *::after,
    .row-slider *::after {
        transition: none !important;
        animation: none !important;
    }
}

/* =========================================================
   HGM - SECTION TITLE CENTER
   Ví dụ: THÔNG TIN HỮU ÍCH
   ========================================================= */

.section-title-container:has(.section-title-center) {
    width: 100% !important;

    margin: 22px 0 12px !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;

    overflow: visible !important;
}


/* Reset Flatsome */

.section-title.section-title-center {
    display: flex !important;
    align-items: center;
    justify-content: center;

    width: 100%;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    text-align: center;
}


/* Hai đường kẻ */

.section-title.section-title-center > b {
    display: block !important;
    flex: 1 1 auto;

    height: 1px !important;

    border: 0 !important;

    background: linear-gradient(
        90deg,
        transparent,
        #dce6ee
    );

    opacity: 1 !important;
}


/* Đường bên phải đảo chiều */

.section-title.section-title-center > b:last-child {
    background: linear-gradient(
        90deg,
        #dce6ee,
        transparent
    );
}


/* =========================================================
   TITLE
   ========================================================= */

.section-title.section-title-center > span {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    gap: 8px;

    margin: 0 14px !important;
    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;

    color: #1f4b78 !important;

    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;

    letter-spacing: .2px;

    text-transform: uppercase;
}


/* =========================================================
   ICON
   ========================================================= */

.section-title.section-title-center > span i {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    margin: 0 !important;

    flex: 0 0 30px;

    border: 1px solid #d9e6ef;
    border-radius: 8px;

    background: #f4f8fb;

    color: #1f4b78 !important;

    font-size: 15px;

    box-shadow:
        0 2px 5px rgba(31,75,120,.06);
}


/* Điểm nhấn cam */

.section-title.section-title-center > span::after {
    content: "";

    width: 5px;
    height: 5px;

    margin-left: 1px;

    flex: 0 0 5px;

    border-radius: 50%;

    background: #ee8022;
}


/* =========================================================
   BLOG GRID PANEL
   row large-columns-4 medium-columns-3 small-columns-1 row-small
   ========================================================= */

.row.large-columns-4.medium-columns-3.small-columns-1.row-small {

    display: flex;
    flex-wrap: wrap;

    width: 100% !important;

    margin: 0 0 20px !important;

    padding: 10px !important;

    border: 1px solid #dfe8f0;
    border-radius: 10px;

    background: #fff;

    box-shadow:
        0 4px 14px rgba(31,75,120,.055);
}


/* =========================================================
   COLUMN
   ========================================================= */

.row.large-columns-4.medium-columns-3.small-columns-1.row-small > .col {

    display: flex;

    margin: 0 !important;

    padding: 5px !important;
}


/* =========================================================
   CARD
   ========================================================= */

.row.large-columns-4.medium-columns-3.small-columns-1.row-small
> .col > .col-inner {

    display: flex;
    flex-direction: column;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border: 1px solid #e2eaf1;
    border-radius: 9px;

    background: #fff;

    box-shadow:
        0 2px 7px rgba(31,75,120,.06);

    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}


/* Hover */

.row.large-columns-4.medium-columns-3.small-columns-1.row-small
> .col:hover > .col-inner {

    transform: translateY(-3px);

    border-color: #c5d9e8;

    box-shadow:
        0 7px 18px rgba(31,75,120,.12);
}


/* =========================================================
   BLOG BOX
   ========================================================= */

.row.large-columns-4.medium-columns-3.small-columns-1.row-small
.box-blog-post {

    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column;

    width: 100%;
    height: 100%;

    margin: 0 !important;

    background: #fff;
}


/* =========================================================
   IMAGE
   ========================================================= */

.row.large-columns-4.medium-columns-3.small-columns-1.row-small
.box-blog-post .box-image {

    position: relative !important;

    width: 100% !important;
    height: 175px !important;
    min-height: 175px !important;

    margin: 0 !important;

    overflow: hidden;

    background: #f4f7f9;
}


/* Reset image-cover Flatsome */

.row.large-columns-4.medium-columns-3.small-columns-1.row-small
.box-blog-post .box-image > div,

.row.large-columns-4.medium-columns-3.small-columns-1.row-small
.box-blog-post .image-cover {

    position: relative !important;

    width: 100% !important;
    height: 175px !important;

    padding-top: 0 !important;

    overflow: hidden;
}


/* Image */

.row.large-columns-4.medium-columns-3.small-columns-1.row-small
.box-blog-post .box-image img {

    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 100% !important;

    padding: 0 !important;

    object-fit: cover !important;
    object-position: center !important;

    transform: none !important;

    transition:
        transform .35s ease !important;
}


/* Zoom nhẹ */

.row.large-columns-4.medium-columns-3.small-columns-1.row-small
.col:hover .box-image img {

    transform: scale(1.035) !important;
}


/* =========================================================
   TEXT AREA
   ========================================================= */

.row.large-columns-4.medium-columns-3.small-columns-1.row-small
.box-blog-post .box-text {

    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column;

    width: 100% !important;

    height: auto !important;
    min-height: 168px !important;
    max-height: none !important;

    margin: 0 !important;

    padding: 11px 11px 13px !important;

    border-top: 1px solid #edf2f6;

    background: #fff;

    text-align: left !important;
}


.row.large-columns-4.medium-columns-3.small-columns-1.row-small
.box-blog-post .box-text-inner {

    display: flex;
    flex: 1 1 auto;
    flex-direction: column;

    width: 100%;
}


/* =========================================================
   TITLE - TỐI ĐA 2 DÒNG
   ========================================================= */

.row.large-columns-4.medium-columns-3.small-columns-1.row-small
.box-blog-post .post-title {

    display: -webkit-box;

    height: 42px;
    min-height: 42px;

    margin: 0 0 7px !important;

    overflow: hidden;

    color: #1f4b78;

    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;

    text-align: left;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}


.row.large-columns-4.medium-columns-3.small-columns-1.row-small
.box-blog-post .post-title a {

    color: #1f4b78 !important;

    text-decoration: none;
}


.row.large-columns-4.medium-columns-3.small-columns-1.row-small
.box-blog-post .post-title a:hover {

    color: #ee8022 !important;
}


/* =========================================================
   DIVIDER
   ========================================================= */

.row.large-columns-4.medium-columns-3.small-columns-1.row-small
.box-blog-post .is-divider {

    width: 28px !important;
    height: 2px !important;

    margin: 0 0 8px !important;

    background: #ee8022 !important;

    opacity: .75;
}


/* =========================================================
   EXCERPT - TỐI ĐA 4 DÒNG
   ========================================================= */

.row.large-columns-4.medium-columns-3.small-columns-1.row-small
.box-blog-post .from_the_blog_excerpt {

    display: -webkit-box;

    margin: 0 !important;

    overflow: hidden;

    color: #737e88;

    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.55;

    text-align: left;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}


/* =========================================================
   DATE BADGE
   ========================================================= */

.row.large-columns-4.medium-columns-3.small-columns-1.row-small
.box-blog-post .badge {

    top: 9px !important;
    left: 9px !important;

    z-index: 5;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 849px) {

    .section-title.section-title-center > span {

        margin: 0 10px !important;

        font-size: 15px;
    }


    .row.large-columns-4.medium-columns-3.small-columns-1.row-small {

        padding: 7px !important;
    }


    .row.large-columns-4.medium-columns-3.small-columns-1.row-small
    > .col {

        padding: 4px !important;
    }


    .row.large-columns-4.medium-columns-3.small-columns-1.row-small
    .box-blog-post .box-image,

    .row.large-columns-4.medium-columns-3.small-columns-1.row-small
    .box-blog-post .box-image > div,

    .row.large-columns-4.medium-columns-3.small-columns-1.row-small
    .box-blog-post .image-cover {

        height: 160px !important;
        min-height: 160px !important;
    }
}


/* =========================================================
   MOBILE
   small-columns-1
   ========================================================= */

@media (max-width: 549px) {

    .section-title-container:has(.section-title-center) {

        margin-top: 17px !important;
        margin-bottom: 9px !important;
    }


    .section-title.section-title-center > span {

        gap: 6px;

        margin: 0 8px !important;

        font-size: 13px;
    }


    .section-title.section-title-center > span i {

        width: 26px;
        height: 26px;

        flex-basis: 26px;

        border-radius: 7px;

        font-size: 13px;
    }


    .section-title.section-title-center > span::after {

        width: 4px;
        height: 4px;

        flex-basis: 4px;
    }


    .row.large-columns-4.medium-columns-3.small-columns-1.row-small {

        margin-bottom: 14px !important;

        padding: 6px !important;

        border-radius: 8px;
    }


    .row.large-columns-4.medium-columns-3.small-columns-1.row-small
    > .col {

        padding: 4px !important;
    }


    .row.large-columns-4.medium-columns-3.small-columns-1.row-small
    .box-blog-post .box-image,

    .row.large-columns-4.medium-columns-3.small-columns-1.row-small
    .box-blog-post .box-image > div,

    .row.large-columns-4.medium-columns-3.small-columns-1.row-small
    .box-blog-post .image-cover {

        height: 190px !important;
        min-height: 190px !important;
    }


    .row.large-columns-4.medium-columns-3.small-columns-1.row-small
    .box-blog-post .box-text {

        min-height: auto !important;

        padding: 10px 11px 12px !important;
    }
}
/* ============================================================
   HAGIAMINH.COM
   COMPANY PROFILE / ABOUT PAGE
   FINAL
   ============================================================ */

.hgm-about{
    --hgm-blue:#1f4b78;
    --hgm-blue-dark:#102b43;
    --hgm-orange:#ee8022;
    --hgm-text:#53606c;
    --hgm-muted:#8a949d;
    --hgm-line:#dce4ea;
    --hgm-light:#f5f7f8;

    width:100%;
    max-width:100%;
    margin:0;
    padding:20px 0 0;

    color:var(--hgm-text);

    font-size:14px;
    line-height:1.7;

    overflow:hidden;
}

.hgm-about *,
.hgm-about *::before,
.hgm-about *::after{
    box-sizing:border-box;
}

.hgm-about h1,
.hgm-about h2,
.hgm-about h3,
.hgm-about p,
.hgm-about figure{
    margin-top:0;
}

.hgm-about img{
    display:block;
    max-width:100%;
    height:auto;
}

.hgm-about a{
    text-decoration:none;
}


/* ============================================================
   COMMON
   ============================================================ */

.hgm-about__chapter{
    display:flex;

    width:100%;
    margin:0 0 30px;

    align-items:center;
    gap:11px;
}

.hgm-about__chapter > span{
    color:var(--hgm-orange);

    font-size:10px;
    font-weight:700;
}

.hgm-about__chapter > i{
    display:block;

    width:45px;
    height:1px;

    background:#bdc8d0;
}

.hgm-about__chapter > small{
    color:var(--hgm-muted);

    font-size:9px;
    font-weight:700;

    letter-spacing:1.5px;
}

.hgm-about__chapter--light > i{
    background:rgba(255,255,255,.25);
}

.hgm-about__chapter--light > small{
    color:rgba(255,255,255,.5);
}


/* ============================================================
   01. HERO
   ============================================================ */

.hgm-about__hero{
    display:grid;

    grid-template-columns:
        105px
        minmax(0,1fr)
        150px;

    min-height:520px;

    margin:0 0 85px;

    overflow:hidden;

    background:var(--hgm-light);

    border-top:1px solid var(--hgm-line);
    border-bottom:1px solid var(--hgm-line);
}


/* HERO MARK */

.hgm-about__hero-mark{
    display:flex;

    padding:30px 18px;

    align-items:center;
    flex-direction:column;

    border-right:1px solid var(--hgm-line);
}

.hgm-about__hero-mark strong{
    color:var(--hgm-blue);

    font-size:20px;
    font-weight:700;

    letter-spacing:2px;

    writing-mode:vertical-rl;

    transform:rotate(180deg);
}

.hgm-about__hero-mark span{
    margin-top:auto;

    color:#9ca7af;

    font-size:8px;
    font-weight:600;

    letter-spacing:2px;

    writing-mode:vertical-rl;

    transform:rotate(180deg);
}


/* HERO MAIN */

.hgm-about__hero-main{
    display:flex;

    min-width:0;

    padding:60px 50px 45px;

    flex-direction:column;
    justify-content:center;
}

.hgm-about__eyebrow{
    display:flex;

    margin-bottom:35px;

    align-items:center;
    gap:12px;
}

.hgm-about__eyebrow span{
    color:var(--hgm-muted);

    font-size:9px;
    font-weight:700;

    letter-spacing:1.5px;
}

.hgm-about__eyebrow i{
    display:block;

    width:45px;
    height:1px;

    background:var(--hgm-orange);
}

.hgm-about__hero h1{
    max-width:700px;

    margin:0 0 45px;

    color:var(--hgm-blue);

    font-size:clamp(42px,6vw,70px);
    font-weight:500;

    line-height:.98;

    letter-spacing:-2px;
}

.hgm-about__hero h1 em{
    color:var(--hgm-orange);

    font-family:Georgia,"Times New Roman",serif;
    font-weight:400;
}

.hgm-about__hero-bottom{
    display:grid;

    grid-template-columns:
        minmax(0,500px)
        auto;

    gap:35px;

    align-items:end;
}

.hgm-about__hero-bottom p{
    margin:0;

    font-size:14px;
    line-height:1.8;
}

.hgm-about__hero-bottom > a{
    display:inline-flex;

    width:max-content;

    padding-bottom:5px;

    align-items:center;
    gap:16px;

    color:var(--hgm-blue);

    border-bottom:1px solid var(--hgm-blue);

    font-size:11px;
    font-weight:600;

    white-space:nowrap;
}

.hgm-about__hero-bottom > a span{
    color:var(--hgm-orange);
}


/* HERO SIDE */

.hgm-about__hero-side{
    display:flex;

    padding:28px 20px;

    flex-direction:column;

    background:var(--hgm-blue);
}

.hgm-about__hero-side > strong{
    color:rgba(255,255,255,.20);

    font-size:70px;
    font-weight:300;

    line-height:1;
}

.hgm-about__hero-side > div{
    margin-top:auto;
}

.hgm-about__hero-side small,
.hgm-about__hero-side span{
    display:block;
}

.hgm-about__hero-side small{
    margin-bottom:5px;

    color:rgba(255,255,255,.55);

    font-size:8px;

    letter-spacing:1px;
}

.hgm-about__hero-side span{
    color:#fff;

    font-size:9px;
    font-weight:600;

    letter-spacing:.6px;
}


/* ============================================================
   02. COMPANY
   ============================================================ */

.hgm-about__company{
    display:grid;

    grid-template-columns:
        80px
        minmax(0,1fr);

    margin-bottom:95px;
}

.hgm-about__vertical{
    padding-top:5px;

    color:#b5bec5;

    border-right:1px solid var(--hgm-line);

    font-size:9px;
    font-weight:700;

    letter-spacing:3px;

    text-align:center;

    writing-mode:vertical-rl;
}

.hgm-about__company-main{
    padding-left:48px;
}

.hgm-about__company-grid{
    display:grid;

    grid-template-columns:
        minmax(280px,.85fr)
        minmax(0,1.15fr);

    gap:65px;
}

.hgm-about__company-title h2{
    margin:0;

    color:var(--hgm-blue);

    font-size:clamp(30px,4vw,47px);
    font-weight:500;

    line-height:1.12;

    letter-spacing:-1px;
}

.hgm-about__company-title h2 em{
    color:#9da7ae;

    font-family:Georgia,"Times New Roman",serif;
    font-weight:400;
}

.hgm-about__company-content{
    max-width:600px;
}

.hgm-about__company-content p{
    margin:0 0 15px;
}

.hgm-about__hello{
    color:var(--hgm-orange);

    font-weight:600;
}


/* ============================================================
   03. SERVICES
   ============================================================ */

.hgm-about__services{
    margin:0 0 95px;

    padding:55px 45px 0;

    color:#fff;

    background:var(--hgm-blue-dark);
}

.hgm-about__services-head{
    max-width:700px;

    margin-bottom:48px;
}

.hgm-about__services-head h2{
    margin:0;

    color:#fff;

    font-size:clamp(34px,5vw,54px);
    font-weight:400;

    line-height:1.1;
}

.hgm-about__services-head h2 em{
    color:var(--hgm-orange);

    font-family:Georgia,"Times New Roman",serif;
    font-weight:400;
}

.hgm-about__services-grid{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    margin:0 -45px;
}

.hgm-about__service{
    position:relative;

    min-width:0;
    min-height:300px;

    padding:28px;

    border-top:
        1px solid rgba(255,255,255,.14);

    border-right:
        1px solid rgba(255,255,255,.14);

    transition:
        background .25s ease,
        transform .25s ease;
}

.hgm-about__service:last-child{
    border-right:0;
}

.hgm-about__service:hover{
    background:rgba(255,255,255,.04);
}

.hgm-about__service--orange{
    background:var(--hgm-orange);
}

.hgm-about__service--orange:hover{
    background:#df751c;
}

.hgm-about__service-number{
    display:block;

    margin-bottom:42px;

    color:rgba(255,255,255,.42);

    font-size:10px;
}

.hgm-about__service h3{
    margin:0 0 18px;

    color:#fff;

    font-size:23px;
    font-weight:500;

    line-height:1.1;
}

.hgm-about__service p{
    max-width:220px;

    margin:0;

    color:rgba(255,255,255,.60);

    font-size:12px;

    line-height:1.65;
}

.hgm-about__service--orange p{
    color:rgba(255,255,255,.88);
}

.hgm-about__service-arrow{
    position:absolute;

    right:23px;
    bottom:20px;

    color:rgba(255,255,255,.75);

    font-size:19px;
}


/* ============================================================
   04. SELECTED WORK
   ============================================================ */

.hgm-about__works{
    margin-bottom:100px;
}

.hgm-about__works-head{
    margin-bottom:45px;
}

.hgm-about__works-head h2{
    margin:0;

    color:var(--hgm-blue);

    font-size:clamp(32px,5vw,50px);
    font-weight:500;

    line-height:1.1;
}

.hgm-about__works-head h2 em{
    color:#9da7ae;

    font-family:Georgia,"Times New Roman",serif;
    font-weight:400;
}


/* PROJECT */

.hgm-about__project{
    display:grid;

    grid-template-columns:
        minmax(0,1.55fr)
        minmax(230px,.45fr);

    min-height:370px;

    margin-bottom:50px;
}

.hgm-about__project--reverse{
    grid-template-columns:
        minmax(230px,.45fr)
        minmax(0,1.55fr);
}

.hgm-about__project-image{
    position:relative;

    display:flex;

    min-width:0;
    min-height:370px;

    padding:45px;

    align-items:center;
    justify-content:center;

    overflow:hidden;

    background:var(--hgm-light);
}

.hgm-about__project-image > a{
    display:flex;

    width:100%;
    height:100%;

    align-items:center;
    justify-content:center;
}

.hgm-about__project-image img{
    width:auto;
    height:auto;

    max-width:70%;
    max-height:270px;

    object-fit:contain;

    transition:transform .35s ease;
}

.hgm-about__project-image:hover img{
    transform:scale(1.04);
}

.hgm-about__project-count{
    position:absolute;

    top:18px;
    left:20px;

    color:#9aa4ac;

    font-size:9px;
    font-weight:700;

    letter-spacing:1px;
}

.hgm-about__project-content{
    display:flex;

    min-width:0;

    padding:38px 30px;

    flex-direction:column;
    justify-content:center;

    border-top:1px solid var(--hgm-line);
    border-bottom:1px solid var(--hgm-line);
}

.hgm-about__project-content > span{
    margin-bottom:16px;

    color:var(--hgm-orange);

    font-size:9px;
    font-weight:700;

    letter-spacing:1.2px;
}

.hgm-about__project-content h3{
    margin:0 0 18px;

    color:var(--hgm-blue);

    font-size:35px;
    font-weight:500;

    line-height:1.05;
}

.hgm-about__project-content p{
    margin:0 0 22px;

    color:var(--hgm-muted);

    font-size:12px;
}

.hgm-about__project-content > a{
    display:inline-flex;

    width:max-content;

    padding-bottom:4px;

    align-items:center;
    gap:9px;

    color:var(--hgm-blue);

    border-bottom:1px solid #c8d1d8;

    font-size:11px;
    font-weight:600;
}

.hgm-about__project-content > a span{
    color:var(--hgm-orange);
}


/* ============================================================
   05. PRODUCTION
   ============================================================ */

.hgm-about__production{
    display:grid;

    grid-template-columns:
        minmax(250px,.65fr)
        minmax(0,1.35fr);

    gap:50px;

    margin-bottom:80px;

    padding:50px 0;

    border-top:1px solid var(--hgm-line);
    border-bottom:1px solid var(--hgm-line);
}

.hgm-about__production-content{
    padding-top:10px;
}

.hgm-about__production-content h2{
    margin:0 0 20px;

    color:var(--hgm-blue);

    font-size:37px;
    font-weight:500;

    line-height:1.1;
}

.hgm-about__production-content h2 em{
    color:var(--hgm-orange);

    font-family:Georgia,"Times New Roman",serif;
    font-weight:400;
}

.hgm-about__production-content > p{
    max-width:320px;

    margin:0;

    color:var(--hgm-muted);
}


/* GALLERY */

.hgm-about__gallery{
    display:grid;

    grid-template-columns:
        1.1fr .9fr;

    grid-template-rows:
        225px 225px;

    gap:12px;
}

.hgm-about__gallery-item{
    position:relative;

    min-width:0;

    margin:0;

    overflow:hidden;

    background:var(--hgm-light);
}

.hgm-about__gallery-item--large{
    grid-row:1 / 3;
}

.hgm-about__gallery-item img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .35s ease;
}

.hgm-about__gallery-item:hover img{
    transform:scale(1.025);
}

.hgm-about__gallery-item figcaption{
    position:absolute;

    left:12px;
    right:12px;
    bottom:12px;

    display:flex;

    padding:10px 12px;

    align-items:center;
    gap:10px;

    background:rgba(255,255,255,.94);
}

.hgm-about__gallery-item figcaption span{
    color:var(--hgm-orange);

    font-size:9px;
    font-weight:700;
}

.hgm-about__gallery-item figcaption strong{
    color:var(--hgm-blue);

    font-size:11px;
    font-weight:600;
}


/* ============================================================
   06. FINAL CTA
   KHÔNG CÒN CONTACT BOX
   ============================================================ */

.hgm-about__cta{
    position:relative;

    width:100%;

    overflow:hidden;

    color:#fff;

    background:var(--hgm-blue);
}

.hgm-about__cta-content{
    position:relative;
    z-index:2;

    padding:55px 48px 32px;
}

.hgm-about__cta-label{
    display:block;

    margin-bottom:23px;

    color:#ffb678;

    font-size:9px;
    font-weight:700;

    letter-spacing:1.2px;
}

.hgm-about__cta h2{
    margin:0 0 45px;

    color:#fff;

    font-size:clamp(42px,7vw,72px);
    font-weight:400;

    line-height:.98;

    letter-spacing:-2px;
}

.hgm-about__cta h2 em{
    color:#ff9944;

    font-family:Georgia,"Times New Roman",serif;
    font-weight:400;
}

.hgm-about__cta-footer{
    display:flex;

    width:100%;

    align-items:center;
    gap:18px;
}

.hgm-about__cta-footer > span{
    display:block;

    width:100%;
    height:1px;

    background:rgba(255,255,255,.18);
}

.hgm-about__cta-footer strong{
    flex:0 0 auto;

    color:rgba(255,255,255,.62);

    font-size:8px;
    font-weight:600;

    letter-spacing:1.4px;
}

.hgm-about__cta-watermark{
    position:absolute;

    right:-22px;
    bottom:-50px;

    color:rgba(255,255,255,.035);

    font-size:190px;
    font-weight:700;

    line-height:1;

    pointer-events:none;
}


/* ============================================================
   TABLET <= 849px
   ============================================================ */

@media (max-width:849px){

    /* HERO */

    .hgm-about__hero{
        grid-template-columns:
            65px
            minmax(0,1fr);
    }

    .hgm-about__hero-side{
        display:none;
    }

    .hgm-about__hero-main{
        padding:50px 32px;
    }

    .hgm-about__hero-bottom{
        grid-template-columns:1fr;

        gap:20px;
    }


    /* COMPANY */

    .hgm-about__company{
        grid-template-columns:
            45px
            minmax(0,1fr);
    }

    .hgm-about__company-main{
        padding-left:28px;
    }

    .hgm-about__company-grid{
        grid-template-columns:1fr;

        gap:25px;
    }


    /* SERVICES */

    .hgm-about__services-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .hgm-about__service:nth-child(2){
        border-right:0;
    }

    .hgm-about__service:nth-child(1),
    .hgm-about__service:nth-child(2){
        border-bottom:
            1px solid rgba(255,255,255,.14);
    }


    /* PROJECT */

    .hgm-about__project,
    .hgm-about__project--reverse{
        grid-template-columns:
            minmax(0,1fr)
            260px;
    }

    .hgm-about__project--reverse
    .hgm-about__project-content{
        order:2;
    }

    .hgm-about__project--reverse
    .hgm-about__project-image{
        order:1;
    }


    /* PRODUCTION */

    .hgm-about__production{
        grid-template-columns:1fr;

        gap:25px;
    }

}


/* ============================================================
   MOBILE <= 549px
   ============================================================ */

@media (max-width:549px){

    .hgm-about{
        padding-top:5px;
    }


    /* HERO */

    .hgm-about__hero{
        display:block;

        min-height:0;

        margin-bottom:58px;
    }

    .hgm-about__hero-mark,
    .hgm-about__hero-side{
        display:none;
    }

    .hgm-about__hero-main{
        padding:34px 18px 32px;
    }

    .hgm-about__eyebrow{
        margin-bottom:24px;
    }

    .hgm-about__eyebrow span{
        font-size:8px;
    }

    .hgm-about__hero h1{
        margin-bottom:28px;

        font-size:42px;

        line-height:1;
    }

    .hgm-about__hero-bottom{
        display:block;
    }

    .hgm-about__hero-bottom p{
        font-size:13px;
    }

    .hgm-about__hero-bottom > a{
        margin-top:22px;
    }


    /* COMPANY */

    .hgm-about__company{
        display:block;

        margin-bottom:58px;
    }

    .hgm-about__vertical{
        display:none;
    }

    .hgm-about__company-main{
        padding:0;
    }

    .hgm-about__company-title h2{
        font-size:34px;
    }


    /* SERVICES */

    .hgm-about__services{
        margin-left:-15px;
        margin-right:-15px;
        margin-bottom:58px;

        padding:38px 15px 0;
    }

    .hgm-about__services-head{
        margin-bottom:34px;
    }

    .hgm-about__services-head h2{
        font-size:37px;
    }

    .hgm-about__services-grid{
        grid-template-columns:1fr;

        margin:0 -15px;
    }

    .hgm-about__service{
        min-height:215px;

        padding:23px 20px;

        border-right:0 !important;

        border-bottom:
            1px solid rgba(255,255,255,.14);
    }

    .hgm-about__service-number{
        margin-bottom:23px;
    }


    /* WORK */

    .hgm-about__works{
        margin-bottom:58px;
    }

    .hgm-about__works-head{
        margin-bottom:30px;
    }

    .hgm-about__works-head h2{
        font-size:35px;
    }

    .hgm-about__project,
    .hgm-about__project--reverse{
        display:flex;

        min-height:0;

        margin-bottom:34px;

        flex-direction:column;
    }

    .hgm-about__project-image{
        order:1 !important;

        min-height:250px;

        padding:35px 20px;
    }

    .hgm-about__project-content{
        order:2 !important;

        padding:24px 18px;
    }

    .hgm-about__project-content h3{
        font-size:29px;
    }


    /* PRODUCTION */

    .hgm-about__production{
        margin-bottom:50px;

        padding:38px 0;
    }

    .hgm-about__production-content h2{
        font-size:33px;
    }

    .hgm-about__gallery{
        grid-template-columns:
            1fr 1fr;

        grid-template-rows:
            250px 175px;
    }

    .hgm-about__gallery-item--large{
        grid-column:1 / 3;
        grid-row:auto;
    }


    /* CTA */

    .hgm-about__cta{
        width:calc(100% + 30px);

        margin-left:-15px;
        margin-right:-15px;
    }

    .hgm-about__cta-content{
        padding:38px 20px 27px;
    }

    .hgm-about__cta h2{
        margin-bottom:34px;

        font-size:44px;

        line-height:1;
    }

    .hgm-about__cta-watermark{
        right:-12px;
        bottom:-20px;

        font-size:110px;
    }

}


/* ============================================================
   SMALL MOBILE <= 380px
   ============================================================ */

@media (max-width:380px){

    .hgm-about__hero h1{
        font-size:37px;
    }

    .hgm-about__gallery{
        display:block;
    }

    .hgm-about__gallery-item{
        height:220px;

        margin-bottom:8px;
    }

    .hgm-about__cta h2{
        font-size:39px;
    }

}