html {
    scroll-behavior: smooth;
}

* {
    margin: 0;
    padding: 0;
}


.menu-link {
    background-image: linear-gradient(
        to right,
        #FF5A6E,
        #FF5A6E 50%,
        #fff 50%
    );
    background-size: 200% 100%;
    background-position: -100%;
    display: inline-block;
    font-weight: bold;
    position: relative;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 0.3s ease-in-out;
}

.responsive-menu-link {
    background-image: linear-gradient(
        to right,
        #FF5A6E,
        #FF5A6E 50%,
        #000 50%
    );
    background-size: 200% 100%;
    background-position: -100%;
    display: inline-block;
    font-weight: bold;
    position: relative;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 0.3s ease-in-out;
}

.responsive-menu-link:hover {
    background-position: 0;
}

.menu-link:before {
    content: '';
    background: #FF5A6E;
    display: block;
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 3px;
    transition: all 0.3s ease-in-out;
}

.menu-link:hover {
    background-position: 0;
}

.menu-link:hover::before {
    width: 100%;
}

.active {
    background-position: 0 !important;
}

.active:before {
    width: 100% !important;
}

.active-menu-links {
    background-image: linear-gradient(
        to right,
        #FF5A6E,
        #FF5A6E 50%,
        #000 50%
    );
    background-size: 200% 100%;
    background-position: -100%;
    display: inline-block;
    font-weight: bold;
    position: relative;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 0.3s ease-in-out;
}

.active-menu-links:before {
    content: '';
    background: #FF5A6E;
    display: block;
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 3px;
    transition: all 0.3s ease-in-out;
}

.active-menu-links:hover {
    background-position: 0;
}

.active-menu-links:hover::before {
    width: 100%;
}


body {
    width: auto;
    height: auto;
    /* font-size: 18px; */
    font-family: "Noto Sans";
}

#red-text {
    color: #ff5a6e;
}

#title-text-separator {
    width: 10%;
    margin-top: 1%;
    margin-bottom: 2%;
    border: solid 3px #ff5a6e66;
}

#title-text-product {
    width: 30%;
    border: solid 1px #ff5a6e66;
}

.responsive-menu-link {
    color: black;
}

/* ----- General Header CSS ------ */

#header {
    position: fixed;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    margin: auto;
    font-size: 19px;
    min-height: 60px;
    z-index: 1000;
}

.active-header {
    box-shadow: 2px 2px 15px #bebebe;
}

#image-link {
    margin-left: 50px;
}

/* Normal Header */

.active-header {
    background-color: white;
    color: black;
}

ul li {
    list-style: none;
}

.menu-link {
    color: white;
    height: 25px;
    display: flex;
    align-items: center;
}

.menu-link-detail {
    color: #000;
}

.active-menu-links {
    color: black;
    height: 25px;
    display: flex;
    align-items: center;
}

#normal-header {
    position: fixed;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: auto;
    font-size: 19px;
    min-height: 100px;
}

#contact-container{
    display: flex;
    margin-top: 3%;
    margin-bottom: 1%;
    width: 100%;
    justify-content: space-around;
}

.contact-text {
    font-size: 30px;
    font-weight: bold;
}

#header-img {
    width: 60px;
    margin-left: 15%;
}

#header-img-detail {
    width: 60px;
    margin-left: 15%;
}

#nav-bar {
}

#nav-bar ul {
    list-style: none;
    display: flex;
    flex-flow: row;
}

#nav-bar li {
    padding: 10px;
    margin: 12px;
}

#nav-bar ul, a {
    text-decoration: none;
}

/* Responsive Header */

#responsive-header {
    display: none;
}

#image-button-black {
    display: none;
    border: none;
}

#image-button-black:hover {
    cursor: pointer;
}

#image-button-black:focus {
    outline: 0;
}

/* ----- Hero Header CSS -----

Tags included:

1. trang-chu - main container of the Hero

2. hero-content - the container of the title and description within the hero Section

3. hero-title - the title within the hero section

4. hero-text - the text within the hero section

5. hero-button - the button within the hero section

*/

#trang-chu {
    /* width: 100vw; */
    height: 100vh;
    box-shadow: 3px 3px 2px #bebebe;

    /* trang-chu flexbox */
    display: flex;
    justify-content: center;
    align-items: center;

    /* Texy style */
    text-align: center;
    color: white;

    /* Background image */
    background-image: linear-gradient(rgb(0 0 0 / 50%), rgb(0 0 0 / 0%)), url(../img/banner-home-1.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /*background-attachment: fixed;*/
}

#banner-product-detail {
    width: 100%;
    height: 40vh;
    box-shadow: 3px 3px 2px #bebebe;

    /* trang-chu flexbox */
    display: flex;
    justify-content: center;
    align-items: center;

    /* Texy style */
    text-align: center;
    color: white;

    /* Background image */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/product-banner-6.png);
    /*background-size: cover;*/
    /*background-position: center center;*/
    /*background-repeat: no-repeat;*/
    /*background-attachment: fixed;*/
}

#hero-title {
    font-size: 3.5em;
}

#hero-text {
    font-size: 1.3em;
    margin-top: 2%;
}

#hero-button {
    border: solid 2px white;
    background-color: inherit;
    color: white;
    margin-top: 6%;
    width: 25%;
    height: 55px;
    font-size: 15px;
    border-radius: 10px;
}

#hero-button:hover {
    cursor: pointer;
}

/* ----- Main Content CSS -----

Tags included:

1. giai-phap - the main container wrapping the "features" elements

2. features-description - container wrapping the title and the description

3. features-title - the main title of the Features

4. features-separator - the line that separates the title from the Description

5. features-text - the main describing the features and services

6. service-features - container wrapping all 4 services

7. feature - the common id applied to the container of all the 4 services

8. feature img - the styling of each image belonging to each feature

9. feature-title - the common id applied to the title of each feature

10. feature p - the styling of each paragraph belonging to each feature

11. feature-button - the common id applied to the button of each feature

12. feature-button:hover - the ":hover" styling of each button

*/

#giai-phap {
    margin-top: 5%;
    padding: 2%;
}

