* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}

html {
     width: 100%;
     height: 100%;
     font-family: "Courier New", Courier, monospace;
}

/* ========================================
   HOME
======================================== */

body.home-page {
     width: 100%;
     height: 100%;
     margin: 0;
     overflow: hidden;
     background: url("images/bg.png") center center / cover no-repeat;
     position: relative;
}


/* ========================================
   SUB PAGE
======================================== */

body.sub-page {
     width: 100%;
     min-height: 100vh;
     margin: 0;
     overflow-x: hidden;
     overflow-y: auto;
     background-color: #e2d6c1;
     position: relative;
}

/* =========================
   HEADER
========================= */

.header {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 90px;
     padding: 20px 40px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     z-index: 10;
}

/* =========================
   LOGO
========================= */

.logo {
     display: flex;
     align-items: center;
     color: #3f2804;
     text-decoration: none;
     font-family: "Courier New", Courier, monospace;
     font-size: 20px;
     font-weight: bold;
     letter-spacing: 3px;
     white-space: nowrap;
     transition: opacity .3s ease;
}

.logo:hover {
     opacity: .75;
}

/* =========================
   MENU
========================= */

.menu {
     display: flex;
     align-items: center;
     gap: 32px;
}

.menu a {
     position: relative;
     color: #4d3104;
     text-decoration: none;
     font-size: 16px;
     letter-spacing: 3px;
     text-transform: uppercase;
     transition: color .3s ease, opacity .3s ease;
}

.menu a::after {
     content: "";
     position: absolute;
     left: 0;
     bottom: -7px;
     width: 0;
     height: 1px;
     background: #c7b08a;
     transition: width .3s ease;
}

.menu a:hover {
     color: #c7b08a;
}

.menu a:hover::after {
     width: 100%;
}

/* =========================
   CENTER
========================= */

.center {
     position: absolute;
     inset: 0;
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 2;
}

.title-box {
     text-align: center;
     color: #a06518;
     text-shadow: 0 2px 8px rgba(99, 99, 99, 0.8);
}

.title {
     font-size: clamp(28px, 5vw, 72px);
     letter-spacing: 10px;
     text-transform: uppercase;
     animation: fadeIn 2s ease;
}

.line {
     width: 180px;
     max-width: 60vw;
     height: 2px;
     margin: 22px auto 0;
     background: #c7b08a;
     opacity: .75;
     animation: grow 2s ease;
}

/* =========================
   ANIMATION
========================= */

@keyframes fadeIn {

     from {
          opacity: 0;
          transform: translateY(20px);
     }

     to {
          opacity: 1;
          transform: translateY(0);
     }
}

@keyframes grow {

     from {
          width: 0;
          opacity: 0;
     }

     to {
          width: 180px;
          opacity: .75;
     }
}


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

@media (max-width: 700px) {

     .header {
          height: auto;
          padding: 18px 20px;
          align-items: flex-start;
     }

     .logo img {
          max-width: 110px;
          max-height: 45px;
     }

     .menu {
          gap: 15px;
          flex-wrap: wrap;
          justify-content: flex-end;
     }

     .menu a {
          font-size: 11px;
          letter-spacing: 1.5px;
     }

     .title {
          letter-spacing: 5px;
     }
}

/* =========================================================================================== */

/* ========================================
   PAGE
======================================== */

.page {
     position: relative;
     width: 100%;
     min-height: 100vh;
     padding-top: 70px;
}

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

.page-heading {
     text-align: center;
     padding: 40px 20px 40px;
}

.page-heading h1 {
     margin: 0;
     color: #a06518;
     font-size: clamp(42px, 7vw, 60px);
     font-weight: normal;
     letter-spacing: 12px;
     text-transform: uppercase;
     text-shadow: 0 2px 8px rgba(99, 99, 99, 0.8);
     animation: fadeIn 1.5s ease;
}

.page-line {
     width: 180px;
     height: 2px;
     margin: 25px auto 0;
     background: #c7b08a;
     opacity: .75;
     animation: grow 1.5s ease;
}

/* ========================================
   CONTENT SECTIONS
======================================== */

.content-section {
     width: min(1400px, 90%);
     margin: 0 auto 50px;
     display: grid;
     grid-template-columns: 1fr 1fr;
     min-height: 500px;
     align-items: stretch;
}

/* TEXT */

.section-text {
     display: flex;
     flex-direction: column;
     justify-content: center;
     padding: 70px;
     background: rgba(0, 0, 0, .18);
     border: 1px solid rgba(199, 176, 138, .15);
}

