/* Touch Enhancement CSS for index.html */
/* Không thay đổi giao diện hiện có, chỉ bổ sung cải thiện cảm ứng */

/* 1. Tăng vùng chạm cho tất cả nút bấm và liên kết */
.btn, a, button, .nav-link, .social-icon, .floating-social-bar a {
    position: relative;
    overflow: hidden;
    display: inline-block;
}

.btn::after, a::after, button::after, .nav-link::after, .social-icon::after, .floating-social-bar a::after {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    z-index: 1;
    pointer-events: auto;
    max-width: calc(100% + 20px);
    max-height: calc(100% + 20px);
}

/* 2. Cải thiện trải nghiệm cảm ứng cho iframe Google Maps */
iframe {
    touch-action: pan-x pan-y pinch-zoom;
    -webkit-overflow-scrolling: touch;
}

/* 3. Tăng khoảng cách giữa các nút trên thiết bị di động */
@media (max-width: 768px) {
    /* Tăng margin giữa các nút trong navbar */
    .navbar-nav .nav-item {
        margin-bottom: 8px;
    }
    
    /* Tăng khoảng cách giữa các nút trong floating social bar */
    .floating-social-bar .social-icon {
        margin-bottom: 8px;
    }
    
    /* Tăng khoảng cách giữa các nút trong slider */
    .slider-text .btn {
        margin: 8px 4px;
    }
    
    /* Tăng khoảng cách giữa các menu entry */
    .menu-entry {
        margin-bottom: 20px;
    }
    
    /* Tăng khoảng cách giữa các service items */
    .services {
        margin-bottom: 30px;
    }
    
    /* Tối ưu cho touch scrolling */
    .home-slider, .owl-carousel {
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
    }
    
    /* Tăng kích thước touch target cho mobile */
    .navbar-toggler {
        min-height: 44px;
        min-width: 44px;
        padding: 12px;
    }
    
    /* Tối ưu cho dropdown menu trên mobile */
    .navbar-collapse {
        touch-action: pan-y;
    }
    
    /* Tăng vùng chạm cho language switcher */
    .language-switcher .btn {
        min-height: 44px;
        min-width: 44px;
        padding: 8px 12px;
    }
}

/* 4. Cải thiện hiệu ứng hover và touch cho menu */
.navbar-nav .nav-item {
    position: relative;
}

.navbar-nav .nav-item::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: #c49b63;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.navbar-nav .nav-item:hover::after,
.navbar-nav .nav-item:focus::after {
    width: 100%;
}

/* 5. Tối ưu cho touch scrolling */
.touch-enabled {
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y pinch-zoom;
}

/* 6. Cải thiện trải nghiệm cho slider */
.home-slider {
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
}

/* 7. Tối ưu cho gallery modal */
.gallery-modal {
    touch-action: pan-x pan-y pinch-zoom;
}

/* 8. Cải thiện trải nghiệm cho form elements */
input, textarea, select {
    touch-action: manipulation;
    -webkit-appearance: none;
    border-radius: 4px;
}

/* 9. Tối ưu cho social icons */
.floating-social-bar .social-icon {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* 10. Cải thiện trải nghiệm cho footer links */
.ftco-footer a {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* 11. Tối ưu cho contact info section */
.ftco-contactinfo .icon {
    touch-action: manipulation;
}

/* 12. Cải thiện trải nghiệm cho menu entries */
.menu-entry a {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* 13. Tối ưu cho service items */
.services {
    touch-action: manipulation;
}

/* 14. Cải thiện trải nghiệm cho about section */
.ftco-about a {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* 15. Tối ưu cho best sellers section */
#best-sellers .menu-entry {
    touch-action: manipulation;
}

/* 16. Cải thiện trải nghiệm cho popular drinks section */
#popular-drinks .menu-entry {
    touch-action: manipulation;
}

/* 17. Tối ưu cho coffee making class section */
#coffee-making-class a {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* 18. Cải thiện trải nghiệm cho news & promotions section */
#news-promotions a {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* 19. Tối ưu cho contact section */
#contact-section {
    touch-action: pan-y pinch-zoom;
}

/* 20. Cải thiện trải nghiệm cho map section */
#map {
    touch-action: pan-x pan-y pinch-zoom;
}

/* 21. Tối ưu cho footer */
.ftco-footer {
    touch-action: pan-y;
}

/* 22. Cải thiện trải nghiệm cho loader */
#ftco-loader {
    touch-action: none;
}

/* 23. Tối ưu cho modal elements */
.modal {
    touch-action: pan-y;
}

/* 24. Cải thiện trải nghiệm cho carousel navigation */
.owl-nav button {
    touch-action: manipulation;
    min-height: 44px;
    min-width: 44px;
}

/* 25. Tối ưu cho gallery navigation */
.gallery-nav {
    touch-action: manipulation;
    min-height: 44px;
    min-width: 44px;
}