#service-features {
    display: flex;
    flex-direction: row;
    /* Change flow-direction to "column" in the responsive design for the features to stack
    one on top of another. */
    justify-content: space-around;
    margin-top: 2%;
    padding-bottom: 3%;
}

#features-description {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: auto;
    margin-top: 2%;
    padding: 2%;
    display: flex;
    width: 60%;
}

#features-description h1 {
    font-size: 45px;
}

#features-description p {
    padding: 1%;
    margin-top: 1%;
    font-size: 17px;
}

#feature {
    width: 25%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: solid 1px #bebebe;
    box-shadow: 1px 2px 15px #bebebe;
    min-height: 450px;
}

#feature img {
    max-width: 30%;
    max-height: 30%;
    padding-top: 5%;
}

#feature-title {
    margin-top: 5%;
}

#feature p {
    width: 70%;
    margin-top: 5%;
    margin-bottom: 10%;
    display: -webkit-box;
    /* max-height: 19.2rem; */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    text-align: justify;
    text-indent: 20px;
}

#feature-button {
    border: none;
    margin-top: 30%;
    width: 12vh;
    height: 5vh;
    border-radius: 15px;
    background-color: #ff5a6e;
    color: white;
    font-size: 16px;
    margin-bottom: 20%;
}

#feature-button:hover {
    background-color: #ff7b8b;
    cursor: pointer;
}

/* ----- Product Presentation CSS -----

CSS for the section of the website that features each "product" available.

Tags included:

1. #san-pham - the general container where everything is

2. #presentation-title-description - the container in which the title and the description are

3. #presentation-title - the main title of the section

4. #presentation-separator - the CSS for the separator between the main title and the description

5. #presentation-description - the main description of the section

6. #section-buttons - the div containing the main product buttons

7. .product-buttons - the general class used to style the buttons

8. .product-button:hover - the CSS that changes the style of a button when hoevered

9. .product-button:focus - the CSS that removes the outlife of the buttons when clicked

10. .product-button-active - the CSS for the class that is added with jQuery to buttons when sections appear/disappear

11. #section-content-container - the main container containing all the subsections

12. .product-content - a general class applying some CSS to each subsection container

13. #content-image - general id used to apply CSS to each image in the subsections

14. #content-image-container - general id used to apply CSS to each div containing the main image of each subsection

15. #content-title-text - general ID used to style the div containing each subsection's title and description

16. #content-title-text p - selector used to add a little distance between the paragraph and the title

17. .product-features-list - a general class used to style the feature list of each subsection

18. #first-feature-list - a unique ID used to stylize only the first container with that ID.

19. #product-feature-image - genral ID used to style the container of each product image1

20. #correct-icon - general id of all the images used to replace UL bulletpoints in the "list" with features of each product

21. #inside-features-title-text - general ID of the features of the products within each subsection

22. #content-button - general ID of each button inside each product subsection

23. #content-button:hover - general ID of the hover styling of each button inside the products subsection


*/

#san-pham {
    box-shadow: 2px 2px 15px #bebebe;
    display: flex;
    flex-flow: column;
    padding-top: 1%;
}

#presentation-title-description {
    display: flex;
    flex-flow: column;
    align-items: center;
    margin: auto;
    text-align: center;
    margin-top: 5%;
    width: 60%;
}

#presentation-title-description h1 {
    font-size: 45px;
}

#presentation-title-description p {
    margin-top: 1%;
    font-size: 17px;
}

#section-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.product-button {
    position: relative;
    text-decoration: none;
    border: none;
    border-radius: 10px;
    background-color: inherit;
    box-shadow: 1px 2px 15px #bebebe;
    padding: 15px;
    width: 10%;
    margin: 2%;
    font-size: 15px;
    cursor:pointer
}

.product-button:before {
    cursor: pointer;
    content: '';
    background-color: #FF5A6E;
    position: absolute;
    width: 0;
    left: 0;
    top: 0;
    height: 100%;
    z-index: -1;
    border-radius: 10px;
    transition: all .3s ease-in-out;
}

.product-button:hover::before{
    left: 0;
    top: 0;
    width: 100%;
    outline: 0;
}

.product-button:hover{
    color: #FFFFFF;
}

.product-button:focus {
    outline: 0;
}

.product-button-active {
    background-color: #ff5a6e;
    color: white;
}

/* -- SUBSECTION CSS: Section Content CSS -- */

#section-content-container {
    margin: auto;
    width: 75%;
}

.product-content {
    display: flex;
    flex-flow: row;
    justify-content: center;
    padding: 2%;
}

#content-image {
    width: 100%;
    height: 100%;
    width: 70%;
    height: auto;
}

#content-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
}

#content-title-text {
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    width: 50%;
    padding: 1%;
}

#content-title-text p {
    /*margin-top: 2%;*/
}

.product-features-list {
    display: flex;
    flex-flow: row;
    align-items: center;
    margin-top: 2%;
}

.product-features-list p{
    width: 600px;
    overflow: hidden;
    display: -webkit-box;
    text-align: justify;
}

#first-feature-list {
    margin-top: 0;
}

#product-feature-image {
    justify-content: flex-start;
    align-items: flex-start;
    width: 10%;
}

#partner-feature-image {
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
}

#correct-icon {
    width: 30px;
    height: 100%;
}

#partner-icon {
    width: 6%;
    height: 100%;
    margin-right: 20px;
}

#location-icon {
    width: 3%;
}

#contact-icon{
    width: 3%;
}

#contact-icon-footer{
    width: 5%;
}

#inside-features-title-text {
    display: flex;
    flex-flow: column;
    margin-left: 2%;
}

#content-button {
    border: none;
    border-radius: 10px;
    background-color: #ff5a6e;
    box-shadow: 1px 2px 15px #bebebe;
    padding: 15px;
    width: 25%;
    margin-top: 6%;
    text-align: center;
    font-size: 16px;
    color: white;
}

#content-button:hover {
    cursor: pointer;
    background-color: #ff7b8b;
}