.section-text h2 {
     margin-bottom: 30px;
     color: #fff;
     font-size: clamp(28px, 3vw, 46px);
     font-weight: normal;
     letter-spacing: 4px;
     text-transform: uppercase;
}

.section-text p {
     color: #000;
     font-size: 17px;
     line-height: 1.9;
     letter-spacing: 1px;
}

/* IMAGE */

.section-image {
     min-height: 500px;
     overflow: hidden;
}

.section-image img {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform .8s ease;
}

.content-section:hover .section-image img {
     transform: scale(1.04);
}

/* ========================================
   REVERSE SECTION
======================================== */

.content-section.reverse {
     grid-template-columns: 1fr 1fr;
}

.content-section.reverse .section-image {
     order: 1;
}

.content-section.reverse .section-text {
     order: 2;
}


/* ========================================
   QUOTE
======================================== */

.content-quote {
     width: min(1000px, 85%);
     margin: 20px auto 50px;
     text-align: center;
     padding: 30px 30px;
}

.content-quote blockquote {
     margin: 0;
     color: #5a4303;
     font-size: clamp(22px, 3vw, 18px);
     line-height: 1.7;
     font-style: italic;
     letter-spacing: 2px;
}

.content-quote cite {
     display: block;
     margin-top: 30px;
     color: #888;
     font-size: 14px;
     letter-spacing: 3px;
     font-style: normal;
}

/* ========================================
   FOOTER
======================================== */

#siteFooter {
     background: rgba(0, 0, 0, .55);
     border-top: 1px solid rgba(199, 176, 138, .2);
     padding: 70px 6% 30px;
     color: #bbb;
}

.footer-content {
     max-width: 1400px;
     margin: auto;
     display: grid;
     grid-template-columns: 1fr 1fr 1.2fr;
     gap: 60px;
}

.footer-column h3 {
     margin-bottom: 25px;
     color: #c7b08a;
     font-size: 18px;
     font-weight: normal;
     letter-spacing: 3px;
     text-transform: uppercase;
}

.footer-column p {
     color: #999;
     line-height: 1.8;
     font-size: 14px;
     padding-bottom: 30px;
}

.footer-links {
     display: flex;
     flex-direction: column;
     gap: 12px;
}

.footer-links a {
     color: #fff;
     text-decoration: none;
     font-size: 14px;
     transition: color .3s ease;
}

.footer-links a:hover {
     color: #c7b08a;
}

/* SOCIAL */

.social-links {
     display: flex;
     gap: 20px;
     flex-wrap: wrap;
}

.social-links a {
     color: #aaa;
     text-decoration: none;
     font-size: 14px;
     letter-spacing: 1px;
     transition: color .3s ease;
}

.social-links a:hover {
     color: #fff;
}

/* TIKTOK */

.tiktok-box {
     width: 100%;
     min-height: 300px;
     overflow: hidden;
}

.tiktok-box blockquote {
     margin: 0 !important;
}

/* FACEBOOK */

.facebook-box {
     width: 100%;
     min-height: 300px;
     overflow: hidden;
}

/* COPYRIGHT */

.footer-bottom {
     max-width: 1400px;
     margin: 60px auto 0;
     padding-top: 25px;
     border-top: 1px solid rgba(255, 255, 255, .08);
     text-align: center;
     color: #fff;
     font-size: 12px;
     letter-spacing: 1px;
}

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

@media (max-width: 800px) {

     .page {
          padding-top: 110px;
     }

     .page-heading {
          padding-bottom: 70px;
     }

     .page-heading h1 {
          letter-spacing: 6px;
     }

     .content-section,
     .content-section.reverse {
          width: 92%;
          grid-template-columns: 1fr;
          margin-bottom: 80px;
     }

     .section-text {
          padding: 40px 25px;
          order: 2 !important;
     }

     .section-image {
          min-height: 350px;
          order: 1 !important;
     }

     .content-quote {
          margin-bottom: 80px;
     }

     .footer-content {
          grid-template-columns: 1fr;
          gap: 40px;
     }
}

/* ========================================
   FEEDBACK LIST
======================================== */

.feedback-list {
     width: min(1300px, 90%);
     margin: 0 auto;
}


/* ========================================
   FEEDBACK ITEM
======================================== */

.feedback-item {
     display: grid;
     grid-template-columns: 35% 65%;
     min-height: 400px;
     margin-bottom: 80px;
     background: rgba(0, 0, 0, .15);
}

/* ========================================
   PHOTO
======================================== */

.feedback-photo {
     width: 100%;
     height: 100%;
     min-height: 400px;
     overflow: hidden;
}

.feedback-photo img {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform .8s ease;
}

.feedback-item:hover .feedback-photo img {
     transform: scale(1.04);
}