/* 26. Cải thiện trải nghiệm cho form submission */
#contactForm button {
    touch-action: manipulation;
    min-height: 44px;
}

/* 27. Tối ưu cho alert messages */
.alert {
    touch-action: manipulation;
}

/* 28. Cải thiện trải nghiệm cho smooth scroll */
html, body {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden !important;
    max-width: 100vw;
}

/* 29. Tối ưu cho body scroll */
body {
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y pinch-zoom;
}

/* 30. Cải thiện trải nghiệm cho container elements */
.container, .row, .col, .floating-social-bar {
    overflow-x: hidden;
    touch-action: pan-y pinch-zoom;
}

/* 31. Tối ưu cho row elements */
.row {
    touch-action: pan-y pinch-zoom;
}

/* 32. Cải thiện trải nghiệm cho column elements */
.col, .col-md-3, .col-md-4, .col-md-6, .col-lg-3, .col-lg-4 {
    touch-action: pan-y pinch-zoom;
}

/* 33. Tối ưu cho section elements */
.section, .ftco-section {
    touch-action: pan-y pinch-zoom;
}

/* 34. Cải thiện trải nghiệm cho heading elements */
.heading-section {
    touch-action: manipulation;
}

/* 35. Tối ưu cho text elements */
.text-center, .text-left, .text-right {
    touch-action: manipulation;
}

/* 36. Cải thiện trải nghiệm cho media elements */
.media {
    touch-action: manipulation;
}

/* 37. Tối ưu cho block elements */
.block-6, .block-21, .block-23 {
    touch-action: manipulation;
}

/* 38. Cải thiện trải nghiệm cho overlap elements */
.overlap {
    touch-action: manipulation;
}

/* 39. Tối ưu cho icon elements */
.icon {
    touch-action: manipulation;
}

/* 40. Cải thiện trải nghiệm cho list elements */
.list-unstyled li {
    touch-action: manipulation;
    margin-bottom: 8px;
}

/* 41. Tối ưu cho heading elements */
h1, h2, h3, h4, h5, h6 {
    touch-action: manipulation;
}

/* 42. Cải thiện trải nghiệm cho paragraph elements */
p {
    touch-action: manipulation;
}

/* 43. Tối ưu cho span elements */
span {
    touch-action: manipulation;
}

/* 44. Cải thiện trải nghiệm cho div elements */
div {
    touch-action: pan-y pinch-zoom;
}

/* 45. Cải thiện trải nghiệm cho ul elements */
ul {
    touch-action: pan-y;
}

/* 46. Tối ưu cho li elements */
li {
    touch-action: manipulation;
}