/* Media - Video Section CSS

Tags included:

1. #ve-chung-toi - main container where all the elements in the section architecto

2. #media-title-description - id of the container with the title and description

3. #media-separator - separator between title and description

4. #media-title-description p - styling applied only to the main description

5. #media-video-text-container - general container keeping the title, description and video

6. #media-text - id of the container with the title and description at the left of the Video

7. #media-text h2 - styling of the h2 within the media-text container

8. #media-text p - styling of the p within the media-text container

9. #text-video-separator - separator between the text and the Video

10. #media-button - the button bellow the text at the left of the video

11. #media-button:hover - styling of the hover state of the button

12. media-video -container with the video

13. iframe-video - the iframe tag containing the YouTube video

*/

#ve-chung-toi {
    box-shadow: 2px 2px 15px #bebebe;
    display: flex;
    flex-flow: column;
    align-items: center;
    margin-top: 0%;
    padding-top: 3%;
}

#co-cau-to-chuc-cong-ty {
    /*box-shadow: 2px 2px 15px #bebebe;*/
    display: flex;
    flex-flow: column;
    align-items: center;
    margin-top: 1%;
    margin-bottom: 2%;
    padding-top: 2%;
}

#san-pham-detail {
    box-shadow: 2px 2px 15px #bebebe;
    display: flex;
    flex-flow: column;
    align-items: center;
}

#media-title-description {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: 4%;
    width: 85%;
}

#product-title-description-detail {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: 2%;
    width: 90%;
}

#media-title-description h1 {
    font-size: 45px;
}

#media-title-description p {
    margin-top: 1%;
    width: 70%;
    font-size: 17px;
}

#media-video-text-container {
    display: flex;
    flex-wrap: wrap;
    flex-flow: row;
    justify-content: space-around;
    align-items: flex-start;
    width: 75%;
    padding: 3% 2% 3% 2%;
    /* background-color: #f5f5f5; */
    border-radius: 10px;
}

#contact-text-container {
    display: flex;
    flex-wrap: wrap;
    flex-flow: row;
    width: 75%;
    padding: 1% 2% 3% 2%;
    /* background-color: #f5f5f5; */
    border-radius: 10px;
}

#contact-text-web {
    flex-wrap: wrap;
    flex-flow: row;
    width: 75%;
    padding: 0% 2%;
    /* background-color: #f5f5f5; */
    border-radius: 10px;
}

#contact-partner-container {
    display: flex;
    flex-wrap: wrap;
    width: 75%;
    padding: 3% 2% 3% 2%;
    /* background-color: #f5f5f5; */
    border-radius: 10px;
    justify-content: space-around;
}

#product-distinctive {
    display: flex;
    flex-wrap: wrap;
    flex-flow: row;
    width: 75%;
    padding: 0% 2% 3% 2%;
    /* background-color: #f5f5f5; */
    border-radius: 10px;
}

#product-text-container-detail {
    display: flex;
    flex-wrap: wrap;
    flex-flow: row;
    justify-content: space-around;
    /*align-items: center;*/
    width: 75%;
    padding: 3% 2% 0% 2%;
    /* background-color: #f5f5f5; */
    border-radius: 10px;
}

#media-text {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    width: 40%;
    height: auto;
}

.group-tam-nhin-su-menh{
    width: 100% !important;
}

.tam-nhin-su-menh{
    display: flex;
    justify-content: space-between;
}

.tam-nhin, .su-menh, .nguyen-tac-kinh-doanh{
    width: 48%;
}

#media-text h2 {
    font-size: 30px;
}

#media-text p {
    font-size: 17px;
    margin-top: 2%;
    margin-bottom: 3%;
    text-align: justify;
}

.text-ve-chung-toi {
    font-size: 17px;
    margin-top: 2%;
    margin-bottom: 0% !important;
    text-align: justify;
}

#product-text {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    width: 60%;
    height: auto;
}

#product-text h2 {
    font-size: 30px;
}

#product-text p {
    font-size: 17px;
    margin-top: 2%;
    margin-bottom: 5%;
    text-align: justify;
}

#contact-text {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    width: 50%;
    height: auto;
}

#product-distinctive-text {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    width: 50%;
    height: auto;
    margin: 0% 2%;
    padding: 3% 2% 3% 2%;
    background-color: #f5f5f5;
    border-radius: 20px;
}

#contact-text p {
    font-size: 17px;
    margin-bottom: 2%;
    width: 100%;
    text-align: justify;
    align-items: center;
    display: flex;
}

#product-distinctive-text p {
    font-size: 17px;
    margin-top: 2%;
    width: 100%;
    text-align: justify;
    align-items: center;
    display: flex;
    color: black;
}

#text-video-sperator {
    height: 20vh;
    border: solid 0.5px #e1e1e1;
}

#text-contact-sperator{
    height: auto;
    border: solid 0.5px #e1e1e1;
}

#media-button {
    border: solid 1px #c1c1c1;
    border-radius: 10px;
    background-color: inherit;
    box-shadow: 1px 2px 2px #bebebe;
    padding: 15px;
    width: 25%;
    margin-top: 5%;
    font-size: 15px;
    color: black;
}

#media-button:hover {
    cursor: pointer;
    background-color: white;
    background-color: #ff5a6e;
    color: white;
}

#media-video {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}

#product-img {
    display: flex;
    flex-flow: column;
    align-items: center;
    max-width: 40%;
}

#video {
    width: 60vh;
    height: 35vh;
    background-image: url(../img/product-banner-6.png);
}

#background-video {
    box-shadow: 2px 2px 15px #bebebe;
    width: 60vh;
    height: 35vh;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

/* Prices Section CSS

Tags Included:

1. #lien-he - main container of the price section

2. #prices-title-description - container where the title and description are

3. #prices-title-description h1 - main title of the "Prices" section

4. #prices-separator - Separator between title and description

5. #prices-title-description p - main description of the "Prices" section

6. #all-prices-container - container where all the divs with prices are

7. .price-container - common class used to style the containers of each price

8. .price-container h1 - title of each price (starter/premium/professional)

9. .price-container h2 - subtitle of each price ($55/$85/$120)

10. .price-container p - monthly payment text style

11. .price-container hr - prices separator style

12. .price-container ul - the list with features of each price

13. .price-container li - each individual item on the list with features for each price

14. .price-container button - style of each button of each price section

15. .price-container button:hover - the hover state of each button of each price

16. #price-container-two - the price container in the middle, placed a little higher than the others

*/