/* ========================================
   CONTENT
======================================== */

.feedback-content {
     padding: 30px 30px;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
}

/* ========================================
   MESSAGE
======================================== */

.feedback-messages {
     width: 100%;
     display: flex;
     flex-direction: column;
     gap: 25px;
}

.feedback-message {
     width: 100%;
}

/* TÊN */

.feedback-name {
     margin-left: 20px;
     margin-bottom: 6px;
     color: #644105;
     font-size: 16px;
     letter-spacing: 1px;
     line-height: 1.5;
}

/* NỘI DUNG */

.feedback-data {
     color: #fff;
     font-size: 18px;
     line-height: 1.9;
     letter-spacing: 1px;
     text-align: justify;
}

/* ========================================
   PAGINATION
======================================== */

.feedback-pagination {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 8px;
     margin: 20px auto 100px;
}

.feedback-pagination button {
     width: 36px;
     height: 36px;
     border: 1px solid rgba(199, 176, 138, .35);
     background: transparent;
     color: #999;
     cursor: pointer;
     font-family:
          "Courier New",
          Courier,
          monospace;
}

.feedback-pagination button:hover,
.feedback-pagination button.active {
     background: #c7b08a;
     border-color: #c7b08a;
     color: #111;
}

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

@media (max-width: 800px) {

     .feedback-list {
          width: 92%;
     }

     .feedback-item {
          grid-template-columns: 1fr;
          margin-bottom: 60px;
     }

     .feedback-photo {
          min-height: 300px;
          height: 300px;
     }

     .feedback-content {
          padding: 35px 25px;
     }

     .feedback-content h2 {
          font-size: 24px;
     }

     .feedback-messages p {
          font-size: 14px;
     }

}

/* ========================================
   CONTACT
======================================== */

.contact-section {
     width: min(1200px, 90%);
     margin: 0 auto 140px;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 80px;
}


/* ========================================
   INFORMATION
======================================== */

.contact-info {
     padding: 40px 0;
}

.contact-info h2 {
     margin-bottom: 30px;
     color: #644105;
     font-size: clamp(30px, 4vw, 48px);
     font-weight: normal;
     letter-spacing: 5px;
     text-transform: uppercase;
}

.contact-intro {
     max-width: 550px;
     margin-bottom: 55px;
     color: #000;
     font-size: 16px;
     line-height: 1.9;
     letter-spacing: 1px;
     text-align: justify;
}

/* ========================================
   CONTACT INFO
======================================== */

.contact-information {
     display: flex;
     flex-direction: column;
     gap: 30px;
}

.contact-info-item {
     padding-bottom: 20px;
     border-bottom: 1px solid rgba(199, 176, 138, .15);
}

.contact-info-label {
     margin-bottom: 8px;
     color: #777;
     font-size: 12px;
     letter-spacing: 3px;
     text-transform: uppercase;
}

.contact-info-item a {
     color: #644105;
     text-decoration: none;
     font-size: 16px;
     transition: color .3s ease;
}

.contact-info-item a:hover {
     color: #fff;
}

/* ========================================
   FORM
======================================== */

.contact-form-box {
     padding: 45px;
     background: rgba(0, 0, 0, .18);
     border: 1px solid rgba(199, 176, 138, .15);
}

.contact-field {
     margin-bottom: 25px;
}

.contact-field label {
     display: block;
     margin-bottom: 10px;
     color: #c7b08a;
     font-size: 12px;
     letter-spacing: 3px;
     text-transform: uppercase;
}

.contact-field input,
.contact-field textarea {
     width: 100%;
     padding: 14px 15px;
     background: rgba(0, 0, 0, .25);
     border: 1px solid rgba(199, 176, 138, .2);
     outline: none;
     color: #eee;
     font-family: "Courier New", Courier, monospace;
     font-size: 14px;
     transition: border-color .3s ease, background .3s ease;
}

.contact-field input {
     height: 48px;
}

.contact-field textarea {
     min-height: 180px;
     resize: vertical;
     line-height: 1.7;
}

.contact-field input:focus,
.contact-field textarea:focus {
     border-color: #c7b08a;
     background: rgba(0, 0, 0, .35);
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
     color: #666;
}


/* ========================================
   BUTTON
======================================== */

.contact-submit {
     width: 100%;
     height: 50px;
     border: 1px solid #c7b08a;
     background: #644105;
     color: #c7b08a;
     cursor: pointer;
     font-family: "Courier New", Courier, monospace;
     font-size: 13px;
     letter-spacing: 3px;
     text-transform: uppercase;
     transition: background .3s ease, color .3s ease;
}