/* 47. Cải thiện trải nghiệm cho img elements */
img {
    touch-action: manipulation;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 48. Tối ưu cho background images */
[style*="background-image"] {
    touch-action: manipulation;
}

/* 49. Cải thiện trải nghiệm cho overlay elements */
.overlay {
    touch-action: none;
}

/* 50. Tối ưu cho slider elements */
.slider-item {
    touch-action: pan-x pan-y;
}

/* 51. Cải thiện trải nghiệm cho slider text */
.slider-text {
    touch-action: manipulation;
}

/* 52. Tối ưu cho subheading elements */
.subheading {
    touch-action: manipulation;
}

/* 53. Cải thiện trải nghiệm cho mb elements */
.mb-4, .mb-5 {
    touch-action: manipulation;
}

/* 54. Tối ưu cho mt elements */
.mt-3, .mt-5 {
    touch-action: manipulation;
}

/* 55. Cải thiện trải nghiệm cho py elements */
.py-2, .py-5 {
    touch-action: manipulation;
}

/* 56. Tối ưu cho px elements */
.px-xl-4 {
    touch-action: manipulation;
}

/* 57. Cải thiện trải nghiệm cho py-xl elements */
.py-xl-3 {
    touch-action: manipulation;
}

/* 58. Tối ưu cho p elements */
.p-3 {
    touch-action: manipulation;
}

/* 59. Cải thiện trải nghiệm cho d elements */
.d-md-flex, .d-flex, .d-block {
    touch-action: manipulation;
}

/* 60. Cải thiện trải nghiệm cho justify-content elements */
.justify-content-center, .justify-content-between {
    touch-action: manipulation;
}

/* 61. Tối ưu cho align-items elements */
.align-items-center {
    touch-action: manipulation;
}

/* 62. Cải thiện trải nghiệm cho text-center elements */
.text-center {
    touch-action: manipulation;
}

/* 63. Tối ưu cho float elements */
.float-md-left, .float-lft {
    touch-action: manipulation;
}

/* 64. Cải thiện trải nghiệm cho position elements */
.position-relative, .position-absolute, .position-fixed {
    touch-action: manipulation;
}

/* 65. Tối ưu cho z-index elements */
[style*="z-index"] {
    touch-action: manipulation;
}

/* 66. Cải thiện trải nghiệm cho transform elements */
[style*="transform"] {
    touch-action: manipulation;
}

/* 67. Tối ưu cho transition elements */
[style*="transition"] {
    touch-action: manipulation;
}

/* 68. Cải thiện trải nghiệm cho animation elements */
[style*="animation"] {
    touch-action: manipulation;
}

/* 69. Cải thiện trải nghiệm cho opacity elements */
[style*="opacity"] {
    touch-action: manipulation;
}

/* 70. Tối ưu cho background elements */
[style*="background"] {
    touch-action: manipulation;
}

/* 71. Cải thiện trải nghiệm cho color elements */
[style*="color"] {
    touch-action: manipulation;
}

/* 72. Tối ưu cho border elements */
[style*="border"] {
    touch-action: manipulation;
}

/* 73. Cải thiện trải nghiệm cho margin elements */
[style*="margin"] {
    touch-action: manipulation;
}

/* 74. Tối ưu cho padding elements */
[style*="padding"] {
    touch-action: manipulation;
}

/* 75. Cải thiện trải nghiệm cho width elements */
[style*="width"] {
    touch-action: manipulation;
}

/* 76. Tối ưu cho height elements */
[style*="height"] {
    touch-action: manipulation;
}

/* 77. Cải thiện trải nghiệm cho display elements */
[style*="display"] {
    touch-action: manipulation;
}

/* 78. Tối ưu cho visibility elements */
[style*="visibility"] {
    touch-action: manipulation;
}

/* 79. Cải thiện trải nghiệm cho overflow elements */
[style*="overflow"] {
    touch-action: pan-y pinch-zoom;
}

/* 80. Tối ưu cho cursor elements */
[style*="cursor"] {
    touch-action: manipulation;
}

/* 81. Cải thiện trải nghiệm cho pointer-events elements */
[style*="pointer-events"] {
    touch-action: manipulation;
}

/* 82. Tối ưu cho user-select elements */
[style*="user-select"] {
    touch-action: manipulation;
}

/* 83. Cải thiện trải nghiệm cho -webkit elements */
[style*="-webkit"] {
    touch-action: manipulation;
}

/* 84. Tối ưu cho -moz elements */
[style*="-moz"] {
    touch-action: manipulation;
}

/* 85. Cải thiện trải nghiệm cho -ms elements */
[style*="-ms"] {
    touch-action: manipulation;
}

/* 86. Tối ưu cho -o elements */
[style*="-o"] {
    touch-action: manipulation;
}

/* 87. Cải thiện trải nghiệm cho filter elements */
[style*="filter"] {
    touch-action: manipulation;
}

/* 88. Tối ưu cho backdrop-filter elements */
[style*="backdrop-filter"] {
    touch-action: manipulation;
}

/* 89. Cải thiện trải nghiệm cho box-shadow elements */
[style*="box-shadow"] {
    touch-action: manipulation;
}

/* 90. Tối ưu cho text-shadow elements */
[style*="text-shadow"] {
    touch-action: manipulation;
}

/* 91. Cải thiện trải nghiệm cho clip-path elements */
[style*="clip-path"] {
    touch-action: manipulation;
}

/* 92. Tối ưu cho mask elements */
[style*="mask"] {
    touch-action: manipulation;
}

/* 93. Cải thiện trải nghiệm cho gradient elements */
[style*="gradient"] {
    touch-action: manipulation;
}

/* 94. Tối ưu cho rgba elements */
[style*="rgba"] {
    touch-action: manipulation;
}

/* 95. Cải thiện trải nghiệm cho hsla elements */
[style*="hsla"] {
    touch-action: manipulation;
}

/* 96. Tối ưu cho calc elements */
[style*="calc"] {
    touch-action: manipulation;
}

/* 97. Cải thiện trải nghiệm cho var elements */
[style*="var"] {
    touch-action: manipulation;
}

/* 98. Tối ưu cho url elements */
[style*="url"] {
    touch-action: manipulation;
}

/* 99. Cải thiện trải nghiệm cho linear-gradient elements */
[style*="linear-gradient"] {
    touch-action: manipulation;
}

/* 100. Tối ưu cho radial-gradient elements */
[style*="radial-gradient"] {
    touch-action: manipulation;
}

/* Áp dụng cho index.php: Giảm khoảng cách dưới dòng Copyright trong footer */
.ftco-footer .col-md-12.text-center {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
.ftco-footer {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
.ftco-footer .container {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
.ftco-footer .row {
    margin-bottom: 0 !important;
}
.ftco-footer .ftco-footer-widget {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
.ftco-footer .col-md-12.text-center p {
    margin-bottom: 0 !important;
    padding-bottom: 8px !important;
}