#lien-he {
    display: flex;
    flex-flow: column;
    justify-content: space-around;
    align-items: center;
    margin: auto;
    padding-top: 6%;
}

#doi-tac {
    box-shadow: 2px 2px 15px #bebebe;
    display: flex;
    flex-flow: column;
    justify-content: space-around;
    align-items: center;
    margin: auto;
    padding-top: 6%;
}

#partner-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px 30px;
}
#partner-content img{
    max-width: 95px;
}

#product-distinctive-group{
    display: flex;
    flex-flow: column;
    justify-content: space-around;
    align-items: center;
    margin: auto;
    padding-top: 1%;
}

#prices-title-description {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 60%;
}

#prices-title-description h1 {
    font-size: 45px;
}

#prices-separator {
    width: 5%;
    margin-top: 2%;
    border: solid 1px #ff5a63;
}

#prices-title-description p {
    margin-top: 1%;
}

#all-prices-container {
    display: flex;
    align-items: center;
    width: 90%;
    flex-direction: column;
}

.price-container {
    box-shadow: 2px 2px 15px #bebebe;
    text-align: center;
    margin-top: 7%;
    width: 27%;
}

.price-container h1 {
    color: #ff5a63;
    font-size: 45px;
    margin-top: 6%;
}

.price-container h2 {
    color: #323a45;
    font-size: 40px;
    margin-top: 4%;
}

.price-container p {
    margin-top: 4%;
    font-size: 17px;
}

.price-container hr {
    margin: auto;
    margin-top: 4%;
    margin-bottom: 4%;
    width: 70%;
    border: solid 0.5px #c1c1c1;
}

.price-container ul {
    list-style: none;
}

.price-container li {
    padding: 3%;
}

.price-container button {
    border: none;
    border-radius: 10px;
    background-color: #ff5a6e;
    box-shadow: 1px 2px 15px #bebebe;
    padding: 15px;
    width: 30%;
    margin-top: 6%;
    font-size: 16px;
    color: white;
    margin-bottom: 6%;
}

.price-container button:hover {
    cursor: pointer;
    background-color: #ff7b8b;
}

#price-container-two {
    margin-top: 4%;
}

/* Newsletter Section CSS

Tags included:

1. #newsletter-container - main newsletter section container

2. #newsletter-title-description - container with the main title and description

3. #newsletter-title-description h1 - styling for the main title

4. #newsletter-input-container - container with the form and input elements

5. #email-form - the id given to the <form> tag

6. #email-form label - styling of the label before the <input> tag

7. #email-input - id of the <input> tag where the email will be written

8. #email-form button - styling of the "submit" button after the <input> tag

9. #email-form button:hover - styling for the hover state of the button

*/

#newsletter-container {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    margin-top: 3%;
}

#newsletter-title-description {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 60%;
}

#newsletter-title-description h1 {
    font-size: 45px;
}

#email-input-container {
    margin-top: 1%
}

#email-form {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
}

#email-form label {
    font-size: 20px;
}

#email {
    font-size: 18px;
    margin-top: 4%;
    padding: 3%;
    width: 150%;
}

#submit {
    border: none;
    border-radius: 10px;
    background-color: #ff5a6e;
    box-shadow: 1px 2px 15px #bebebe;
    font-size: 16px;
    color: white;
    margin-top: 5%;
    padding: 15px;
    width: 40%;
}

#submit:hover {
    cursor: pointer;
    background-color: #ff7b8b;
}

/* Footer Section */

#footer-container {
    box-shadow: 2px 2px 15px #bebebe;
    margin-top: 5%;
    padding: 2%;
}

#footer-content {
    background: #180e29;
}

#footer-feature {
    display: flex;
    flex-direction: row;
    /* Change flow-direction to "column" in the responsive design for the features to stack
    one on top of another. */
    justify-content: space-evenly;
    margin-top: 2%;
    padding-bottom: 3%;
    padding-top: 3%;
}

#footer-feature .col-lg-2{
    min-width: 140px;
}

#footer-content #footer-feature .footer-logo img {
    padding-top: 20px;
    width: 180px;
}

#footer-content .form-control:focus {
    outline: none;
    box-shadow: none;
    background: #e5fff3;
}

#footer-content #footer-feature h3.block-title {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 30px;
}

#footer-content #footer-feature ul.menu li a {
    color: #e2e2e2;
    font-size: 16px;
    font-weight: 400;
    line-height: 32px;
    -webkit-transition: all 300ms;
    -o-transition: all 300ms;
    transition: all 300ms;
}

#footer-content #footer-feature ul.menu li a:hover {
    color: #FF5A6E;
    padding-left: 5px;
    -webkit-transition: all 300ms;
    -o-transition: all 300ms;
    transition: all 300ms;
}

#footer-content #footer-feature .widget p {
    color: #e2e2e2;
    font-size: 16px;
    line-height: 32px;
}

#footer-content #footer-feature .widget p a {
    color: #e2e2e2;
}

#contact-text-container #contact-text p a{
    color: black;
}

#footer-content #footer-feature .widget .footer-support {
    margin-top: 5px;
}

#footer-content #footer-feature .widget .footer-support a .img-fluid {
    width: 30px;
    margin-right: 5px;
}

/*start detail*/
#san-pham-detail .product_banner {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 22%;
}

#san-pham-detail .page_banner .page_banner_greeting * {
    color: #FFF;
}

#san-pham-detail .page_banner .product_banner_bg {
    position: absolute;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url(../img/product-banner-6.png);
    background-size: contain;
    width: 100%;
    height: 100%;
}

#san-pham-detail .page_banner .page_banner_greeting {
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    opacity: 1;
    transform: translateY(-50%);
    z-index: 9999;
}

#san-pham-detail .page_banner .page_banner_greeting .greeting_title {
    font-size: 45px;
    font-weight: bold;
    text-transform: uppercase;
}

.doc-link {
    color: #ff5a6e; 
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.3px;
    display: inline-flex;
    align-items: center;
    gap: 5px; /* Khoảng cách giữa chữ và icon */
    transition: all 0.2s ease-in-out;
    border-bottom: 2px solid transparent; /* Tạo nền cho hiệu ứng gạch chân */
}