.contact-submit:hover {
     background: #c7b08a;
     color: #111;
}

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

@media (max-width: 800px) {
     .contact-section {
          width: 92%;
          grid-template-columns: 1fr;
          gap: 50px;
          margin-bottom: 80px;
     }

     .contact-info {
          padding: 0;
     }

     .contact-form-box {
          padding: 30px 20px;
     }

}

/* ========================================
   COLLECTION GRID
======================================== */

.collection-grid {
     width: min(1500px, 94%);
     margin: 0 auto 60px;
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 40px 30px;
}

/* ========================================
   ITEM
======================================== */

.collection-item {
     width: 100%;
     cursor: pointer;
     background: rgba(0, 0, 0, .12);
     border: 1px solid rgba(199, 176, 138, .15);
     transition: transform .3s ease, border-color .3s ease, background .3s ease;
}

.collection-item:hover {
     transform: translateY(-5px);
     border-color:rgba(199, 176, 138, .4);
     background:rgba(0, 0, 0, .22);
}


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

.collection-image {
     width: 100%;
     /*
          Hình cao hơn một chút
          thay vì vuông
     */
     aspect-ratio: 4 / 3;
     overflow: hidden;
}

.collection-image img {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform .5s ease;
}

.collection-item:hover
.collection-image img {
     transform: scale(1.04);
}

/* ========================================
   INFO
======================================== */

.collection-info {
     padding: 20px 22px 24px;
}

.collection-info h2 {
     margin: 0 0 10px;
     color: #644105;
     font-size: 18px;
     font-weight: normal;
     letter-spacing: 2px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
}

.collection-info p {
     margin: 0;
     color: #3e3e3e;
     font-size: 14px;
     line-height: 1.7;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
}

/* ========================================
   PAGINATION
======================================== */

.collection-pagination {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 8px;
     margin: 30px auto 100px;
}

.collection-pagination button {
     width: 38px;
     height: 38px;
     border:1px solid rgba(199, 176, 138, .35);
     background: transparent;
     color: #999;
     cursor: pointer;
     font-family: "Courier New", Courier, monospace;
     transition: .3s ease;
}

.collection-pagination button:hover {
     color: #fff;
     border-color: #c7b08a;
}

.collection-pagination button.active {
     color: #111;
     background: #c7b08a;
     border-color: #c7b08a;
}

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

@media (max-width: 1000px) {

     .collection-grid {
          width: 92%;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 30px 20px;
     }

}

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

@media (max-width: 600px) {

     .collection-grid {
          width: 92%;

          grid-template-columns: 1fr;

          gap: 25px;
     }


     .collection-image {
          aspect-ratio: 4 / 3;
     }


     .collection-info {
          padding: 16px 18px 20px;
     }


     .collection-info h2 {
          font-size: 16px;
     }


     .collection-info p {
          font-size: 13px;
     }

}

/* ========================================
   COLLECTION DETAIL
======================================== */

.collection-detail {
     width: min(1000px, 90%);
     margin: 0 auto 120px;
}

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

.collection-detail-image {
     width: 100%;
     margin-bottom: 45px;
     overflow: hidden;
}

.collection-detail-image img {
     display: block;
     width: 100%;
     max-height: 700px;
     object-fit: cover;
     margin: 0 auto;
}

/* ========================================
   DOCUMENT CONTENT
======================================== */

.collection-detail-content {
     width: 100%;
     padding: 0 20px;
}

.collection-detail-content h2 {
     margin: 0 0 30px;
     color: #cb990d;
     font-size: clamp(28px, 4vw, 48px);
     font-weight: normal;
     letter-spacing: 4px;
     text-align: center;
}

.collection-detail-description {
     margin: 0 auto 35px;
     max-width: 850px;
     color: #434242;
     font-size: 16px;
     line-height: 1.9;
     text-align: justify;
}

.collection-detail-text {
     display: flex;
     flex-direction: column;
     gap: 0px;
     max-width: 850px;
     margin: 0 auto;
}

.collection-detail-text p {
     margin: 0;
     color: #000000;
     font-size: 15px;
     line-height: 2;
     text-align: justify;
}

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

@media (max-width: 800px) {
     .collection-detail {
          width: 92%;
          margin-bottom: 80px;
     }

     .collection-detail-image {
          margin-bottom: 30px;
     }

     .collection-detail-image img {
          max-height: 500px;
     }

     .collection-detail-content {
          padding: 0;
     }

     .collection-detail-content h2 {
          font-size: 26px;
          letter-spacing: 2px;
     }

     .collection-detail-description,
     .collection-detail-text p {
          font-size: 14px;
          line-height: 1.8;
     }

}