/* ----- PHẦN NỘI DUNG LOCATION---- */

.Quality-section {
  padding: 20px 20px;
  text-align: center;
  overflow: hidden;
  margin: 2em;
  position: relative;
  display: flex;
  flex-direction: column; /* Xếp các con (p, img) theo chiều dọc */
  align-items: center;

}

/* Các icon trang trí nền */
.bg-icon-quality {
  position: absolute;
  opacity: 0.05;
  z-index: 0;
  width: 250px;
  height: auto;
}
.cupcake { 
    bottom: 30px; left: 30px; width: 9vw; height: auto;
    transform: rotate(10deg);
}
.donut { top: 25px; left: 50px; width: 15vw; height: auto; 
    transform: rotate(40deg);
}
.creamcake { 
    top: 50px; right: 50px; width: 20vw; height: auto; 
    transform: rotate(-60deg);
}

.wheat{
    max-width: 10%;
    height: auto;
    
}
    
.Quality-section blockquote:first-of-type {
    font-size: 4em;
    font-weight: 600;
    position: relative;
    display: inline-block;
    padding: 0.2em 0.5em;
}


.Quality-content{
    display: flex;
    flex-direction: column; /* Xếp các con (p, img) theo chiều dọc */
    align-items: center;
}
.Quality-content p:first-of-type{
    font-size: 2em;
    max-width: 30em;
    line-height: 1.4;
    letter-spacing: 0.1rem;
    margin-top: 0;
    color: #555;
}

.flour{
    position: absolute;
    max-width: 20%;
    height: auto;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    opacity: 0.1; 
    pointer-events: none;
}

.crafted-text::before {
  content: "";
  position: absolute;

  /* Kích thước của góc */
  width: 20px;  /* Chiều dài cạnh ngang */
  height: 20px; /* Chiều dài cạnh dọc */

  /* Vị trí: Đặt ở góc 0,0 của padding */
  top: 0;
  right: 0;

  /* Vẽ đường viền */
  border-top: 5px solid black;   /* Nét trên (điều chỉnh độ dày và màu) */
  border-right: 5px solid black; /* Nét phải */
}

/* 5. TẠO GÓC DƯỚI BÊN TRÁI */
.crafted-text::after {
  content: "";
  position: absolute;

  /* Kích thước của góc */
  width: 20px;
  height: 20px;

  /* Vị trí: Đặt ở góc 0,0 của padding */
  bottom: 0;
  left: 0;

  /* Vẽ đường viền */
  border-bottom: 5px solid black; /* Nét dưới */
  border-left: 5px solid black;  /* Nét trái */
}
@media (max-width: 768px) {

    /* 1. Giảm padding cho cả section */
    .Quality-section {
        padding: 0;
    }

    /* 2. Ẩn các icon trang trí nền cho gọn */
    .bg-icon-quality {
        display: none;
    }

    /* 3. Giảm cỡ chữ của Trích dẫn */
    .Quality-section blockquote:first-of-type {
        font-size: 2.5em; /* Giảm từ 4em */
    }

    /* 4. Giảm cỡ chữ của Đoạn văn */
    .Quality-content p:first-of-type {
        font-size: 1.25em; /* Giảm từ 2em */
    }

    /* 5. Giảm kích thước dấu ngoặc vuông */
    .crafted-text::before,
    .crafted-text::after {
        width: 15px;
        height: 15px;
        border-width: 3px; /* Mỏng hơn một chút */
    }

}