/* Thêm biểu tượng trước link (sử dụng Unicode hoặc Icon Font) */
.doc-link::before {
    content: "📄"; /* Bạn có thể thay bằng icon FontAwesome nếu có */
    font-size: 1.1em;
}

.doc-link:hover {
    color: #ff5a6e;
	font-weight: 900;	/* Màu đậm hơn khi hover */
    border-bottom: 2px solid #ff5a6e; /* Gạch chân hiện lên khi hover */
    transform: translateY(-1px); /* Nhấc nhẹ link lên tạo cảm giác tương tác */
}

.doc-link:active {
    transform: translateY(0);
}


.img-product-detail{
    width: 80%;
    margin-bottom: 10%;
}

.group-contact-red-text{
    display: flex;
    flex-wrap: wrap;
    flex-flow: row;
    width: 75%;
    padding: 0% 2%;
    border-radius: 10px;
}
.css-chi-nhanh{
    display: block;
}
.group-contact-nang-luc{
    display: flex;
    align-items: center;
    font-size: 17px;
    margin-top: 2%;
    margin-bottom: 3%;
}
/*end detail*/

/* @Media min-width: 480px */
@media only screen and (min-width: 200px) and (max-width: 860px) {
    .group-contact-nang-luc{
        display: flex;
        align-items: flex-start;
        font-size: 17px;
        margin-top: 2%;
        margin-bottom: 3%;
    }
    .css-chi-nhanh{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    /* General Elements */
    #title-text-separator {
        width: 15%;
        margin-top: 3%;
        margin-bottom: 3%;
        border: solid 1px #ff5a6e;
    }

    /* General Elements */
    #title-text-product {
        width: 40%;
        border: solid 1px #ff5a6e;
    }

    /* Navigation CSS */
    #header {
        background: white;
        position: fixed;
        display: flex;
        flex-wrap: wrap;
        flex-flow: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        min-height: 60px;
        margin: auto;
    }

    #normal-header {
        display: none;
    }

    #responsive-header {
        display: flex;
        flex-flow: column;
        width: 100%;
        margin: auto;
    }

    #responsive-logo-button {
        display: flex;
        justify-content: space-between;
        /* padding: 1% 0 1% 0; */
    }

    #responsive-nav-bar {
        display: flex;
        flex-flow: column;
        align-items: center;
    }

    #responsive-nav-bar ul {
        list-style: none;
    }

    #responsive-nav-bar li {
        text-align: center;
        font-size: 23px;
        margin-top: 20%;
    }

    #product-distinctive {
        display: flex;
        flex-direction: column;
        width: 75%;
        padding: 0% 2% 3% 2%;
        /* background-color: #f5f5f5; */
        border-radius: 10px;
    }

    .group-contact-red-text{
        margin-top: 20px;
    }

    #product-distinctive-text {
        display: flex;
        flex-flow: column;
        align-items: center;
        width: 90%;
        height: auto;
        margin: 5% 2%;
        padding: 3% 5% 3% 5%;
        background-color: #f5f5f5;
        border-radius: 20px;
    }

    #responsive-first-item {
        margin-top: 0;
        padding: 0;
    }

    #header-img-black {
        margin-left: 5%;
        margin-top: 10%;
        width: 50%;
        width: 60px;
        height: auto;
    }

    #dropdown-button-black {
        display: block;
        width: 25%;
        height: auto;
        margin: 0;
        padding: 0;
    }

    .contact-red-text{
        font-size: 20px;
    }

    #image-button-black {
        border: none;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: inherit;
        padding: 2%;
    }

    #contact-text {
        display: flex;
        flex-flow: column;
        align-items: flex-start;
        width: 100%;
        height: auto;
        margin-top: 30px;
    }

    #contact-text-container {
        display: flex;
        flex-wrap: wrap;
        flex-flow: row;
        width: 75%;
        padding: 1% 2% 3% 2%;
        /* background-color: #f5f5f5; */
        border-radius: 10px;
        flex-direction: column;
    }

    #contact-partner-container{
        display: flex;
        flex-wrap: wrap;
        width: 75%;
        padding: 3% 2% 3% 2%;
        /* background-color: #f5f5f5; */
        border-radius: 10px;
        justify-content: space-around;
        height: 550px;
        overflow: scroll;
        margin: 40px 0;
    }
    #video {
        width: 40vh;
        height: 22vh;
    }

    #background-video {
        width: 40vh;
        height: 22vh;
    }

    /* Hero CSS */
    #trang-chu {
        /*width: auto;*/
        /*height: 120vh;*/
        /* trang-chu flexbox */
        content: '';
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        top: 0;
        left: 0;
        /* Texy style */
        text-align: center;
        color: white;
        /* Background image */
        background-image: linear-gradient(rgb(0 0 0 / 50%), rgb(0 0 0 / 0%)), url(../img/banner-home-1.png);
        background-size: cover;
        /*background-position: center center;*/
        /*background-repeat: no-repeat;*/
        /*background-attachment: fixed;*/
    }

    #banner-product-detail {
        /*width: auto;*/
        height: 70vh;
        /* trang-chu flexbox */
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        /* Texy style */
        text-align: center;
        color: white;
        /* Background image */
        background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/product-banner-6.png);
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        /*background-attachment: fixed;*/
    }

    #hero-title {
        font-size: 1.4em;
    }

    #hero-text {
        font-size: 1em;
        margin-top: 2%;
    }

    #hero-button {
        border: solid 2px white;
        background-color: inherit;
        color: white;
        margin-top: 6%;
        width: 25%;
        height: 55px;
        font-size: 15px;
        border-radius: 10px;
    }

    #hero-button:hover {
        cursor: pointer;
    }

    /* Service Features CSS */
    #giai-phap {
        margin-top: 5%;
        padding: 2%;
        padding-top: 15%;
    }

    #service-features {
        display: flex;
        flex-direction: column;
        /* Change flow-direction to "column" in the responsive design for the features to stack
        one on top of another. */
        justify-content: space-around;
        align-items: center;
        margin-top: 2%;
    }

    #features-description {
        width: 90%;
    }

    #feature {
        width: 80%;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border: solid 1px #bebebe;
        box-shadow: 1px 2px 15px #bebebe;
        margin-top: 10%;
    }

    #feature-button {
        border: none;
        margin-top: 30%;
        width: 15vh;
        height: 5vh;
        border-radius: 15px;
        background-color: #ff5a6e;
        color: white;
        font-size: 16px;
        margin-bottom: 20%;
    }

    /* Presentation Section CSS */
    #san-pham {
        margin-top: 5%;
    }

    #presentation-title-description {
        width: 90%;
    }

    #section-buttons {
        margin-top: 5%;
    }

    #section-content-container {
        margin: auto;
        width: 90%;
    }

    #section-content-container {
        margin-top: 7%;
    }

    .product-button {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        width: 40%;
        padding: 15px;
        white-space: nowrap;
    }

    .product-content {
        display: flex;
        flex-flow: column;
        padding: 2%;
    }

    #content-image {
        width: 100%;
        height: 100%;
    }

    #content-image-container {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    #content-title-text {
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: flex-start;
        width: 100%;
        margin: auto;
        margin-top: 5%;
        margin-bottom: 5%;
    }

    #content-title-text h1 {
        margin: auto;
        font-size: 25px;
    }

    #presentation-title-description h1 {
        font-size: 25px;
    }

    #features-description h1 {
        font-size: 25px;
    }

    #prices-title-description h1{
        font-size: 25px;
    }

    #centered-product-description {
        text-align: center;
    }

    #content-title-text p {
        margin-top: 5%;
        font-size: 15px;
    }

    #feature p{
        font-size: 15px;
    }

    #features-description p{
        font-size: 15px;
    }

    #product-feature-image {
        justify-content: center;
        align-items: center;
        width: 20%;
    }

    #partner-feature-image {
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    .product-features-list {
        margin-top: 0;
        align-items: center;
    }

    .product-features-list p{
        width: 290px;
        overflow: hidden;
        display: -webkit-box;
    }

    #first-feature-list {
        margin-top: 0;
    }

    #content-button {
        margin: auto;
        margin-top: 10%;
        width: 35%;
    }

    /* -- Media Section CSS -- */
    #ve-chung-toi {
        margin-top: 5%;
        padding-top: 5%;
    }

    #co-cau-to-chuc-cong-ty {
        margin-top: 5%;
        padding-top: 5%;
    }

    #san-pham-detail {
        margin-top: 0%;
    }

    #media-title-description {
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 100%;
        margin-top: 8%;
    }

    #media-video-text-container {
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
        width: 90%;
        padding: 2% 1% 2% 1%;
        margin-top: 5%;
        text-align: center;
    }

    #product-text-container-detail {
        display: flex;
        flex-flow: column;
        justify-content: center;
        /*align-items: center;*/
        width: 90%;
        padding: 2% 1% 0% 1%;
        margin-top: 5%;
        text-align: center;
    }

    #media-text {
        width: 100%;
    }

    #media-text h2 {
        margin: auto;
        font-size: 23px;
    }

    .tam-nhin-su-menh{
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
    }

    .tam-nhin, .su-menh, .nguyen-tac-kinh-doanh{
        width: 100%;
    }

    #media-text p {
        margin-top: 1%;
        text-align: justify;
        margin-bottom: 2%;
        font-size: 15px;
    }

    #partner-icon{
        width: 10% !important;
    }

    #presentation-title-description p{
        font-size: 15px;
    }

    #media-title-description p{
        width: 80%;
        font-size: 15px;
    }

    #product-text {
        width: 100%;
    }

    #product-text h2 {
        margin: auto;
    }

    #media-title-description h1 {
        font-size: 25px;
    }

    #product-text p {
        margin-top: 6%;
        text-align: justify;
    }

    #contact-text p {
        font-size: 17px;
        margin-bottom: 2%;
        width: 100%;
        text-align: justify;
        display: block;
    }

    #text-video-sperator {
        height: 1%;
        width: 80%;
        margin-top: 10%;
        margin-bottom: 9%;
    }

    #media-button {
        width: 30%;
        margin: auto;
        margin-top: 7%;
    }

    #media-video {
        display: flex;
        justify-content: center;
        text-align: center;
        align-items: center;
        align-content: center;
        margin: 25px 0px;
    }

    #media-video img{
        width: 100%;
    }

    #product-img {
        display: flex;
        justify-content: center;
        text-align: center;
        align-items: center;
        align-content: center;
        max-width: 100% !important;
    }

    #iframe-video {
        width: 50vh;
        height: 30vh;
        margin-bottom: 8%;
    }


    /* -- Prices Section CSS -- */
    #lien-he {
        padding-top: 15%;
    }

    #doi-tac {
        padding-top: 15%;
    }

    #partner-content{
        margin: 10px 10px;
    }

    #product-distinctive-group{
        padding-top: 15%;
    }

    #prices-title-description {
        width: 90%;
    }

    #all-prices-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .price-container {
        width: 90%;
        margin-top: 15%;
    }

    #price-container-two {
        margin-top: 15%;
    }

    .price-container button {
        width: 35%;
    }


    /* Email Section CSS */
    #newsletter-container {
        margin-top: 10%;
    }

    #newsletter-title-description {
        width: 90%;
    }

    #email-form label {
        width: 90%;
        text-align: center;
    }

    #email {
        width: 80%;
    }


    /* Footer Section */
    footer {
        margin-top: 10%;
    }

    #footer-feature {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        margin-top: 2%;
        padding-bottom: 3%;
        padding-top: 3%;
        align-items: stretch;
    }

    #footer-feature .footer-logo {
        text-align: center;
    }

    #footer-feature .widget {
        margin-left: 50px;
        margin-bottom: 30px;
        margin-right: 50px;
    }

    #footer-content #footer-feature .footer-logo img {
        padding-top: 20px;
        width: 160px;
        padding-bottom: 40px;
    }

    #footer-content #footer-feature h3.block-title {
        color: #fff;
        font-size: 23px;
        font-weight: 600;
        margin-bottom: 20px;
    }

    #footer-content #footer-feature ul.menu li a {
        color: #e2e2e2;
        font-size: 17px;
        font-weight: 400;
        line-height: 40px;
        -webkit-transition: all 300ms;
        -o-transition: all 300ms;
        transition: all 300ms;
    }

    #footer-content #footer-feature .widget p {
        color: #e2e2e2;
        font-size: 17px;
        line-height: 40px;
    }

    #footer-content #footer-feature .widget p a {
        color: #e2e2e2;
    }

    #footer-content #footer-feature .widget .footer-support a .img-fluid {
        width: 50px;
        margin-right: 30px;
    }
    #location-icon {
        width: 5%;
    }
    #contact-icon{
        width: 5%;
    }
}

@media only screen and (min-width: 860px) and (max-width: 1280px) {
    /* Navigation CSS */
    .css-chi-nhanh{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    #header {
        background: white;
        position: fixed;
        display: flex;
        flex-wrap: wrap;
        flex-flow: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        min-height: 60px;
        margin: auto;
    }

    #normal-header {
        display: none;
    }

    #responsive-header {
        display: flex;
        flex-flow: column;
        width: 100%;
        margin: auto;
    }

    #responsive-logo-button {
        display: flex;
        justify-content: space-between;
        /* padding: 1% 0 1% 0; */
    }

    #responsive-nav-bar {
        display: flex;
        flex-flow: column;
        align-items: center;
    }

    #responsive-nav-bar ul {
        list-style: none;
    }

    #product-distinctive {
        display: flex;
        flex-direction: column;
        width: 75%;
        padding: 0% 2% 3% 2%;
        /* background-color: #f5f5f5; */
        border-radius: 10px;
    }

    #product-distinctive-text {
        display: flex;
        flex-flow: column;
        align-items: center;
        width: 90%;
        height: auto;
        margin: 5% 2%;
        padding: 3% 5% 3% 5%;
        background-color: #f5f5f5;
        border-radius: 20px;
    }

    #responsive-nav-bar li {
        text-align: center;
        font-size: 23px;
        margin-top: 20%;
    }

    #responsive-first-item {
        margin-top: 0;
        padding: 0;
    }

    #header-img-black {
        margin-left: 5%;
        margin-top: 10%;
        width: 50%;
        width: 60px;
        height: auto;
    }

    #dropdown-button-black {
        display: block;
        width: 25%;
        height: auto;
        margin: 0;
        padding: 0;
    }


    #image-button-black {
        border: none;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: inherit;
        padding: 2%;
    }

    #contact-text-container {
        display: flex;
        flex-wrap: wrap;
        flex-flow: row;
        width: 75%;
        padding: 1% 2% 3% 2%;
        /* background-color: #f5f5f5; */
        border-radius: 10px;
        flex-direction: column;
    }

    #contact-partner-container{
        display: flex;
        flex-wrap: wrap;
        width: 75%;
        padding: 3% 2% 3% 2%;
        /* background-color: #f5f5f5; */
        border-radius: 10px;
        justify-content: space-around;
        height: 550px;
        overflow: scroll;
        margin: 40px 0;
    }

    #contact-text {
        display: flex;
        flex-flow: column;
        align-items: flex-start;
        width: 100%;
        height: auto;
        margin-top: 30px;
    }

    #video {
        width: 45vh;
        height: 25vh;
    }

    #background-video {
        width: 45vh;
        height: 25vh;
    }

    /* Hero CSS */
    #trang-chu {
        /*width: auto;*/
        /*height: 120vh;*/
        /* trang-chu flexbox */
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        top: 0;
        left: 0;
        /* Texy style */
        text-align: center;
        color: white;
        content: '';
        /* Background image */
        background-image: linear-gradient(rgb(0 0 0 / 50%), rgb(0 0 0 / 0%)), url(../img/banner-home-1.png);
        background-size: cover;
        /*background-position: center center;*/
        /*background-repeat: no-repeat;*/
        /*background-attachment: fixed;*/
    }

    #banner-product-detail {
        /*width: auto;*/
        height: 70vh;
        /* trang-chu flexbox */
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        /* Texy style */
        text-align: center;
        color: white;
        /* Background image */
        background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/product-banner-6.png);
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        /*background-attachment: fixed;*/
    }

    #hero-title {
        font-size: 1.4em;
    }

    #hero-text {
        font-size: 1em;
        margin-top: 2%;
    }

    #hero-button {
        border: solid 2px white;
        background-color: inherit;
        color: white;
        margin-top: 6%;
        width: 25%;
        height: 55px;
        font-size: 15px;
        border-radius: 10px;
    }

    #hero-button:hover {
        cursor: pointer;
    }

    /* Service Features CSS */
    #giai-phap {
        margin-top: 5%;
        padding: 2%;
        padding-top: 15%;
    }

    #service-features {
        display: flex;
        flex-flow: row;
        /* Change flow-direction to "column" in the responsive design for the features to stack
        one on top of another. */
        justify-content: space-around;
        flex-wrap: wrap;
        align-items: center;
        margin-top: 2%;
    }

    #features-description {
        width: 90%;
    }

    #feature {
        width: 30%;
        text-align: center;
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
        border: solid 1px #bebebe;
        box-shadow: 1px 2px 15px #bebebe;
        margin-top: 10%;
    }

    #feature-button {
        border: none;
        margin-top: 30%;
        width: 10vh;
        height: 3vh;
        border-radius: 15px;
        background-color: #ff5a6e;
        color: white;
        font-size: 16px;
        margin-bottom: 20%;
    }

    /* Presentation Section CSS */
    #san-pham {
        margin-top: 5%;
        width: 80%;
        margin: auto;
        padding-top: 15%;
    }

    #presentation-title-description {
        width: 90%;
    }

    #section-buttons {
        margin-top: 5%;
    }

    #section-content-container {
        margin: auto;
        width: 90%;
    }

    #section-content-container {
        margin-top: 7%;
    }

    .product-button {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        width: 40%;
        padding: 15px;
        white-space: nowrap;
    }

    .product-content {
        display: flex;
        flex-flow: column;
        padding: 2%;
    }

    #content-image {
        width: 100%;
        height: 100%;
    }

    #content-image-container {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    #content-title-text {
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: flex-start;
        width: 100%;
        margin: auto;
        margin-top: 5%;
        margin-bottom: 5%;
    }

    #content-title-text h1 {
        margin: auto;
        font-size: 25px;
    }

    #features-description h1 {
        font-size: 25px;
    }

    #prices-title-description h1{
        font-size: 25px;
    }

    #presentation-title-description h1 {
        font-size: 25px;
    }

    #media-title-description h1 {
        font-size: 25px;
    }

    #centered-product-description {
        text-align: center;
    }

    #content-title-text p {
        margin-top: 5%;
        font-size: 15px;
    }

    #feature p{
        font-size: 15px;
    }

    #features-description p{
        font-size: 15px;
    }

    #contact-text p {
        font-size: 17px;
        margin-bottom: 2%;
        width: 100%;
        text-align: justify;
        display: block;
    }

    #product-feature-image {
        justify-content: center;
        align-items: center;
        width: 8%;
    }

    #partner-feature-image {
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    .product-features-list {
        margin-top: 0;
        align-items: center;
    }

    .product-features-list p{
        width: 290px;
        overflow: hidden;
        display: -webkit-box;
    }

    #first-feature-list {
        margin-top: 0;
    }

    #content-button {
        margin: auto;
        margin-top: 10%;
        width: 35%;
    }

    /* -- Media Section CSS -- */
    #ve-chung-toi {
        margin-top: 5%;
        padding-top: 5%;
    }

    #co-cau-to-chuc-cong-ty {
        margin-top: 5%;
        padding-top: 5%;
    }

    #san-pham-detail {
        margin-top: 0;
    }

    #media-title-description {
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 100%;
        margin-top: 8%;
    }

    #product-title-description-detail {
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 90%;
        margin-top: 15%;
    }

    #product-title-description-detail h1 {
        font-size: 45px;
    }

    #media-video-text-container {
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
        width: 90%;
        padding: 2% 1% 2% 1%;
        margin-top: 5%;
        text-align: center;
    }

    #product-text-container-detail {
        display: flex;
        flex-flow: column;
        justify-content: center;
        /*align-items: center;*/
        width: 90%;
        padding: 2% 1% 0% 1%;
        margin-top: 5%;
        text-align: center;
    }

    #media-text {
        width: 100%;
    }

    .tam-nhin-su-menh{
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
    }

    .tam-nhin, .su-menh, .nguyen-tac-kinh-doanh{
        width: 100%;
    }

    #media-text h2 {
        margin: auto;
        font-size: 23px;
    }

    #media-text p {
        margin-top: 1%;
        text-align: justify;
        margin-bottom: 2%;
        font-size: 15px;
    }

    #partner-icon{
        width: 3% !important;
    }

    #media-title-description p{
        width: 80%;
        font-size: 15px;
    }

    #product-text {
        width: 100%;
    }

    #product-text h2 {
        margin: auto;
    }

    #product-text p {
        margin-top: 6%;
        text-align: justify;
    }

    #text-video-sperator {
        height: 1%;
        width: 80%;
        margin-top: 10%;
        margin-bottom: 9%;
    }

    #media-button {
        width: 35%;
        margin: auto;
        margin-top: 7%;
        font-size: 25px;
    }

    #media-video {
        display: flex;
        justify-content: center;
        text-align: center;
        align-items: center;
        align-content: center;
        margin: 25px 0px;
    }

    #media-video img{
        width: 100%;
    }

    #product-img {
        display: flex;
        justify-content: center;
        text-align: center;
        align-items: center;
        align-content: center;
        max-width: 100% !important;
    }

    #iframe-video {
        width: 80vh;
        height: 50vh;
        margin-bottom: 9%;
    }


    /* -- Prices Section CSS -- */
    #lien-he {
        padding-top: 15%;
    }

    #doi-tac {
        padding-top: 15%;
    }

    #partner-content{
        margin: 10px 10px;
    }

    #product-distinctive-group{
        padding-top: 15%;
    }

    #prices-title-description {
        width: 90%;
    }

    #all-prices-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .price-container {
        width: 50%;
        margin-top: 15%;
    }

    #price-container-two {
        margin-top: 15%;
    }

    .price-container button {
        width: 35%;
    }

    /* Email Section CSS */
    #newsletter-container {
        margin-top: 10%;
    }

    #newsletter-title-description {
        width: 90%;
    }

    #email-form label {
        width: 90%;
        text-align: center;
    }

    #email {
        width: 80%;
    }

    .footer-container {
        margin-top: 15%;
    }

    #footer-feature {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        margin-top: 2%;
        padding-bottom: 3%;
        padding-top: 3%;
        align-items: stretch;
    }

    #footer-feature .footer-logo {
        text-align: center;
    }

    #footer-feature .widget {
        margin-left: 50px;
        margin-bottom: 30px;
        margin-right: 50px;
    }

    #footer-content #footer-feature .footer-logo img {
        padding-top: 20px;
        width: 160px;
        padding-bottom: 40px;
    }

    #footer-content #footer-feature h3.block-title {
        color: #fff;
        font-size: 23px;
        font-weight: 600;
        margin-bottom: 20px;
    }

    #footer-content #footer-feature ul.menu li a {
        color: #e2e2e2;
        font-size: 17px;
        font-weight: 400;
        line-height: 40px;
        -webkit-transition: all 300ms;
        -o-transition: all 300ms;
        transition: all 300ms;
    }

    #footer-content #footer-feature .widget p {
        color: #e2e2e2;
        font-size: 17px;
        line-height: 60px;
    }

    #footer-content #footer-feature .widget p a {
        color: #e2e2e2;
    }

    #footer-content #footer-feature .widget .footer-support a .img-fluid {
        width: 50px;
        margin-right: 30px;
    }
}
@media only screen and (min-width: 760px) and (max-width: 1180px){
    #partner-icon {
        width: 6% !important;
    }
    #correct-icon {
        width: 50%;
    }
    #content-title-text{
        align-items: center;
    }
    .product-features-list{
        justify-content: center;
    }
    #inside-features-title-text{
        margin-left: 0;
    }
    .css-chi-nhanh{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
}


/* HynLabs horizontal wordmark */
#header-img, #header-img-detail { width: 184px; height: 46px; object-fit: contain; margin-left: 0; }
#header-img-black { width: 160px; height: 40px; object-fit: contain; margin: 10px 0 10px 16px; }
#footer-content #footer-feature .footer-logo img { width: 220px; height: auto; }
@media (max-width: 480px) { #header-img-black { width: 144px; height: 36px; } }